diff --git a/change/@fluentui-react-components-2746a815-4cae-4351-a6fe-ad932145c33b.json b/change/@fluentui-react-components-2746a815-4cae-4351-a6fe-ad932145c33b.json new file mode 100644 index 00000000000000..b5e02a3e4d1286 --- /dev/null +++ b/change/@fluentui-react-components-2746a815-4cae-4351-a6fe-ad932145c33b.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: move spinbutton a11y spec to Concepts/Developer/Accessibility", + "packageName": "@fluentui/react-components", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "none" +} diff --git a/change/@fluentui-react-spinbutton-49e629e4-b86e-4b48-8b72-25cd7f0b719a.json b/change/@fluentui-react-spinbutton-49e629e4-b86e-4b48-8b72-25cd7f0b719a.json new file mode 100644 index 00000000000000..e8938eee283579 --- /dev/null +++ b/change/@fluentui-react-spinbutton-49e629e4-b86e-4b48-8b72-25cd7f0b719a.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "chore: move spinbutton a11y spec to Concepts/Developer/Accessibility", + "packageName": "@fluentui/react-spinbutton", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/react-components/react-components/.storybook/preview.js b/packages/react-components/react-components/.storybook/preview.js index a0818f9f645060..6ea980be2543cb 100644 --- a/packages/react-components/react-components/.storybook/preview.js +++ b/packages/react-components/react-components/.storybook/preview.js @@ -20,7 +20,7 @@ export const parameters = { [ 'Introduction', 'Developer', - ['Quick Start', 'Styling Components', 'Positioning Components'], + ['Quick Start', 'Styling Components', 'Positioning Components', 'Accessibility', ['*', 'Components']], 'Upgrading', [ 'from v8', diff --git a/packages/react-components/react-components/src/Concepts/Accessibility/AccessibleComponents.stories.mdx b/packages/react-components/react-components/src/Concepts/Accessibility/AccessibleComponents.stories.mdx index f699574ab6c42f..2e9309cdf6f866 100644 --- a/packages/react-components/react-components/src/Concepts/Accessibility/AccessibleComponents.stories.mdx +++ b/packages/react-components/react-components/src/Concepts/Accessibility/AccessibleComponents.stories.mdx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/addon-docs'; import { ScenariosListLink } from '../../AccessibilityScenarios/utils'; - + ## Components accessibility diff --git a/packages/react-components/react-spinbutton/src/stories/SpinButton/SpinButtonAccessibility.md b/packages/react-components/react-spinbutton/src/stories/SpinButton/SpinButtonAccessibility.stories.mdx similarity index 58% rename from packages/react-components/react-spinbutton/src/stories/SpinButton/SpinButtonAccessibility.md rename to packages/react-components/react-spinbutton/src/stories/SpinButton/SpinButtonAccessibility.stories.mdx index 25177440d9bc06..43395ae3da1b17 100644 --- a/packages/react-components/react-spinbutton/src/stories/SpinButton/SpinButtonAccessibility.md +++ b/packages/react-components/react-spinbutton/src/stories/SpinButton/SpinButtonAccessibility.stories.mdx @@ -1,38 +1,47 @@ +import { Meta } from '@storybook/addon-docs'; + + + +# SpinButton Accessibility Spec + ## Component features and behavior -This section documents accessibility-related behavoirs of spin buttons. +This section documents accessibility-related behaviors of spin buttons. ### Keyboarding #### Tab Order + 1. Value field #### States + 1. Rest (Focused) 2. Editing (Focused and editing) #### Keyboard State Diagram -| Starting state | Transition | Resulting state | -| ---------- | ------------ | ------- | -| Content before spin button | Tab | Rest | -| Rest | Tab | Content after spin button | -| Editing | Tab | Content after spin button (Value committed) | -| Editing | Enter | Rest (Value committed)| -| Rest | Any Edit Key (that results in a change) | Editing | -| Editing | Any Edit Key | Editing | -| Content after spin button (Value committed) | Shift + Tab | Rest | +| Starting state | Transition | Resulting state | +| ------------------------------------------- | --------------------------------------- | ------------------------------------------- | +| Content before spin button | Tab | Rest | +| Rest | Tab | Content after spin button | +| Editing | Tab | Content after spin button (Value committed) | +| Editing | Enter | Rest (Value committed) | +| Rest | Any Edit Key (that results in a change) | Editing | +| Editing | Any Edit Key | Editing | +| Content after spin button (Value committed) | Shift + Tab | Rest | ##### Edit keys -| Edit Key | Result | -| ---------- | ------------ | -| Home | First item in defined range | -| End | Last item in defined range | -| Up arrow | Increments value higher, based on the step prop (defaulting to 1) | -| Down arrow | Increments value lower, based on the step prop (defaulting to 1) | -| Page up | Increments value higher, based on the stepPage prop (defaulting to 1) | -| Page down | Increments value lower, based on the stepPage prop (defaulting to 1) | -| Typing valid value | Valid value | + +| Edit Key | Result | +| ------------------ | --------------------------------------------------------------------- | +| Home | First item in defined range | +| End | Last item in defined range | +| Up arrow | Increments value higher, based on the step prop (defaulting to 1) | +| Down arrow | Increments value lower, based on the step prop (defaulting to 1) | +| Page up | Increments value higher, based on the stepPage prop (defaulting to 1) | +| Page down | Increments value lower, based on the stepPage prop (defaulting to 1) | +| Typing valid value | Valid value | ### High contrast mode @@ -56,15 +65,15 @@ Mouse press quick changes to value are not announced to screen readers. [Narrator defaults to reading min/max as 0 when they're (intentionally) undefined](https://microsoft.visualstudio.com/Edge/_workitems/edit/39070743) ### Narrator + Edge + When no min or max values are set Narrator announces "minimum 0" and "maximum 0". This is misleading because when these values are not set SpinButton does not enforce a min or max value. ### NVDA + Edge/Chrome + When focused on the SpinButton input field pressing up/down arrows announces "blank". NVDA + Firefox announces the correct value. ## Usage - - ### When to choose Spin button SpinButtons allow someone to incrementally adjust a value in small steps. @@ -76,6 +85,7 @@ SpinButtons are a better choice than Slider when there are many valid values and ### Required props Authors must provide a label for SpinButton. The recommended pattern for Fluent inputs is to use the Label component like this: + ``` @@ -93,8 +103,6 @@ How this is read also depends on the screen reader used but a screen reader shou ### Styling - - ### Advanced usage Placeholder: Cover potential use cases not included in our storybook examples here (or even included storybook examples, if they're complex require a notable amout of work or nuanced understanding from authors) @@ -102,17 +110,13 @@ Placeholder: Cover potential use cases not included in our storybook examples he #### Child content restrictions The component has the following structure: -* Input field -* Up button - * Increment icon -* Down button - * Decrement icon +- Input field +- Up button + - Increment icon +- Down button + - Decrement icon #### Component-specific usage warnings - - ## Extending [component name] - - diff --git a/packages/react-components/react-spinbutton/src/stories/SpinButton/index.stories.tsx b/packages/react-components/react-spinbutton/src/stories/SpinButton/index.stories.tsx index d278fa1b07e1d9..14f6f0d6634130 100644 --- a/packages/react-components/react-spinbutton/src/stories/SpinButton/index.stories.tsx +++ b/packages/react-components/react-spinbutton/src/stories/SpinButton/index.stories.tsx @@ -1,7 +1,6 @@ import { Meta } from '@storybook/react'; import { SpinButton } from '@fluentui/react-components'; -import accessibilityMd from './SpinButtonAccessibility.md'; import descriptionMd from './SpinButtonDescription.md'; import bestPracticesMd from './SpinButtonBestPractices.md'; @@ -21,7 +20,7 @@ const meta: Meta = { parameters: { docs: { description: { - component: [descriptionMd, bestPracticesMd, accessibilityMd].join('\n'), + component: [descriptionMd, bestPracticesMd].join('\n'), }, }, },