Accessibility

Install

npm install vanilla-ssr@0.4.0

Import

import { createFocusTrap, RovingTabindex, announceToScreenReader } from 'vanilla-ssr/accessibility';

Focus Trap

모달/드로어 등 오버레이에 키보드 포커스를 가두고, 닫힐 때 복귀시킵니다.

import { createFocusTrap } from 'vanilla-ssr/accessibility';

const trap = createFocusTrap({
  container: document.querySelector('[data-component="modal"]') as HTMLElement,
  initialFocus: '#primary-action',
});

// 열기
trap.activate();

// 닫기
trap.deactivate();

Roving Tabindex

수평/수직 목록에서 화살표 키로 초점을 이동시키는 패턴입니다.

import { RovingTabindex } from 'vanilla-ssr/accessibility';

const list = document.querySelector('[role="tablist"]') as HTMLElement;
const roving = new RovingTabindex(list, { orientation: 'horizontal' });

// 필요 시 해제
roving.destroy?.();

Announce to Screen Reader

동적 상태 변화를 스크린 리더에 공지합니다.

import { announceToScreenReader } from 'vanilla-ssr/accessibility';

announceToScreenReader('Saved successfully');

Note