Accessibility

Components are built around accessible names, the keyboard, and screen readers. Docs and examples do not drop the focus ring or the contrast to get a look.

Keyboard focus uses --astryx-focus-outline-*: 2px, solid, the color --astryx-color-accent, and a 3px offset. Do not zero outline globally. The docs site removes the extra outline only on controls that already draw their own focus, such as inputs with a rounded focus treatment.

An icon-only button needs a name. IconButton's label is that name. NavItem's label is required too. Decorative graphics use aria-hidden. An icon class is not text.

When content has to stay in the accessibility tree and disappear visually, use VisuallyHidden from @astryx-vue/core/VisuallyHidden.

Announcements go through useAnnounce. Changing a button's text after a copy often is not spoken, so useClipboard accepts announce and speaks that string after a successful write. Popup dismissal uses the Escape stack in useDismiss. Dialogs trap Tab with useFocusTrap and return focus with useRestoreFocus. useScrollLock locks background scroll while a popup is open.

Arrow keys for lists and menus live in useListFocus, useGridRovingFocus, and useTypeahead. ChatMessageList is role="log". Keep isStreaming true while an assistant reply is still growing so a screen reader waits for the finished message instead of speaking every token.

Motion follows prefers-reduced-motion. The shared motion classes collapse distance and scale to zero. See Motion.

There is no separate third-party audit to cite. Keyboard and screen reader behavior for a component is what that component's docs and the repository tests say.