Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: add skip nav link (#894)

Browse Source
This commit is contained in:
olav 2022-04-21 10:07:49 +02:00 committed by GitHub
parent ff0d55b6cc
commit e5e8349593
5 changed files with 80 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/component/common/SkipNav/SkipNavLink.styles.ts Normal file
View File

@ -0,0 +1,33 @@
import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
link: {
position: 'fixed',
overflow: 'hidden',
zIndex: 1000,
top: '1.125rem',
left: '1.125rem',
padding: '0.5rem 1rem',
whiteSpace: 'nowrap',
textDecoration: 'none',
background: theme.palette.primary.dark,
color: theme.palette.primary.contrastText,
borderRadius: theme.borders.radius.main,
fontSize: theme.fontSizes.smallBody,
[theme.breakpoints.down(960)]: {
top: '0.8rem',
left: '0.8rem',
},
'&:not(:focus):not(:active)': {
clip: 'rect(0 0 0 0)',
clipPath: 'inset(50%)',
zIndex: -1,
width: 1,
height: 1,
margin: -1,
padding: 0,
},
},
}));

12
frontend/src/component/common/SkipNav/SkipNavLink.tsx Normal file
View File

@ -0,0 +1,12 @@
import { SKIP_NAV_TARGET_ID } from 'component/common/SkipNav/SkipNavTarget';
import { useStyles } from 'component/common/SkipNav/SkipNavLink.styles';
export const SkipNavLink = () => {
const styles = useStyles();
return (
<a href={`#${SKIP_NAV_TARGET_ID}`} className={styles.link}>
Skip to content <span aria-hidden>&darr;</span>
</a>
);
};

5
frontend/src/component/common/SkipNav/SkipNavTarget.tsx Normal file
View File

@ -0,0 +1,5 @@
export const SKIP_NAV_TARGET_ID = 'skip-nav-target-id';
export const SkipNavTarget = () => {
return <div id={SKIP_NAV_TARGET_ID} />;
};

4
frontend/src/component/layout/MainLayout/MainLayout.tsx
View File

@ -9,6 +9,8 @@ import Proclamation from 'component/common/Proclamation/Proclamation';
import BreadcrumbNav from 'component/common/BreadcrumbNav/BreadcrumbNav';
import textureImage from 'assets/img/texture.png';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { SkipNavLink } from 'component/common/SkipNav/SkipNavLink';
import { SkipNavTarget } from 'component/common/SkipNav/SkipNavTarget';
const useStyles = makeStyles(theme => ({
container: {
@ -35,7 +37,9 @@ export const MainLayout = ({ children }: IMainLayoutProps) => {
return (
<>
<SkipNavLink />
<Header />
<SkipNavTarget />
<Grid container className={muiStyles.container}>
<main className={classnames(styles.contentWrapper)}>
<Grid item className={styles.content} xs={12} sm={12}>

54
frontend/src/component/menu/Header/Header.tsx
View File

@ -61,34 +61,32 @@ const Header = () => {
if (smallScreen) {
return (
<>
<AppBar className={styles.header} position="static">
<Container className={styles.container}>
<Tooltip title="Menu">
<IconButton
className={styles.drawerButton}
onClick={toggleDrawer}
aria-controls="header-drawer"
aria-expanded={openDrawer}
>
<MenuIcon />
</IconButton>
</Tooltip>
<DrawerMenu
title={name}
flags={flags}
links={links}
open={openDrawer}
toggleDrawer={toggleDrawer}
admin={admin}
routes={filteredMainRoutes}
/>
<div className={styles.userContainer}>
<UserProfile />
</div>
</Container>
</AppBar>
</>
<AppBar className={styles.header} position="static">
<Container className={styles.container}>
<Tooltip title="Menu">
<IconButton
className={styles.drawerButton}
onClick={toggleDrawer}
aria-controls="header-drawer"
aria-expanded={openDrawer}
>
<MenuIcon />
</IconButton>
</Tooltip>
<DrawerMenu
title={name}
flags={flags}
links={links}
open={openDrawer}
toggleDrawer={toggleDrawer}
admin={admin}
routes={filteredMainRoutes}
/>
<div className={styles.userContainer}>
<UserProfile />
</div>
</Container>
</AppBar>
);
}