add aria-label and alt messages

This commit is contained in:
Sean Yesmunt 2020-01-30 15:55:45 -05:00
parent 6a5f90ce2a
commit 8a9a79720b
4 changed files with 30 additions and 13 deletions

View file

@ -35,8 +35,20 @@ function ChannelThumbnail(props: Props) {
'channel-thumbnail--small': small, 'channel-thumbnail--small': small,
})} })}
> >
{!showThumb && <img className="channel-thumbnail__default" src={thumbnailPreview || Gerbil} />} {!showThumb && (
{showThumb && <img className="channel-thumbnail__custom" src={thumbnailPreview || thumbnail} />} <img
alt={__('Channel profile picture')}
className="channel-thumbnail__default"
src={thumbnailPreview || Gerbil}
/>
)}
{showThumb && (
<img
alt={__('Channel profile picture')}
className="channel-thumbnail__custom"
src={thumbnailPreview || thumbnail}
/>
)}
</div> </div>
); );
} }

View file

@ -132,13 +132,16 @@ const Header = (props: Props) => {
{(!IS_WEB || authenticated) && ( {(!IS_WEB || authenticated) && (
<Fragment> <Fragment>
<Button <Button
aria-label={__('Your wallet')}
navigate={`/$/${PAGES.WALLET}`} navigate={`/$/${PAGES.WALLET}`}
className="header__navigation-item menu__title header__navigation-item--balance" className="header__navigation-item menu__title header__navigation-item--balance"
label={getWalletTitle()} label={getWalletTitle()}
/> />
<Menu> <Menu>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon"> <MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
<Icon size={18} icon={ICONS.PUBLISH} /> <span aria-label={__('Publish a file, or create a channel')}>
<Icon size={18} icon={ICONS.PUBLISH} />
</span>
</MenuButton> </MenuButton>
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISH}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISH}`)}>
@ -154,7 +157,9 @@ const Header = (props: Props) => {
<Menu> <Menu>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon"> <MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
<Icon size={18} icon={ICONS.ACCOUNT} /> <span aria-label={__('Your account')}>
<Icon size={18} icon={ICONS.ACCOUNT} />
</span>
</MenuButton> </MenuButton>
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISHED}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISHED}`)}>
@ -169,8 +174,6 @@ const Header = (props: Props) => {
<Icon aria-hidden icon={ICONS.FEATURED} /> <Icon aria-hidden icon={ICONS.FEATURED} />
{__('Rewards')} {__('Rewards')}
</MenuItem> </MenuItem>
{/* Commented out until new invite system is implemented */}
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
<Icon aria-hidden icon={ICONS.INVITE} /> <Icon aria-hidden icon={ICONS.INVITE} />
{__('Invites')} {__('Invites')}
@ -196,7 +199,9 @@ const Header = (props: Props) => {
)} )}
<Menu> <Menu>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon"> <MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
<Icon size={18} icon={ICONS.SETTINGS} /> <span aria-label={__('Settings')}>
<Icon size={18} icon={ICONS.SETTINGS} />
</span>
</MenuButton> </MenuButton>
<MenuList className="menu__list--header"> <MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}> <MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>

View file

@ -126,6 +126,12 @@
&:focus { &:focus {
@include focus; @include focus;
} }
span {
display: flex;
justify-content: center;
align-items: center;
}
} }
.header__navigation-item--lbry { .header__navigation-item--lbry {

View file

@ -75,9 +75,3 @@
font-size: var(--font-small); font-size: var(--font-small);
padding-top: 0; padding-top: 0;
} }
.menu__title {
span {
margin-left: var(--spacing-miniscule);
}
}