diff --git a/src/components/App.tsx b/src/components/App.tsx index d8bead7a21c094115910faa4312a0a9fb2a0b478..21b8c485d12854d1abdc07d48a2ea7aa782aaec2 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -10,6 +10,7 @@ import { useLocation } from 'react-router-dom' import { useAppSelector } from 'store/hooks' import MatomoTracker from 'utils/matomoTracker' import usePageTitle from './Hooks/usePageTitle' +import SkipLink from './SkipLink/SkipLink' interface AppProps { tracker: undefined | MatomoTracker @@ -38,20 +39,23 @@ export const App = ({ tracker }: AppProps) => { }, [webviewIntent]) return ( - <Layout> - <SplashRoot> - {termsStatus.accepted && ( - <> - <WelcomeModal open={!onboarding.isWelcomeSeen} /> - <Navbar /> - </> - )} - <main className="app-content"> - <AppRoutes termsStatus={termsStatus} /> - </main> - </SplashRoot> - {process.env.NODE_ENV !== 'production' ? <CozyDevtools /> : null} - </Layout> + <> + <SkipLink /> + <Layout> + <SplashRoot> + {termsStatus.accepted && ( + <> + <WelcomeModal open={!onboarding.isWelcomeSeen} /> + <Navbar /> + </> + )} + <main id="app-content" className="app-content" tabIndex={-1}> + <AppRoutes termsStatus={termsStatus} /> + </main> + </SplashRoot> + {process.env.NODE_ENV !== 'production' ? <CozyDevtools /> : null} + </Layout> + </> ) } diff --git a/src/components/SkipLink/SkipLink.scss b/src/components/SkipLink/SkipLink.scss new file mode 100644 index 0000000000000000000000000000000000000000..c893a4a3ac29691269d6784ca0bdd345db135036 --- /dev/null +++ b/src/components/SkipLink/SkipLink.scss @@ -0,0 +1,18 @@ +@import 'src/styles/base/color'; +@import 'src/styles/base/z-index'; + +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: $dark; + color: $white; + border: $white; + padding: 8px; + z-index: $skip-link; + text-decoration: 'none'; + transition: top 0.3s; + &:focus { + top: 0; + } +} diff --git a/src/components/SkipLink/SkipLink.tsx b/src/components/SkipLink/SkipLink.tsx new file mode 100644 index 0000000000000000000000000000000000000000..b00fb54e610b0c60003c41f505765094f1f0da6b --- /dev/null +++ b/src/components/SkipLink/SkipLink.tsx @@ -0,0 +1,23 @@ +import { useI18n } from 'cozy-ui/transpiled/react/I18n' +import React from 'react' +import './SkipLink.scss' + +const SkipLink = () => { + const { t } = useI18n() + + const handleSkip = (event: React.MouseEvent<HTMLButtonElement>) => { + event.preventDefault() + const mainContent = document.getElementById('app-content') + if (mainContent) { + mainContent.focus() + } + } + + return ( + <button className="skip-link" onClick={handleSkip}> + {t('common.accessibility.skip_link')} + </button> + ) +} + +export default SkipLink diff --git a/src/components/Terms/CGUModal.tsx b/src/components/Terms/CGUModal.tsx index 5398cea0575f7766a839ca806a58be7d40aca499..8bd6c0cbbf1f7a64cc7ec14f1c4b1668e9756e20 100644 --- a/src/components/Terms/CGUModal.tsx +++ b/src/components/Terms/CGUModal.tsx @@ -1,11 +1,11 @@ import { Button } from '@material-ui/core' import Dialog from '@material-ui/core/Dialog' import CloseIcon from 'assets/icons/ico/close.svg' +import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton' import GCUContent from 'components/Options/GCU/GCUContent' import { useI18n } from 'cozy-ui/transpiled/react/I18n' import React from 'react' import './termsView.scss' -import StyledIconButton from 'components/CommonKit/IconButton/StyledIconButton' interface CGUModalProps { open: boolean diff --git a/src/locales/fr.json b/src/locales/fr.json index 389b6ee5deaa478f2502396087a882c66c365417..727e662ac0fa6ff72f841994da56e6f9ae2893ec 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -22,7 +22,8 @@ "title_sge_connect": "Connexion à l'électricité", "title_gas_connect": "Connexion au gaz", "accessibility": { - "loading": "Chargement" + "loading": "Chargement", + "skip_link": "Aller au contenu" }, "funders_logo": "Logo des financeurs : Métropole de Lyon, Etat via la Banque des Territoires et son programme France 2030, Union Européenne" }, diff --git a/src/styles/base/_z-index.scss b/src/styles/base/_z-index.scss index 17a5dea8e7482596a2e437d272f293d7242f99c8..4fe88ba947f1a029c8575b439f51614140cc465f 100644 --- a/src/styles/base/_z-index.scss +++ b/src/styles/base/_z-index.scss @@ -3,3 +3,4 @@ $z-pieChart: 5; $z-dialog: 10; $z-header: 18; $z-splash: 1500; +$skip-link: 1000001;