TypeScript: Accessibility

Foundation includes small DOM primitives for repeated accessibility patterns. They do not replace a full accessible component library.

Focus management

import {
  getFocusableElements,
  restoreFocus,
  trapTabKey,
} from '@micazoyolli/foundation';

Accessible panel

Tab can stay inside the panel and Escape can close it.

Scroll lock

import { lockBodyScroll, unlockBodyScroll } from '@micazoyolli/foundation';

const lock = lockBodyScroll();
unlockBodyScroll(lock);

Escape

import { createEscapeKeyHandler } from '@micazoyolli/foundation';

const onEscape = createEscapeKeyHandler(close);
document.addEventListener('keydown', onEscape);

Protected media

import { isProtectedMediaTarget } from '@micazoyolli/foundation';

IMG

Protection applies to concrete media, not the whole page.

Focus visible

Foundation does not export global focus styles. The consumer project must keep a visible, consistent and sufficiently contrasted focus indicator.

Focus me with Tab

Related export: src/a11y/focus.ts