mirror of
https://github.com/LBRYFoundation/lbry-desktop.git
synced 2025-09-04 04:45:11 +00:00
add aria-label and alt messages
This commit is contained in:
parent
6a5f90ce2a
commit
8a9a79720b
4 changed files with 30 additions and 13 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}`)}>
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue