ContextQMD
Back to Fluentui

Accessibility Scenarios

apps/public-docsite-v9/src/AccessibilityScenarios/ListOfScenarios.mdx

4.40.2-hotfix23.1 KB
Original Source

import { Meta } from '@storybook/addon-docs/blocks'; import { FullscreenLink } from './utils'; export const parentPath = 'concepts-developer-accessibility-scenarios';

<Meta title="Concepts/Developer/Accessibility/Scenarios" />

Accessibility Scenarios

Accessibility scenarios are used to validate accessibility of components and demonstrate common UI patterns using Fluent UI components.

Component: Accordion

  • <FullscreenLink content="Accordion / Personal form" parent={parentPath} story="personal-form-accordion" />
  • <FullscreenLink content="Accordion / FAQ" parent={parentPath} story="faq-accordion" />

Component: Button

  • <FullscreenLink content="Button / Messenger" parent={parentPath} story="messenger-buttons" />

Component: Checkbox

  • <FullscreenLink content="Checkbox / Questionnaire about food" parent={parentPath} story="questionnaire-about-food-checkboxes" />

Component: Input

  • <FullscreenLink content="Input / Ticket order form" parent={parentPath} story="ticket-order-form-inputs" />
  • <FullscreenLink content="Link / Site navigation" parent={parentPath} story="site-navigation-links" />

Component: Menu

  • <FullscreenLink content="Menu / Profile menu" parent={parentPath} story="profile-menu" />
  • <FullscreenLink content="Menu / Menu with split item" parent={parentPath} story="menu-with-split-item" />

Component: Popover

  • <FullscreenLink content="Popover / Add people" parent={parentPath} story="add-people-popover" />

Component: RadioGroup

  • <FullscreenLink content="RadioGroup / Questionnaire about transportation" parent={parentPath} story="questionnaire-about-transportation-radios" />

Component: Slider

  • <FullscreenLink content="Slider / Sound control" parent={parentPath} story="sound-control-sliders" />

Component: Spinner

  • <FullscreenLink content="Spinner / Posts loading" parent={parentPath} story="posts-loading-spinner" />

Component: SplitButton

  • <FullscreenLink content="SplitButton / Event reminder" parent={parentPath} story="event-reminder-split-button" />

Component: Switch

  • <FullscreenLink content="Switch / Device controls" parent={parentPath} story="device-controls-switches" />

Component: TabList

  • <FullscreenLink content="TabList / Mail settings with horizontal tablist" parent={parentPath} story="mail-settings-horizontal-tab-list" />
  • <FullscreenLink content="TabList / Mail settings with vertical tablist" parent={parentPath} story="mail-settings-vertical-tab-list" />
  • <FullscreenLink content="TabList / Mail settings with overflow tablist" parent={parentPath} story="mail-settings-overflow-tab-list" />

Component: Textarea

  • <FullscreenLink content="Textarea / Questionnaire about customer experience" parent={parentPath} story="questionnaire-about-customer-experience-textareas" />

Component: ToggleButton

  • <FullscreenLink content="ToggleButton / Device controls" parent={parentPath} story="device-controls-toggle-buttons" />

Component: Tooltip

  • <FullscreenLink content="Tooltip / Buttons with tooltip" parent={parentPath} story="buttons-with-tooltip" />