ExcessibilityStorybook.Inspector (excessibility_storybook v0.1.0)

Copy Markdown View Source

An example story that inspects any component story's variations:

  • Sounds like: roughly what a screen reader announces, element by element.

  • Focus order: tab stops numbered on the component, with problems listed.

  • Stress: the variation at 320px, with 200% text, with WCAG text spacing, through color-vision filters and blur, with clipping and sideways scroll reported.

    defmodule Storybook.Accessibility.Inspector do use PhoenixStorybook.Story, :example use ExcessibilityStorybook.Inspector, backend: MyAppWeb.Storybook end

Pass storybook_path: if the storybook isn't mounted at /storybook. Needs the XsbFrame hook from priv/static/excessibility_storybook.js registered in the storybook's JS. "Sounds like" is computed from the DOM with dom-accessibility-api; it approximates a screen reader, it isn't one.

Summary

Functions

handle_event(binary, params, socket)
mount(params, session, socket, opts)
render(assigns)

Functions

handle_event(binary, params, socket)

mount(params, session, socket, opts)

render(assigns)