djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve accessibility

Browse source
This commit is contained in:
dominik-zeglen 2020-09-07 17:36:55 +02:00
parent f1960281f8
commit 97c3d06241
1 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/components/SideBar/MenuItem.tsx
View file

@ -33,6 +33,7 @@ const useStyles = makeStyles(
}, },
label: { label: {
cursor: "pointer", cursor: "pointer",
display: "block",
fontSize: 16, fontSize: 16,
fontWeight: "bold", fontWeight: "bold",
opacity: 1, opacity: 1,
@ -41,16 +42,20 @@ const useStyles = makeStyles(
paper: { paper: {
borderRadius: 16, borderRadius: 16,
cursor: "default", cursor: "default",
padding: theme.spacing(3) padding: theme.spacing(3),
textAlign: "left"
}, },
popper: { popper: {
marginLeft: theme.spacing(3), marginLeft: theme.spacing(3),
zIndex: 2 zIndex: 2
}, },
root: { root: {
"&:hover": { "&:hover, &:focus": {
color: theme.palette.primary.main color: theme.palette.primary.main,
outline: 0
}, },
background: "none",
border: "none",
borderBottomRightRadius: 100, borderBottomRightRadius: 100,
borderTopRightRadius: 100, borderTopRightRadius: 100,
color: theme.palette.text.disabled, color: theme.palette.text.disabled,
@ -79,9 +84,11 @@ const useStyles = makeStyles(
marginBottom: theme.spacing(2) marginBottom: theme.spacing(2)
} }
}, },
"&:hover": { "&:hover, &:focus": {
color: theme.palette.primary.main color: theme.palette.primary.main
} },
background: "none",
border: "none"
} }
}), }),
{ {
@ -97,7 +104,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
}) => { }) => {
const classes = useStyles({}); const classes = useStyles({});
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const anchor = React.useRef<HTMLDivElement>(null); const anchor = React.useRef<HTMLButtonElement>(null);
const handleClick = (event: React.MouseEvent, menuItem: IMenuItem) => { const handleClick = (event: React.MouseEvent, menuItem: IMenuItem) => {
if (menuItem.children) { if (menuItem.children) {
@ -109,7 +116,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
}; };
return ( return (
<div <button
className={classNames(classes.root, { className={classNames(classes.root, {
[classes.rootActive]: active, [classes.rootActive]: active,
[classes.rootExpanded]: !isMenuShrunk [classes.rootExpanded]: !isMenuShrunk
@ -119,6 +126,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
> >
{menuItem.icon && <SVG className={classes.icon} src={menuItem.icon} />} {menuItem.icon && <SVG className={classes.icon} src={menuItem.icon} />}
<Typography <Typography
aria-label={menuItem.ariaLabel}
className={classNames(classes.label, { className={classNames(classes.label, {
[classes.hideLabel]: isMenuShrunk [classes.hideLabel]: isMenuShrunk
})} })}
@ -144,9 +152,14 @@ const MenuItem: React.FC<MenuItemProps> = ({
<Paper elevation={6} className={classes.paper}> <Paper elevation={6} className={classes.paper}>
{menuItem.children.map(subMenuItem => ( {menuItem.children.map(subMenuItem => (
<Typography <Typography
aria-label={subMenuItem.ariaLabel}
component="button"
className={classNames(classes.label, classes.subMenuLabel)} className={classNames(classes.label, classes.subMenuLabel)}
key={subMenuItem.url} key={subMenuItem.url}
onClick={event => handleClick(event, subMenuItem)} onClick={event => {
event.preventDefault();
handleClick(event, subMenuItem);
}}
data-test="submenu-item-label" data-test="submenu-item-label"
data-test-id={subMenuItem.testingContextId} data-test-id={subMenuItem.testingContextId}
variant="body2" variant="body2"
@ -158,7 +171,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
</ClickAwayListener> </ClickAwayListener>
</Popper> </Popper>
)} )}
</div> </button>
); );
}; };