LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity

add aria-label and alt messages

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

16
ui/component/channelThumbnail/view.jsx
View file

@ -35,8 +35,20 @@ function ChannelThumbnail(props: Props) {
'channel-thumbnail--small': small,
})}
>
{!showThumb && <img className="channel-thumbnail__default" src={thumbnailPreview || Gerbil} />}
{showThumb && <img className="channel-thumbnail__custom" src={thumbnailPreview || thumbnail} />}
{!showThumb && (
<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>
);
}

15
ui/component/header/view.jsx
View file

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

6
ui/scss/component/_header.scss
View file

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

6
ui/scss/component/menu-button.scss
View file

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