Accessibility

import {Button} from '@wearables-ui-toolkit/mrbd';

<Button icon={muteIcon} ariaLabel="Mute microphone" onActivate={mute} />;

import {VerticalList} from '@wearables-ui-toolkit/mrbd';

<VerticalList ariaLabel="Recent messages">{rows}</VerticalList>;

import {TextStyle, TextView} from '@wearables-ui-toolkit/mrbd';

<TextView as="h2" textStyle={TextStyle.BODY2_EMPHASIZED}>
  Today
</TextView>;

• ListItem moves the semantics to the row. A row with a trailing switch, radio, or slider renders role="switch", role="radio", or role="slider" on the row itself, along with aria-checked or aria-valuenow/aria-valuemin/aria-valuemax, and hides the indicator inside it from the accessibility tree.
• Switch and RadioButton are visual state indicators, not controls. Their appearance is driven entirely by props, they handle no input, and they are not tab stops, but they still report role="switch" and role="radio" with aria-checked.
• SliderBar is display-only in the same way until you give it an onChange: by default it reports role="progressbar" with its range and takes no input. Passing onChange opts it into an interactive slider — role="slider", a tab stop, and left/right arrow stepping by incrementPercentage — so pass one only when the bar itself owns the action, never inside a row that already reports a slider role.

import {FocusNavigationProvider} from '@wearables-ui-toolkit/mrbd';

<FocusNavigationProvider containerRef={hostRef} blockTabNavigation>
  {children}
</FocusNavigationProvider>;

• Arrow keys prefer candidates whose box overlaps the beam swept in the pressed direction, then the shortest weighted distance, so movement stays spatially predictable rather than following DOM order.
• Every directional key event runs one movement step synchronously, so rapidly repeated arrow keys traverse consecutive candidates without waiting for focus animations to finish.
• Elements that are hidden, inert, aria-hidden, fully transparent, resolving to pointer-events: none, zero-sized, or clipped outside their scroll viewport are not candidates. Only the element’s own resolved pointer-events is read, so a control that sets pointer-events: auto under an ancestor that turned them off is still reachable.
• When no candidate exists, the provider asks the nearest scroll container to consume the movement. Only if that also fails does the focused control receive an invalid-direction signal, surfaced as onInvalidFocusDirection, which components turn into rubber-band feedback.
• Where a real mouse is expected, a primary-button click that lands near a focusable moves focus to the nearest one, so a mouse behaves like reaching that element by arrow key. The provider turns this off on Meta Ray-Ban Display, where input is directional and a synthetic tap must not move focus.

import {Button, TooltipMode} from '@wearables-ui-toolkit/mrbd';

<Button
  title="Send"
  disabled={!isConnected}
  tooltipMode={TooltipMode.DISABLED_CLICK}
  tooltipText="Reconnect to send"
  onActivate={send}
/>;

import {VolumeIndicator} from '@wearables-ui-toolkit/mrbd';

<VolumeIndicator value={volume} announceUpdatesForAccessibility />;

• Escape and system Back dismiss the topmost transient surface before they change routes. A tooltip, context menu, or vertical menu consumes the key first.
• ContextMenu reports why through onDismiss, with DismissReason.BACK_BUTTON for the key press and DismissReason.NAVIGATION when directional movement leaves the menu. VerticalMenu reports the same split through onDismissRequest with VerticalMenuDismissReason.ESCAPE and VerticalMenuDismissReason.NAVIGATION.
• After a surface closes, focus returns to the control that opened it. Verify this, because a control that unmounts while open cannot receive focus back.
• Handle unclaimed Escape at the application boundary with useBackNavigation. Return false when you cannot navigate back so the browser keeps its default handling; any other return value claims the event.

import {useBackNavigation} from '@wearables-ui-toolkit/mrbd';

useBackNavigation(() => {
  if (!canGoBack) {
    return false;
  }
  goBack();
});

• Back is a system action, so applications must not render an in-app back button.

import {
  AnimationDurations,
  reducedMotionDuration,
  usePrefersReducedMotion,
} from '@wearables-ui-toolkit/mrbd';

const prefersReducedMotion = usePrefersReducedMotion();
const durationMs = reducedMotionDuration(
  AnimationDurations.CONTAINER_STATE_CHANGE,
  prefersReducedMotion,
);

@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}

1. Complete every task with arrow keys and the activation key only, with no pointer.
2. Repeat each direction rapidly at the first and last item of every scroll region and confirm focus, scrolling, and animation stay in sync.
3. Open and dismiss every transient surface with Escape and with system Back, and confirm focus returns to the trigger.
4. Navigate forward and back through every route and confirm the previously focused item and scroll offset are restored before the page is visible.
5. Focus every disabled control and confirm it explains itself instead of silently doing nothing.
6. Read the accessibility tree: check names, roles, values, heading order, and that no decorative indicator appears as a widget.
7. Re-run the walkthrough with reduced motion enabled and at a materially different viewport size.

• Name actions by outcome so assistive technology announces what activation does.
• Keep semantics on the one element that owns the action.
• Label every scroll region, list, and menu so boundaries are announced.
• Let components own roles and focus, and pass application meaning through public props.

• Keep decorative visuals out of the focus order rather than adding tabIndex.
• Pair color with another cue because state must not rely on color alone.
• Leave browser Tab traversal available by default so keyboard and assistive-technology users retain a working path. Set blockTabNavigation only for a surface that is genuinely directional-input-only.
• Use component dismissal callbacks rather than layering additional key handlers on a component that already reports dismissal.