Accessibility

import { announce, aria, role } from 'weblisk/a11y/aria.js';

// Polite announcement (waits for user to finish reading)
announce('3 new items loaded');

// Assertive announcement (interrupts)
announce('Error: Connection lost', 'assertive');

// Declarative ARIA attributes
aria('#dialog', { modal: true, labelledby: 'dialog-title' });

// Set a role with required attributes
role('#tab-panel', 'tabpanel', { labelledby: 'tab-1' });

import { focusTrap } from 'weblisk/a11y/focus.js';

const trap = focusTrap('#modal');
trap.activate();   // Tab now cycles within #modal
trap.deactivate(); // Release focus

import { rovingIndex } from 'weblisk/a11y/focus.js';

const cleanup = rovingIndex('#toolbar', 'button', {
  horizontal: true,
  wrap: true,    // Arrow keys wrap around
});

import { skipLink } from 'weblisk/a11y/focus.js';

skipLink('main-content');
// Creates: <a class="wl-skip" href="#main-content">Skip to main content</a>

import { motionReduced, motion, safeTransition, ifMotion } from 'weblisk/a11y/motion.js';

// Reactive signal
effect(() => {
  if (motionReduced()) {
    console.log('User prefers reduced motion');
  }
});

// Choose value based on preference
const duration = motion('0.3s', '0s');

// Only set transition if motion is allowed
safeTransition('#panel', 'transform 0.3s ease');

// Run function only if motion is allowed
ifMotion(() => {
  el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300 });
});

import { injectReducedMotionCSS } from 'weblisk/a11y/motion.js';

injectReducedMotionCSS();

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

import { locale, setLocale, textDirection, formatter } from 'weblisk/a11y/locale.js';

// Reactive locale signal (reads html[lang] or navigator.language)
console.log(locale()); // 'en-US'

// Switch locale — all formatters update reactively
setLocale('fr');

// Text direction signal for RTL support
const dir = textDirection(); // 'ltr' or 'rtl'

// Intl formatters tied to the locale signal
const fmt = formatter();
fmt.number(1234.5);              // '1,234.5' or '1 234,5'
fmt.date(new Date());             // locale-formatted date
fmt.currency(99.99, 'USD');       // '$99.99' or '99,99 $US'
fmt.relative(-2, 'day');         // '2 days ago' or 'il y a 2 jours'
fmt.list(['A', 'B', 'C']);        // 'A, B, and C' or 'A, B et C'