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

improve header markup for voiceover and add aria-expanded attribute for cards

Browse source
This commit is contained in:
Sean Yesmunt 2020-04-30 11:42:40 -04:00
parent 8d888d3e23
commit f99ce16a67
3 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ui/component/common/card.jsx
View file

@ -55,6 +55,7 @@ export default function Card(props: Props) {
<div className="card__title-actions">
<Button
button={'alt'}
aria-expanded={expanded}
aria-label={__('More')}
icon={expanded ? ICONS.SUBTRACT : ICONS.ADD}
onClick={() => setExpanded(!expanded)}

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

@ -162,10 +162,11 @@ const Header = (props: Props) => {
label={getWalletTitle()}
/>
<Menu>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
<span aria-label={__('Publish a file, or create a channel')}>
<Icon size={18} icon={ICONS.PUBLISH} />
</span>
<MenuButton
aria-label={__('Publish a file, or create a channel')}
className="header__navigation-item menu__title header__navigation-item--icon"
>
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISH}`)}>
@ -180,10 +181,11 @@ const Header = (props: Props) => {
</Menu>
<Menu>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
<span aria-label={__('Your account')}>
<Icon size={18} icon={ICONS.ACCOUNT} />
</span>
<MenuButton
aria-label={__('Your account')}
className="header__navigation-item menu__title header__navigation-item--icon"
>
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISHED}`)}>
@ -232,10 +234,11 @@ const Header = (props: Props) => {
</Fragment>
)}
<Menu>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon">
<span aria-label={__('Settings')}>
<Icon size={18} icon={ICONS.SETTINGS} />
</span>
<MenuButton
aria-label={__('Settings')}
className="header__navigation-item menu__title header__navigation-item--icon"
>
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>

4
ui/scss/component/_button.scss
View file

@ -4,6 +4,10 @@
@media (max-width: $breakpoint-small) {
font-size: var(--font-small);
}
&:focus {
@include focus;
}
}
.button--uri-indicator {