LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-23 17:47:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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"> <div className="card__title-actions">
<Button <Button
button={'alt'} button={'alt'}
aria-expanded={expanded}
aria-label={__('More')} aria-label={__('More')}
icon={expanded ? ICONS.SUBTRACT : ICONS.ADD} icon={expanded ? ICONS.SUBTRACT : ICONS.ADD}
onClick={() => setExpanded(!expanded)} onClick={() => setExpanded(!expanded)}

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

@ -162,10 +162,11 @@ const Header = (props: Props) => {
label={getWalletTitle()} label={getWalletTitle()}
/> />
<Menu> <Menu>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon"> <MenuButton
<span aria-label={__('Publish a file, or create a channel')}> aria-label={__('Publish a file, or create a channel')}
<Icon size={18} icon={ICONS.PUBLISH} /> className="header__navigation-item menu__title header__navigation-item--icon"
</span> >
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
</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}`)}>
@ -180,10 +181,11 @@ const Header = (props: Props) => {
</Menu> </Menu>
<Menu> <Menu>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon"> <MenuButton
<span aria-label={__('Your account')}> aria-label={__('Your account')}
<Icon size={18} icon={ICONS.ACCOUNT} /> className="header__navigation-item menu__title header__navigation-item--icon"
</span> >
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
</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}`)}>
@ -232,10 +234,11 @@ const Header = (props: Props) => {
</Fragment> </Fragment>
)} )}
<Menu> <Menu>
<MenuButton className="header__navigation-item menu__title header__navigation-item--icon"> <MenuButton
<span aria-label={__('Settings')}> aria-label={__('Settings')}
<Icon size={18} icon={ICONS.SETTINGS} /> className="header__navigation-item menu__title header__navigation-item--icon"
</span> >
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</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}`)}>

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

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