mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-08-26 13:02:50 +00:00
28 lines
999 B
TypeScript
28 lines
999 B
TypeScript
import { useTranslation } from 'react-i18next';
|
|
|
|
/** The id the skip link targets. Exported so the main region cannot drift. */
|
|
export const MAIN_CONTENT_ID = 'ema-main-content';
|
|
|
|
/**
|
|
* "Skip to main content" — the first thing a keyboard user should reach.
|
|
*
|
|
* Both apps put a sidebar of 20-plus navigation items before the page body, so
|
|
* without this, reaching the actual content means tabbing through every one of
|
|
* them on every navigation. WCAG 2.4.1 asks for a bypass; there was none.
|
|
*
|
|
* Hidden until focused, which is why it is positioned off-screen rather than
|
|
* `display: none` — the latter would make it unfocusable and defeat the point.
|
|
* Styling lives in `semantic.css` as `.ema-skip-link`.
|
|
*
|
|
* Render it as the first child of the shell, before the header.
|
|
*/
|
|
export function SkipLink() {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<a className="ema-skip-link" href={`#${MAIN_CONTENT_ID}`}>
|
|
{t('a11y.skipToContent', 'Skip to main content')}
|
|
</a>
|
|
);
|
|
}
|