From a560d5fd83652a667bbdfd5cab6082c8ab01a6c2 Mon Sep 17 00:00:00 2001
From: Adam <adam.samec@gmail.com>
Date: Mon, 24 Oct 2022 15:56:49 +0200
Subject: [PATCH] feat: Add accessibility scenarios for Fluent UI v9 components
 #3 (#23334)

* Add accessibility scenarios for the Accordion, Button and Popover components

* Change scenario titles

* Use string directly as component prop value

Co-authored-by: Peter Varholak <peter.varholak@gmail.com>

* replace alert with status text and fix warnings

* Replace useCallback with ordinary function

* Revert the title for the scenarios list page

* Removed unnecessary fragment

* Use <Label> components

* Remove not used exports

* Change files

* Replace Calendar buttons scenario with Messenger buttons scenario, add Tooltip scenario and correct some wording

* Add ToggleButton component scenario and replace button element with Button component in Tooltip scenario

* Replace calendar scenario link with messenger scenario link and grammar changes

* Add Link component scenario, and small changes in Accordion

* Add beta version of SplitButton scenario

* Make SplitButton scenario working

* Change label for menu button within SplitButton

* Replace Button with MenuButton in Menu scenario

* Fix error in Menu scenario

* Refactor aria-label for menu button within split button

* Extract Postpone menu item into separate button

* Add tooltip button without triggerAriaAttribute prop

* Add other gender radio option

* Rename disabled links and add nav region

* Add heading and description for toggle buttons

* Add FAQ accordion scenario and change radios in personal form accordion scenario

* Add h1 for accordion scenarios

* Fix lint errors and change Tooltip scenario for more real life examples

* Add icon buttons for Tooltip scenario

* Add x of Y and Submit button to simple form accordion scenario

* Add menu with split item scenario

* Change menu items in menu with split item scenario

* Fix visible label in split button in menu secondary action

* Remove X of Y in Accordion scenario

* Enable dismiss of tooltip with Escape

* Move password hint button between password label and input field

* Reintroduce X of Y for personal form accordion scenario

* Add as='h2' for accordion headers

* Remove X of Y in personal form accordion scenario

* Fix Tooltip error regarding relationship attribute

* Add uncomplete Input scenario

* Add slider component scenario and fix TS error in Input scenario

* Change files

* Fix import errors

* Add screen reader supported validation to input scenario form

* Add lint disable next line for complex object

* Rename labels in slider scenario

* Remove errorneously inserted unused declaration and import

* Replace <input> with <Input> and add <form>

* Remove already not needed import error ignore comments

* Add onBlur validation for Input scenario and changed input requirements and hints

* Replace 'any' with new type

* Fix error messages flickering

* Add aria=invalid in Input scenario

* Fix nickname typo

* Replace h1 heading with h2

* Implement form validation using React Hook Form

* Ignore line max length lint error and add react-hook-form dependency

* Focus error element upon form submission and narrate when already focused

* Change form revalidate to onBlur

* Replace custom validation with React Hook Form library, but narration is not working properly

* toggle alert role to force re-reading of errors

* fix narration on submit

* Fix onblur error narration instead of first error narration on submit

* Remove pubsub dependancy which was moved to root

* Remove the password hint scenario for Tooltip component

* fix lint issues

* fix package

* fix

* cleanup

* Replace native checkbox with Checkbox Fluent UI component

* Fix typo in word 'reminder'

* Add basic Checkbox scenario and consistency fixes in other scenarios

* Add other accessibility relevant variants of Checkbox

* Add temporary version of RadioGroup scenario and replace native HTML elements with Fluent UI components in some other scenarios

* Replace native HTML checkbox elements with Fluent UI components

* Replace native HTML input with Fluent UI Input component

* Add disabled items variant for RadioGroup and some nit picking fixes in other scenarios

* Add disabled RadioGroup variant

* Replace tabindex values from 0 to -1

* Add Spinner, Switch and TabList components scenarios

* Add disabled tab for TabList scenario

* Add Notifications tab for TabList scenario

* Add Textarea scenarioand changes to TabList scenario

* Make checkboxes appear on a new line

* Make textareas appear on a new line

* Add vertical and overflow variants of TabList scenarios and small refactoring

* Fix broken page with scenarios

* Add Input with placeholder attribute

* Add disabled Input example and preparation for readonly Input

* Add lint ignore for long regex lines

* Make <input> readonly and small refactoring of security code generating function

* Proper setting of readOnly prpprop on Input component scenario

* Add validation for Textarea scenario, add more variants and fix Input validation behavior

* include accessibility scenario stories in the public docs

* fix imports

* fix imports

* chore: add index.stories.tsx

* Add FAQ accordion story

* Add first half of v9 accessibility scenarios

* Add remaining v9 accessibility scenarios

* Make Send button not disabledFocusable

* Make error message alerting more robust and remove 500ms setTimeout for first error field focus

* Make overflow button in TabList not selected

* Fix email validating birthDay instead

* Fix email validation and some code cleaning

* Fix first error field focus upon form submission problem

* Make Input and Textarea scenarios more like a real example

* Fix email validation when not required

* Fix Input and Textarea scenario form validation and text changes

* Fix invalid disabled textarea bug

* fix scenarios link, remove them from sidebar again

* Update apps/public-docsite-v9/.storybook/main.utils.js

Co-authored-by: Micah Godbolt <micahgodbolt@gmail.com>

* fix md file change

* temporarily add `as` to MenuItem usage

Co-authored-by: Peter Varholak <peter.varholak@gmail.com>
Co-authored-by: Juraj Kapsiar <jukapsia@microsoft.com>
Co-authored-by: Adam Samec <asamec@microsoft.com>
Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Co-authored-by: Juraj Kapsiar <jurokapsiar@gmail.com>
Co-authored-by: Micah Godbolt <micahgodbolt@gmail.com>
---
 .../.storybook/manager-head.html              |   2 +-
 ...-ee7b5914-40cd-4950-b46d-d75c94ad4037.json |   7 +
 .../.storybook/manager-head.html              |   2 +-
 .../Accordion.stories.tsx                     | 121 +++--
 .../AccordionFaq.stories.tsx                  |   7 +-
 .../AccessibilityScenarios/Button.stories.tsx |  54 +-
 .../Checkbox.stories.tsx                      |  98 ++++
 .../AccessibilityScenarios/Input.stories.tsx  | 492 +++++++++++-------
 .../AccessibilityScenarios/Link.stories.tsx   |   7 +-
 .../ListOfScenarios.stories.mdx               |  91 ++--
 .../AccessibilityScenarios/Menu.stories.tsx   |   7 +-
 .../MenuSplitGroup.stories.tsx                |   7 +-
 .../Popover.stories.tsx                       |  13 +-
 .../RadioGroup.stories.tsx                    |  77 +++
 .../AccessibilityScenarios/Slider.stories.tsx |   7 +-
 .../Spinner.stories.tsx                       |  13 +
 .../SplitButton.stories.tsx                   |  13 +-
 .../AccessibilityScenarios/Switch.stories.tsx |  38 ++
 .../TabListHorizontal.stories.tsx             |  99 ++++
 .../TabListOverflow.stories.tsx               | 223 ++++++++
 .../TabListVertical.stories.tsx               |  99 ++++
 .../Textarea.stories.tsx                      | 375 +++++++++++++
 .../ToggleButton.stories.tsx                  |   7 +-
 .../Tooltip.stories.tsx                       |   8 +-
 .../AccessibilityScenarios/index.stories.tsx  |  24 +
 .../src/AccessibilityScenarios/utils.tsx      |   5 +-
 26 files changed, 1530 insertions(+), 366 deletions(-)
 create mode 100644 change/@fluentui-react-components-ee7b5914-40cd-4950-b46d-d75c94ad4037.json
 create mode 100644 packages/react-components/react-components/src/AccessibilityScenarios/Checkbox.stories.tsx
 create mode 100644 packages/react-components/react-components/src/AccessibilityScenarios/RadioGroup.stories.tsx
 create mode 100644 packages/react-components/react-components/src/AccessibilityScenarios/Spinner.stories.tsx
 create mode 100644 packages/react-components/react-components/src/AccessibilityScenarios/Switch.stories.tsx
 create mode 100644 packages/react-components/react-components/src/AccessibilityScenarios/TabListHorizontal.stories.tsx
 create mode 100644 packages/react-components/react-components/src/AccessibilityScenarios/TabListOverflow.stories.tsx
 create mode 100644 packages/react-components/react-components/src/AccessibilityScenarios/TabListVertical.stories.tsx
 create mode 100644 packages/react-components/react-components/src/AccessibilityScenarios/Textarea.stories.tsx
 create mode 100644 packages/react-components/react-components/src/AccessibilityScenarios/index.stories.tsx

diff --git a/apps/public-docsite-v9/.storybook/manager-head.html b/apps/public-docsite-v9/.storybook/manager-head.html
index 166e67ed6e6e7..f831e114550a3 100644
--- a/apps/public-docsite-v9/.storybook/manager-head.html
+++ b/apps/public-docsite-v9/.storybook/manager-head.html
@@ -148,7 +148,7 @@
   Usign suggested temporary workaround until storybook gets proper support
   See https://github.com/microsoft/fluentui/blob/master/rfcs/convergence/authoring-stories.md#10-internal-stories-for-testing
   */
-  [id*='accessibility-scenario'] {
+  [id*='accessibility-stories'] {
     display: none !important;
   }
 </style>
diff --git a/change/@fluentui-react-components-ee7b5914-40cd-4950-b46d-d75c94ad4037.json b/change/@fluentui-react-components-ee7b5914-40cd-4950-b46d-d75c94ad4037.json
new file mode 100644
index 0000000000000..19e1c9cad68d6
--- /dev/null
+++ b/change/@fluentui-react-components-ee7b5914-40cd-4950-b46d-d75c94ad4037.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add uncomplete Input scenario",
+  "packageName": "@fluentui/react-components",
+  "email": "adam.samec@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-components/.storybook/manager-head.html b/packages/react-components/react-components/.storybook/manager-head.html
index e651c93463947..7197bdcba97cd 100644
--- a/packages/react-components/react-components/.storybook/manager-head.html
+++ b/packages/react-components/react-components/.storybook/manager-head.html
@@ -115,7 +115,7 @@
   Usign suggested temporary workaround until storybook gets proper support
   See https://github.com/microsoft/fluentui/blob/master/rfcs/convergence/authoring-stories.md#10-internal-stories-for-testing
   */
-  [id*='accessibility-scenario'] {
+  [id*='accessibility-stories'] {
     display: none !important;
   }
 </style>
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Accordion.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
index 912310877d17d..80ef90767eec4 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
@@ -8,68 +8,79 @@ import {
   Button,
   Input,
   Label,
+  Radio,
+  RadioGroup,
+  Checkbox,
 } from '@fluentui/react-components';
 
 import { Scenario } from './utils';
 
-export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
+export const PersonalFormAccordion = () => {
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isSubmitted) {
+      document.getElementById('formSubmittedText')?.focus();
+    }
+  }, [isSubmitted]);
+
+  const onSubmit = (event: React.BaseSyntheticEvent) => {
+    event.preventDefault();
+    setIsSubmitted(true);
+  };
+
   return (
     <Scenario pageTitle="Personal form accordion">
       <h1>Personal form</h1>
-      <form>
-        <Accordion defaultOpenItems="basicInfo">
-          <AccordionItem value="basicInfo">
-            <AccordionHeader as="h2">Basic information</AccordionHeader>
-            <AccordionPanel>
-              <Label htmlFor="name">Name:</Label>
-              <Input type="text" id="name" name="name" />
-              <Label htmlFor="email">Email:</Label>
-              <Input type="text" id="email" name="email" />
-              <fieldset>
-                <legend>Age</legend>
-                <input type="radio" id="ageClass1" name="age" value="ageClass1" />
-                <Label htmlFor="ageClass1">Below 18</Label>
-                <input type="radio" id="ageClass2" name="age" value="ageClass2" />
-                <Label htmlFor="ageClass2">Between 18 and 30</Label>
-                <input type="radio" id="ageClass3" name="age" value="ageClass3" />
-                <Label htmlFor="ageClass3">Over 30</Label>
-              </fieldset>
-            </AccordionPanel>
-          </AccordionItem>
-          <AccordionItem value="residence">
-            <AccordionHeader as="h2">Residence</AccordionHeader>
-            <AccordionPanel>
-              <Label htmlFor="street">Street:</Label>
-              <Input type="text" id="street" name="street" />
-              <Label htmlFor="city">City:</Label>
-              <Input type="text" id="city" name="city" />
-              <Label htmlFor="country">Country:</Label>
-              <Input type="text" id="country" name="country" />
-            </AccordionPanel>
-          </AccordionItem>
-          <AccordionItem value="hobbies">
-            <AccordionHeader as="h2">Hobbies</AccordionHeader>
-            <AccordionPanel>
-              <div role="group" aria-label="Hobbies">
-                <input type="checkbox" id="books" name="hobbies" value="books" />
-                <Label htmlFor="books">books</Label>
-                <input type="checkbox" id="sports" name="hobbies" value="sports" />
-                <Label htmlFor="sports">sports</Label>
-                <input type="checkbox" id="music" name="hobbies" value="music" />
-                <Label htmlFor="music">music</Label>
-                <input type="checkbox" id="travelling" name="hobbies" value="travelling" />
-                <Label htmlFor="travelling">travelling</Label>
-              </div>
-            </AccordionPanel>
-          </AccordionItem>
-        </Accordion>
-        <Button>Submit</Button>
-      </form>
+      {!isSubmitted ? (
+        <form onSubmit={onSubmit}>
+          <Accordion defaultOpenItems="basicInfo">
+            <AccordionItem value="basicInfo">
+              <AccordionHeader as="h2">Basic information</AccordionHeader>
+              <AccordionPanel>
+                <Label htmlFor="name">Name:</Label>
+                <Input type="text" id="name" name="name" />
+                <Label htmlFor="email">Email:</Label>
+                <Input type="email" id="email" name="email" />
+                <Label id="ageLabel">Your age:</Label>
+                <RadioGroup defaultValue="ageClass1" aria-labelledby="ageLabel">
+                  <Radio value="ageClass1" label="Under 16" />
+                  <Radio value="ageClass2" label="Between 16 and 50" />
+                  <Radio value="ageClass3" label="Over 50" />
+                </RadioGroup>
+              </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem value="residence">
+              <AccordionHeader as="h2">Residence</AccordionHeader>
+              <AccordionPanel>
+                <Label htmlFor="street">Street:</Label>
+                <Input type="text" id="street" name="street" />
+                <Label htmlFor="city">City:</Label>
+                <Input type="text" id="city" name="city" />
+                <Label htmlFor="country">Country:</Label>
+                <Input type="text" id="country" name="country" />
+              </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem value="hobbies">
+              <AccordionHeader as="h2">Hobbies</AccordionHeader>
+              <AccordionPanel>
+                <div role="group" aria-labelledby="hobbiesLabel">
+                  <Label id="hobbiesLabel">Please select your hobbies:</Label>
+                  <Checkbox label="Books" />
+                  <Checkbox label="Sports" />
+                  <Checkbox label="Music" />
+                  <Checkbox label="Travelling" />
+                </div>
+              </AccordionPanel>
+            </AccordionItem>
+          </Accordion>
+          <Button type="submit">Submit</Button>
+        </form>
+      ) : (
+        <p id="formSubmittedText" tabIndex={-1}>
+          The form would have been submitted.
+        </p>
+      )}
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios / Personal form accordion',
-  id: 'accordion-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/AccordionFaq.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/AccordionFaq.stories.tsx
index 4c1852f5f442f..5465b30064719 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/AccordionFaq.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/AccordionFaq.stories.tsx
@@ -4,7 +4,7 @@ import { Accordion, AccordionHeader, AccordionItem, AccordionPanel } from '@flue
 
 import { Scenario } from './utils';
 
-export const FAQAccordionAccessibilityScenario: React.FunctionComponent = () => {
+export const FAQAccordion: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="FAQ accordion">
       <h1>Frequently asked questions about Windows</h1>
@@ -53,8 +53,3 @@ export const FAQAccordionAccessibilityScenario: React.FunctionComponent = () =>
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios / FAQ accordion',
-  id: 'accordion-faq-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Button.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Button.stories.tsx
index b352a42397110..e0edc38debd7f 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Button.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Button.stories.tsx
@@ -4,8 +4,7 @@ import { Button } from '@fluentui/react-components';
 
 import { Scenario } from './utils';
 
-export const MessengerButtonsAccessibilityScenario: React.FunctionComponent = () => {
-  const [sendButtonDisabled, setSendButtonDisabled] = React.useState<boolean | undefined>(true);
+export const MessengerButtons: React.FunctionComponent = () => {
   const [deleteButtonDisabled, setDeleteButtonDisabled] = React.useState<boolean | undefined>(true);
   const [increaseFontButtonDisabled, setIncreaseFontButtonDisabled] = React.useState<boolean | undefined>(undefined);
   const [decreaseFontButtonDisabled, setDecreaseFontButtonDisabled] = React.useState<boolean | undefined>(true);
@@ -23,13 +22,16 @@ export const MessengerButtonsAccessibilityScenario: React.FunctionComponent = ()
 
   const resetMessage = () => {
     setMessage('');
-    setSendButtonDisabled(true);
     setDeleteButtonDisabled(true);
   };
 
   const onSendButtonClick = () => {
+    if (message.length > 0) {
+      setStatusText('Message has been sent.');
+    } else {
+      setStatusText('Please type a message.');
+    }
     resetMessage();
-    setStatusText('Message has been sent.');
   };
   const onDeleteButtonClick = () => {
     resetMessage();
@@ -59,11 +61,9 @@ export const MessengerButtonsAccessibilityScenario: React.FunctionComponent = ()
   const onMessageTextareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = event.target.value;
     if (value.length > 0) {
-      setSendButtonDisabled(undefined);
       setDeleteButtonDisabled(undefined);
       setStatusText('');
     } else {
-      setSendButtonDisabled(true);
       setDeleteButtonDisabled(true);
     }
     setMessage(value);
@@ -71,38 +71,28 @@ export const MessengerButtonsAccessibilityScenario: React.FunctionComponent = ()
 
   return (
     <Scenario pageTitle="Messenger buttons">
-      <Button disabledFocusable={sendButtonDisabled} onClick={onSendButtonClick}>
-        Send
-      </Button>
-      <Button disabledFocusable={deleteButtonDisabled} onClick={onDeleteButtonClick}>
-        Delete
-      </Button>
       <Button ref={increaseFontButtonRef} disabled={increaseFontButtonDisabled} onClick={onIncreaseFontButtonClick}>
         Increase font size
       </Button>
       <Button ref={decreaseFontButtonRef} disabled={decreaseFontButtonDisabled} onClick={onDecreaseFontButtonClick}>
         Decrease font size
       </Button>
-      <div>
-        <textarea
-          name="message"
-          rows={3}
-          cols={50}
-          placeholder="Enter message here...."
-          aria-label="Message"
-          onChange={onMessageTextareaChange}
-          value={message}
-          style={messageStyle}
-        />
-      </div>
-      <p>
-        <span aria-live="polite">{statusText}</span>
-      </p>
+      <textarea
+        name="message"
+        rows={3}
+        cols={50}
+        placeholder="Enter message here...."
+        aria-label="Message"
+        onChange={onMessageTextareaChange}
+        value={message}
+        style={messageStyle}
+      />
+      <Button onClick={onSendButtonClick}>Send</Button>
+      <Button disabledFocusable={deleteButtonDisabled} onClick={onDeleteButtonClick}>
+        Delete
+      </Button>
+
+      <p aria-live="polite">{statusText}</p>
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios / Messenger buttons',
-  id: 'button-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Checkbox.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Checkbox.stories.tsx
new file mode 100644
index 0000000000000..7bfcf4ef4bc2c
--- /dev/null
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Checkbox.stories.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+
+import { Button, Checkbox, CheckboxOnChangeData, Label } from '@fluentui/react-components';
+
+import { Scenario } from './utils';
+
+export const QuestionnaireAboutFoodCheckboxes: React.FunctionComponent = () => {
+  const [isAppleSelected, setIsAppleSelected] = React.useState(false);
+  const [isBananaSelected, setIsBananaSelected] = React.useState(false);
+  const [isOrangeSelected, setIsOrangeSelected] = React.useState(false);
+  const [isSpecialDietSelected, setIsSpecialDietSelected] = React.useState(false);
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  const getSpecialDietDisabled = () => {
+    return isSpecialDietSelected ? false : true;
+  };
+
+  React.useEffect(() => {
+    if (isSubmitted) {
+      document.getElementById('formSubmittedText')?.focus();
+    }
+  }, [isSubmitted]);
+
+  const onSubmit = (event: React.BaseSyntheticEvent) => {
+    event.preventDefault();
+    setIsSubmitted(true);
+  };
+
+  return (
+    <Scenario pageTitle="Checkboxes in questionnaire about food">
+      <h1>Questionnaire about food</h1>
+      {!isSubmitted ? (
+        <form onSubmit={onSubmit}>
+          <div role="group" aria-labelledby="foodLabel">
+            <Label id="foodLabel">Select food that you like:</Label>
+
+            <Checkbox
+              checked={
+                isAppleSelected && isBananaSelected && isOrangeSelected
+                  ? true
+                  : !(isAppleSelected || isBananaSelected || isOrangeSelected)
+                  ? false
+                  : 'mixed'
+              }
+              onChange={(event: React.ChangeEvent, data: CheckboxOnChangeData) => {
+                setIsAppleSelected(!!data.checked);
+                setIsBananaSelected(!!data.checked);
+                setIsOrangeSelected(!!data.checked);
+              }}
+              label="All fruits"
+            />
+            <Checkbox
+              checked={isAppleSelected}
+              onChange={() => setIsAppleSelected(checked => !checked)}
+              label="Apple"
+            />
+            <Checkbox
+              checked={isBananaSelected}
+              onChange={() => setIsBananaSelected(checked => !checked)}
+              label="Banana"
+            />
+            <Checkbox
+              checked={isOrangeSelected}
+              onChange={() => setIsOrangeSelected(checked => !checked)}
+              label="Orange"
+            />
+          </div>
+
+          <Checkbox
+            checked={isSpecialDietSelected}
+            onChange={() => setIsSpecialDietSelected(checked => !checked)}
+            label="I am on special diet"
+          />
+
+          <div role="group" aria-labelledby="cannotEatLabel">
+            <Label id="cannotEatLabel">I cannot eat the following:</Label>
+            <Checkbox disabled={getSpecialDietDisabled()} label="Sugar" />
+            <Checkbox disabled={getSpecialDietDisabled()} label="Meat" />
+            <Checkbox disabled={getSpecialDietDisabled()} label="Dairy products" />
+          </div>
+          <Checkbox
+            required
+            label={
+              <>
+                I accept the <a href="#">terms and conditions</a>.
+              </>
+            }
+          />
+          <Button type="submit">Submit</Button>
+        </form>
+      ) : (
+        <p id="formSubmittedText" tabIndex={-1}>
+          The form would have been submitted.
+        </p>
+      )}
+    </Scenario>
+  );
+};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Input.stories.tsx
index 93d83cda65277..41ab79a42ff1b 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Button, Input, Label } from '@fluentui/react-components';
+import { Button, Checkbox, Input, Label } from '@fluentui/react-components';
 
 import { Scenario } from './utils';
 
@@ -16,12 +16,34 @@ const regexes = {
   hasLowercaseLetter: /^\S*[a-z]\S*$/,
   hasUppercaseLetter: /^\S*[A-Z]\S*$/,
   hasSpecialChar: /^\S*[^0-9a-zA-ZÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ\s]\S*$/,
+  validDate: /^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{4}$/,
+  // eslint-disable-next-line @fluentui/max-len
+  validEmail: /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
+};
+
+const generateTicketNumber = (): string => {
+  let char;
+  let hash = 0;
+  const random = Math.random().toString();
+  for (let i = 0; i < random.length; i++) {
+    char = random.charCodeAt(i);
+    //eslint-disable-next-line no-bitwise
+    hash = (hash << 5) - hash + char;
+    //eslint-disable-next-line no-bitwise
+    hash |= 0; // Convert to 32bit integer
+  }
+  hash += 2147483647; // Convert to positive integer
+  return hash.toString().padStart(8, '0').substring(2);
 };
 
+let isSubmitting = false;
+
 interface FormInputs {
   fullName: string;
   nickname: string;
   password: string;
+  birthDate: string;
+  email: string;
 }
 
 interface FormValidation {
@@ -46,9 +68,17 @@ const ValidationMessage: React.FC<ValidationMessageProps> = ({ id, formValidatio
     return () => formValidation.unsubscribe(id, alert);
   }, [formValidation, alert, id]);
   return (
-    <div role={isAlerting ? 'alert' : undefined} style={{ color: isAlerting ? 'red' : 'green' }} id={`${id}Errors`}>
-      {children}
-    </div>
+    <>
+      {isAlerting ? (
+        <div role="alert" style={{ color: 'red' }} id={`${id}Errors`}>
+          {children}
+        </div>
+      ) : (
+        <div style={{ color: 'green' }} id={`${id}Errors`}>
+          {children}
+        </div>
+      )}
+    </>
   );
 };
 
@@ -56,29 +86,29 @@ const useFormValidation = (
   handleSubmit: (callback: OnSubmit<FormInputs>) => (e?: React.BaseSyntheticEvent) => Promise<void>,
 ) => {
   const pubSub = usePubSub();
-  const isSubmitting = React.useRef(false);
+  const isHandlingSubmit = React.useRef(false);
 
   const wrappedHandleSubmit = React.useCallback(
     (callback: OnSubmit<FormInputs>) => {
       const handler = handleSubmit(callback);
       return async (e: React.BaseSyntheticEvent) => {
-        isSubmitting.current = true;
+        isHandlingSubmit.current = true;
         const result = await handler(e);
-        isSubmitting.current = false;
+        isHandlingSubmit.current = false;
         return result;
       };
     },
-    [isSubmitting, handleSubmit],
+    [isHandlingSubmit, handleSubmit],
   );
 
   const onFieldValidated = React.useCallback(
     (field: string) => {
-      if (!isSubmitting.current) {
+      if (!isHandlingSubmit.current) {
         pubSub.publish(field, 'validate');
       }
       return true;
     },
-    [isSubmitting, pubSub],
+    [isHandlingSubmit, pubSub],
   );
 
   const notifyFormFieldError = React.useCallback(
@@ -98,8 +128,8 @@ const useFormValidation = (
   };
 };
 
-const RegistrationFormInputsAccessibility = () => {
-  const { control, handleSubmit, errors, formState } = useForm<FormInputs>({
+const TicketOrderFormInputsAccessibility = () => {
+  const { control, handleSubmit, errors, formState, unregister } = useForm<FormInputs>({
     validateCriteriaMode: 'all',
     mode: 'onBlur',
     reValidateMode: 'onBlur',
@@ -108,20 +138,26 @@ const RegistrationFormInputsAccessibility = () => {
   const formValidation = useFormValidation(handleSubmit);
 
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
+  const [isSendNewsletter, setIsSendNewsletter] = React.useState(false);
   const [isSubmittedAndValid, setIsSubmittedAndValid] = React.useState(false);
 
   React.useEffect(() => {
-    // If the form is submitted and has errors, focus the first error fiel, otherwise do nothing
-    if (!formState.isSubmitting || formState.isValid) {
+    if (formState.isSubmitting) {
+      isSubmitting = true;
+    }
+  }, [formState]);
+
+  React.useEffect(() => {
+    // If the form is submitting and has errors, focus the first error fiel, otherwise do nothing
+    if (!isSubmitting || !formState.isSubmitted || formState.isValid) {
       return;
     }
+    isSubmitting = false;
+
     const firstErrorName = Object.keys(errors)[0] as keyof FormInputs;
     const firstErrorField = document.getElementById(firstErrorName);
-
-    setTimeout(() => formValidation.notifyFormFieldError(firstErrorName), 200);
-
     if (firstErrorField) {
-      firstErrorField.focus();
+      setTimeout(() => firstErrorField.focus(), 500);
     }
   }, [errors, formState, formValidation]);
 
@@ -142,173 +178,266 @@ const RegistrationFormInputsAccessibility = () => {
     setIsPasswordVisible(!isPasswordVisible);
   };
 
+  const onSendNewsletterChange = (event: React.ChangeEvent) => {
+    unregister('email');
+    setIsSendNewsletter(!isSendNewsletter);
+  };
+
   return (
-    <Scenario pageTitle="Registration form inputs">
-      <h2>Registration form</h2>
+    <Scenario pageTitle="Ticket order form inputs">
+      <h1>Ticket order form</h1>
       {!isSubmittedAndValid ? (
-        <form onSubmit={formValidation.handleSubmit(onSubmit)}>
-          <Label htmlFor="fullName">Full name:</Label>
-          <Controller
-            name="fullName"
-            control={control}
-            as={
-              <Input
-                type="text"
-                id="fullName"
-                name="fullName"
-                aria-required="true"
-                aria-invalid={!!errors.fullName}
-                aria-describedby="fullNameErrors"
-              />
-            }
-            rules={{
-              required: true,
-              minLength: 2,
-              maxLength: 50,
-              validate: {
-                onlyNameChars: value => regexes.onlyNameChars.test(value),
-                startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
-                always: () => {
-                  if (!formState.isSubmitting) {
-                    formValidation.onFieldValidated('fullName');
-                  }
-                  return true;
+        <>
+          <p>Please fill the following form to order your ticket.</p>
+          <form onSubmit={formValidation.handleSubmit(onSubmit)}>
+            <Label htmlFor="ticketNumber">Your ticket number:</Label>
+            <Input
+              type="text"
+              id="ticketNumber"
+              value={generateTicketNumber()}
+              readOnly
+              aria-describedby="ticketNumberHint"
+            />
+            <p id="ticketNumberHint">Please remember the ticket number. You will need it for identification.</p>
+
+            <Label htmlFor="fullName">Full name:</Label>
+            <Controller
+              name="fullName"
+              control={control}
+              as={
+                <Input
+                  type="text"
+                  id="fullName"
+                  aria-required="true"
+                  aria-invalid={!!errors.fullName}
+                  aria-describedby="fullNameErrors"
+                />
+              }
+              rules={{
+                required: true,
+                minLength: 2,
+                maxLength: 50,
+                validate: {
+                  onlyNameChars: value => regexes.onlyNameChars.test(value),
+                  startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
+                  always: () => {
+                    if (!formState.isSubmitting) {
+                      formValidation.onFieldValidated('fullName');
+                    }
+                    return true;
+                  },
                 },
-              },
-            }}
-          />
-          {errors.fullName?.types && (
-            <ValidationMessage id="fullName" formValidation={formValidation}>
-              {'required' in errors.fullName.types ? (
-                <p>Full name is required.</p>
-              ) : (
-                <>
-                  <p>Full name is invalid. It must:</p>
-                  <ul>
-                    {('minLength' in errors.fullName.types || 'maxLength' in errors.fullName.types) && (
-                      <li>Have between 2 and 50 characters.</li>
-                    )}
-                    {'onlyNameChars' in errors.fullName.types && (
-                      <li>Contain only lowercase or uppercase letters, spaces or hyphens.</li>
-                    )}
-                    {'startsAndEndsWithLetter' in errors.fullName.types && <li>Start and end wit letter.</li>}
-                  </ul>
-                </>
-              )}
-            </ValidationMessage>
-          )}
-
-          <Label htmlFor="nickname">Nickname:</Label>
-          <Controller
-            name="nickname"
-            control={control}
-            as={
-              <Input
-                type="text"
-                id="nickname"
-                name="nickname"
-                aria-invalid={!!errors.nickname}
-                aria-describedby="nicknameErrors"
-              />
-            }
-            rules={{
-              minLength: 2,
-              maxLength: 20,
-              validate: {
-                onlyNameChars: value => regexes.onlyNameChars.test(value),
-                startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
-                always: () => {
-                  if (!formState.isSubmitting) {
-                    formValidation.onFieldValidated('nickname');
-                  }
-                  return true;
+              }}
+            />
+            {errors.fullName?.types && (
+              <ValidationMessage id="fullName" formValidation={formValidation}>
+                {'required' in errors.fullName.types ? (
+                  <p>Full name is required.</p>
+                ) : (
+                  <>
+                    <p>Full name is invalid. It must:</p>
+                    <ul>
+                      {('minLength' in errors.fullName.types || 'maxLength' in errors.fullName.types) && (
+                        <li>Have between 2 and 50 characters.</li>
+                      )}
+                      {'onlyNameChars' in errors.fullName.types && (
+                        <li>Contain only lowercase or uppercase letters, spaces or hyphens.</li>
+                      )}
+                      {'startsAndEndsWithLetter' in errors.fullName.types && <li>Start and end wit letter.</li>}
+                    </ul>
+                  </>
+                )}
+              </ValidationMessage>
+            )}
+
+            <Label htmlFor="nickname">Nickname:</Label>
+            <Controller
+              name="nickname"
+              control={control}
+              as={
+                <Input type="text" id="nickname" aria-invalid={!!errors.nickname} aria-describedby="nicknameErrors" />
+              }
+              rules={{
+                minLength: 2,
+                maxLength: 20,
+                validate: {
+                  onlyNameChars: value => regexes.onlyNameChars.test(value),
+                  startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
+                  always: () => {
+                    if (!formState.isSubmitting) {
+                      formValidation.onFieldValidated('nickname');
+                    }
+                    return true;
+                  },
+                },
+              }}
+            />
+            {errors.nickname?.types && (
+              <ValidationMessage id="nickname" formValidation={formValidation}>
+                <p>Nickname is invalid. It must:</p>
+                <ul>
+                  {('minLength' in errors.nickname.types || 'maxLength' in errors.nickname.types) && (
+                    <li>Have between 2 and 20 characters.</li>
+                  )}
+                  {'onlyNameChars' in errors.nickname.types && (
+                    <li>Contain only lowercase or uppercase letters, spaces or hyphens.</li>
+                  )}
+                  {'startsAndEndsWithLetter' in errors.nickname.types && <li>Start and end wit letter.</li>}
+                </ul>
+              </ValidationMessage>
+            )}
+
+            <Label htmlFor="password">Password:</Label>
+            <Controller
+              name="password"
+              control={control}
+              as={
+                <Input
+                  type={isPasswordVisible ? 'text' : 'password'}
+                  id="password"
+                  aria-required="true"
+                  aria-invalid={!!errors.password}
+                  aria-describedby="passwordErrors"
+                />
+              }
+              rules={{
+                required: true,
+                minLength: 8,
+                maxLength: 20,
+                validate: {
+                  hasLowercaseLetter: value => regexes.hasLowercaseLetter.test(value),
+                  hasUppercaseLetter: value => regexes.hasUppercaseLetter.test(value),
+                  hasNumber: value => regexes.hasNumber.test(value),
+                  hasSpecialChar: value => regexes.hasSpecialChar.test(value),
+                  noWhitespace: value => regexes.noWhitespace.test(value),
+                  always: () => {
+                    if (!formState.isSubmitting) {
+                      formValidation.onFieldValidated('password');
+                    }
+                    return true;
+                  },
                 },
-              },
-            }}
-          />
-          {errors.nickname?.types && (
-            <ValidationMessage id="nickname" formValidation={formValidation}>
-              <p>Nickname is invalid. It must:</p>
-              <ul>
-                {('minLength' in errors.nickname.types || 'maxLength' in errors.nickname.types) && (
-                  <li>Have between 2 and 20 characters.</li>
+              }}
+            />
+
+            <Checkbox label="Show password" onChange={onShowPasswordChange} />
+
+            {errors.password?.types && (
+              <ValidationMessage id="password" formValidation={formValidation}>
+                {'required' in errors.password.types ? (
+                  <p>Password is required.</p>
+                ) : (
+                  <>
+                    <p>Password is invalid. It must:</p>
+                    <ul>
+                      {('minLength' in errors.password.types || 'maxLength' in errors.password.types) && (
+                        <li>Have between 8 and 20 characters.</li>
+                      )}
+                      {('hasLowercaseLetter' in errors.password.types ||
+                        'hasUppercaseLetter' in errors.password.types ||
+                        'hasSpecialChar' in errors.password.types ||
+                        'hasNumber' in errors.password.types ||
+                        'noWhiteSpace' in errors.password.types) && (
+                        <li>
+                          Contain at least one lower case letter, upper case letter, number, special character and no
+                          spaces.
+                        </li>
+                      )}
+                    </ul>
+                  </>
                 )}
-                {'onlyNameChars' in errors.nickname.types && (
-                  <li>Contain only lowercase or uppercase letters, spaces or hyphens.</li>
+              </ValidationMessage>
+            )}
+
+            <Label htmlFor="birthDate">Birth date:</Label>
+            <Controller
+              name="birthDate"
+              control={control}
+              as={
+                <Input
+                  type="text"
+                  id="birthDate"
+                  placeholder="E.g. 3/21/1995"
+                  aria-required="true"
+                  aria-invalid={!!errors.birthDate}
+                  aria-describedby="birthDateErrors"
+                />
+              }
+              rules={{
+                required: true,
+                validate: {
+                  validDate: value => regexes.validDate.test(value),
+                  always: () => {
+                    if (!formState.isSubmitting) {
+                      formValidation.onFieldValidated('birthDate');
+                    }
+                    return true;
+                  },
+                },
+              }}
+            />
+            {errors.birthDate?.types && (
+              <ValidationMessage id="birthDate" formValidation={formValidation}>
+                {'required' in errors.birthDate.types ? (
+                  <p>Birth date is required.</p>
+                ) : (
+                  <>
+                    <p>Birth date is invalid. It must:</p>
+                    <ul>{'validDate' in errors.birthDate.types && <li>Be in the MM/DD/YYYY format.</li>}</ul>
+                  </>
                 )}
-                {'startsAndEndsWithLetter' in errors.nickname.types && <li>Start and end wit letter.</li>}
-              </ul>
-            </ValidationMessage>
-          )}
-
-          <Label htmlFor="password">Password:</Label>
-          <Controller
-            name="password"
-            control={control}
-            as={
-              <Input
-                type={isPasswordVisible ? 'text' : 'password'}
-                id="password"
-                name="password"
-                aria-required="true"
-                aria-invalid={!!errors.password}
-                aria-describedby="passwordErrors"
-              />
-            }
-            rules={{
-              required: true,
-              minLength: 8,
-              maxLength: 20,
-              validate: {
-                hasLowercaseLetter: value => regexes.hasLowercaseLetter.test(value),
-                hasUppercaseLetter: value => regexes.hasUppercaseLetter.test(value),
-                hasNumber: value => regexes.hasNumber.test(value),
-                hasSpecialChar: value => regexes.hasSpecialChar.test(value),
-                noWhitespace: value => regexes.noWhitespace.test(value),
-                always: () => {
-                  if (!formState.isSubmitting) {
-                    formValidation.onFieldValidated('password');
-                  }
-                  return true;
+              </ValidationMessage>
+            )}
+
+            <Checkbox label="Send me newsletter" onChange={onSendNewsletterChange} />
+
+            <Label htmlFor="email">E-mail:</Label>
+            <Controller
+              name="email"
+              control={control}
+              as={
+                <Input
+                  type="text"
+                  id="email"
+                  disabled={!isSendNewsletter}
+                  aria-required={isSendNewsletter}
+                  aria-invalid={!!errors.email}
+                  aria-describedby="emailErrors"
+                />
+              }
+              rules={{
+                required: isSendNewsletter,
+                validate: {
+                  validEmail: value => !isSendNewsletter || regexes.validEmail.test(value),
+                  always: () => {
+                    if (!formState.isSubmitting) {
+                      formValidation.onFieldValidated('email');
+                    }
+                    return true;
+                  },
                 },
-              },
-            }}
-          />
-
-          <Label htmlFor="showPassword">Show password</Label>
-          <input type="checkbox" id="showPassword" name="showPassword" onChange={onShowPasswordChange} />
-
-          {errors.password?.types && (
-            <ValidationMessage id="password" formValidation={formValidation}>
-              {'required' in errors.password.types ? (
-                <p>Password is required.</p>
-              ) : (
-                <>
-                  <p>Password is invalid. It must:</p>
-                  <ul>
-                    {('minLength' in errors.password.types || 'maxLength' in errors.password.types) && (
-                      <li>Have between 8 and 20 characters.</li>
-                    )}
-                    {('hasLowercaseLetter' in errors.password.types ||
-                      'hasUppercaseLetter' in errors.password.types ||
-                      'hasSpecialChar' in errors.password.types ||
-                      'hasNumber' in errors.password.types ||
-                      'noWhiteSpace' in errors.password.types) && (
-                      <li>
-                        Contain at least one lower case letter, upper case letter, number, special character and no
-                        spaces.
-                      </li>
-                    )}
-                  </ul>
-                </>
-              )}
-            </ValidationMessage>
-          )}
-
-          <Button type="submit">Register</Button>
-        </form>
+              }}
+            />
+            {errors.email?.types && (
+              <ValidationMessage id="email" formValidation={formValidation}>
+                {'required' in errors.email.types ? (
+                  <p>E-mail is required.</p>
+                ) : (
+                  <>
+                    <p>E-mail is invalid. It must:</p>
+                    <ul>
+                      {'validEmail' in errors.email.types && <li>Be a valid e-mail address, like name@example.com.</li>}
+                    </ul>
+                  </>
+                )}
+              </ValidationMessage>
+            )}
+
+            <Button type="submit">Order ticket</Button>
+          </form>
+        </>
       ) : (
-        <p id="validMessage" role="alert" tabIndex={0}>
+        <p id="validMessage" role="alert" tabIndex={-1}>
           The form is valid and would have been submitted.
         </p>
       )}
@@ -316,13 +445,8 @@ const RegistrationFormInputsAccessibility = () => {
   );
 };
 
-export const RegistrationFormInputsAccessibilityScenario = () => (
+export const TicketOrderFormInputs = () => (
   <PubSubProvider>
-    <RegistrationFormInputsAccessibility />
+    <TicketOrderFormInputsAccessibility />
   </PubSubProvider>
 );
-
-export default {
-  title: 'Accessibility Scenarios/ Registration form inputs',
-  id: 'input-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Link.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Link.stories.tsx
index 90abf8533a38f..a98ade2a6b058 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Link.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Link.stories.tsx
@@ -4,7 +4,7 @@ import { Link } from '@fluentui/react-components';
 
 import { Scenario } from './utils';
 
-export const SiteNavigationAccessibilityScenario: React.FunctionComponent = () => {
+export const SiteNavigationLinks: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="Site navigation links">
       <nav aria-label="Main menu">
@@ -44,8 +44,3 @@ export const SiteNavigationAccessibilityScenario: React.FunctionComponent = () =
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios/ Site navigation links',
-  id: 'link-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index 0d751da9efcef..e71f4feed0426 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -1,7 +1,8 @@
 import { Meta } from '@storybook/addon-docs';
 import { FullscreenLink } from './utils';
+export const parentPath = 'concepts-developer-accessibility-stories';
 
-<Meta title="Accessibility Scenarios/ List of Scenarios " />
+<Meta title="Concepts/Developer/Accessibility/Stories/List of scenarios" />
 
 # Accessibility Scenarios
 
@@ -9,66 +10,92 @@ Accessibility scenarios are used to validate accessibility of components and dem
 
 ## Component: Accordion
 
-- <FullscreenLink content="Accordion / Personal form" parent="accordion-accessibility-scenario" story="personal-form" />
-- <FullscreenLink content="Accordion / FAQ" parent="accordion-faq-accessibility-scenario" story="faq" />
+- <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="button-accessibility-scenario" story="messenger-buttons" />
+- <FullscreenLink content="Button / Messenger" parent={parentPath} story="messenger-buttons" />
 
-## Component: Input
+## Component: Checkbox
 
 - <FullscreenLink
-    content="Input / Registration form"
-    parent="input-accessibility-scenario"
-    story="registration-form-inputs"
+    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" />
+
 ## Component: Link
 
-- <FullscreenLink content="Link / Site navigation" parent="link-accessibility-scenario" story="site-navigation" />
+- <FullscreenLink content="Link / Site navigation" parent={parentPath} story="site-navigation-links" />
 
 ## Component: Menu
 
-- <FullscreenLink content="Menu / Profile menu" parent="menu-accessibility-scenario" story="profile-menu" />
-- <FullscreenLink
-    content="Menu / Menu with split item"
-    parent="menu-splitgroup-accessibility-scenario"
-    story="menu-with-split-item"
-  />
+- <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="popover-accessibility-scenario" story="add-people" />
+- <FullscreenLink content="Popover / Add people" parent={parentPath} story="add-people-popover" />
 
-## Component: Slider
+## Component: RadioGroup
 
 - <FullscreenLink
-    content="Slider / Sound control"
-    parent="slider-accessibility-scenario"
-    story="sound-control-sliders"
+    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="SplitButton / Event remindar"
-    parent="split-button-accessibility-scenario"
-    story="event-reminder"
+    content="TabList / Mail settings with overflow tablist"
+    parent={parentPath}
+    story="mail-settings-overflow-tab-list"
   />
 
-## Component: ToggleButton
+## Component: Textarea
 
 - <FullscreenLink
-    content="ToggleButton / Device controls"
-    parent="toggle-button-accessibility-scenario"
-    story="device-controls"
+    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="tooltip-accessibility-scenario"
-    story="buttons-with-tooltip"
-  />
+- <FullscreenLink content="Tooltip / Buttons with tooltip" parent={parentPath} story="buttons-with-tooltip" />
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Menu.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Menu.stories.tsx
index d20ef6fbe25ba..8bc5693d0d3d8 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Menu.stories.tsx
@@ -58,7 +58,7 @@ type OnCheckedValueChangeCallback = (
 
 type ProfileMenuStatus = { status: Array<'online' | 'away' | 'offline'> };
 
-export const ProfileMenuAccessibilityScenario: React.FunctionComponent = () => {
+export const ProfileMenu: React.FunctionComponent = () => {
   const [statusCheckedValues, setStatusCheckedValues] = React.useState<ProfileMenuStatus>({ status: ['online'] });
   const onStatusChange = (
     event: React.MouseEvent | React.KeyboardEvent,
@@ -100,8 +100,3 @@ export const ProfileMenuAccessibilityScenario: React.FunctionComponent = () => {
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios / Profile menu',
-  id: 'menu-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/MenuSplitGroup.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/MenuSplitGroup.stories.tsx
index 4537965598734..6977518d14380 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/MenuSplitGroup.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/MenuSplitGroup.stories.tsx
@@ -12,7 +12,7 @@ import {
 
 import { Scenario } from './utils';
 
-export const MenuWithSplitItemAccessibilityScenario: React.FunctionComponent = () => {
+export const MenuWithSplitItem: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="Menu with split item">
       <Menu>
@@ -46,8 +46,3 @@ export const MenuWithSplitItemAccessibilityScenario: React.FunctionComponent = (
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios / Menu with split item',
-  id: 'menu-splitgroup-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Popover.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Popover.stories.tsx
index 8ad9be077468f..6061974fe2378 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Popover.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Popover.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Button, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
+import { Button, Input, Label, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
 
 import { Scenario } from './utils';
 
@@ -13,8 +13,8 @@ const AddPeopleContent: React.FunctionComponent<AddPeopleContentProps> = (props:
 
   return (
     <>
-      <label htmlFor="addPeopleInput">Enter name, email or tag</label>
-      <input type="text" name="addPeopleInput" id="addPeopleInput" />
+      <Label htmlFor="addPeopleInput">Enter name, email or tag</Label>
+      <Input type="text" name="addPeopleInput" id="addPeopleInput" />
       <Button
         onClick={() => {
           setPopoverOpened(false);
@@ -26,7 +26,7 @@ const AddPeopleContent: React.FunctionComponent<AddPeopleContentProps> = (props:
   );
 };
 
-export const AddPeoplePopoverAccessibilityScenario: React.FunctionComponent = () => {
+export const AddPeoplePopover: React.FunctionComponent = () => {
   const [popoverOpened, setPopoverOpened] = React.useState(false);
 
   return (
@@ -49,8 +49,3 @@ export const AddPeoplePopoverAccessibilityScenario: React.FunctionComponent = ()
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios / Add people popover',
-  id: 'popover-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/RadioGroup.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/RadioGroup.stories.tsx
new file mode 100644
index 0000000000000..b9ead47e57141
--- /dev/null
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/RadioGroup.stories.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+
+import { Button, Label, RadioGroup, Radio, RadioGroupOnChangeData } from '@fluentui/react-components';
+
+import { Scenario } from './utils';
+
+export const QuestionnaireAboutTransportationRadios: React.FunctionComponent = () => {
+  const [isDrivingAllowed, setIsDrivingAllowed] = React.useState(true);
+  const [isMotor, setIsMotor] = React.useState(false);
+  const [preferredMeans, setPreferredMeans] = React.useState('bicycle');
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  const onAgeChange = (event: React.BaseSyntheticEvent, data: RadioGroupOnChangeData) => {
+    if (data.value === 'ageClass1') {
+      setIsDrivingAllowed(false);
+      if (['car', 'motorbike'].includes(preferredMeans)) {
+        setPreferredMeans('bicycle');
+      }
+    } else {
+      setIsDrivingAllowed(true);
+    }
+  };
+
+  const onPreferredMeansChange = (event: React.BaseSyntheticEvent, data: RadioGroupOnChangeData) => {
+    setPreferredMeans(data.value);
+    setIsMotor(['car', 'motorbike'].includes(data.value));
+  };
+
+  React.useEffect(() => {
+    if (isSubmitted) {
+      document.getElementById('formSubmittedText')?.focus();
+    }
+  }, [isSubmitted]);
+
+  const onSubmit = (event: React.BaseSyntheticEvent) => {
+    event.preventDefault();
+    setIsSubmitted(true);
+  };
+
+  return (
+    <Scenario pageTitle="Radio groups in questionnaire about transportation">
+      <h1>Questionnaire about transportation</h1>
+      {!isSubmitted ? (
+        <form onSubmit={onSubmit}>
+          <Label id="ageLabel">Your age:</Label>
+          <RadioGroup defaultValue="ageClass2" onChange={onAgeChange} aria-labelledby="ageLabel">
+            <Radio value="ageClass1" label="Under 16" />
+            <Radio value="ageClass2" label="Between 16 and 50" />
+            <Radio value="ageClass3" label="Over 50" />
+          </RadioGroup>
+
+          <Label id="preferredMeansLabel">The most preferred transportation means as a driver/rider:</Label>
+          <RadioGroup value={preferredMeans} onChange={onPreferredMeansChange} aria-labelledby="preferredMeansLabel">
+            <Radio value="bicycle" label="Bicycle" />
+            <Radio value="scooter" label="Scooter" />
+            <Radio value="rollerSkates" label="Roller-skates" />
+            <Radio value="car" disabled={!isDrivingAllowed} label="Car" />
+            <Radio value="motorbike" disabled={!isDrivingAllowed} label="Motorbike" />
+          </RadioGroup>
+
+          <Label id="preferredTypeLabel">The most preferred type of motor vehicle:</Label>
+          <RadioGroup defaultValue="gasoline" disabled={!isMotor} aria-labelledby="preferredTypeLabel">
+            <Radio value="gasoline" label="Gasoline" />
+            <Radio value="diesel" label="Diesel" />
+            <Radio value="electric" label="Electric" />
+          </RadioGroup>
+
+          <Button type="submit">Submit</Button>
+        </form>
+      ) : (
+        <p id="formSubmittedText" tabIndex={-1}>
+          The form would have been submitted.
+        </p>
+      )}
+    </Scenario>
+  );
+};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Slider.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Slider.stories.tsx
index ea61ec503a679..efc2883d91249 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Slider.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Slider.stories.tsx
@@ -4,7 +4,7 @@ import { Label, Slider } from '@fluentui/react-components';
 
 import { Scenario } from './utils';
 
-export const SoundControlSlidersAccessibilityScenario: React.FunctionComponent = () => {
+export const SoundControlSliders: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="Sound control sliders">
       <h1>Sound control panel</h1>
@@ -20,8 +20,3 @@ export const SoundControlSlidersAccessibilityScenario: React.FunctionComponent =
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios/ Sound control sliders',
-  id: 'slider-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Spinner.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Spinner.stories.tsx
new file mode 100644
index 0000000000000..e6bf8c3e76ed1
--- /dev/null
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Spinner.stories.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { Spinner } from '@fluentui/react-components';
+
+import { Scenario } from './utils';
+
+export const PostsLoadingSpinner: React.FunctionComponent = () => {
+  return (
+    <Scenario pageTitle="Posts loading spinner">
+      <Spinner label="Loading posts..." />
+    </Scenario>
+  );
+};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
index 58a1f8f0b13f2..3cd6bdbb16b36 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
@@ -5,12 +5,11 @@ import type { MenuButtonProps } from '@fluentui/react-components';
 
 import { Scenario } from './utils';
 
-export const EventReminderAccessibilityScenario: React.FunctionComponent = () => {
+export const EventReminderSplitButton: React.FunctionComponent = () => {
   const [statusText, setStatusText] = React.useState<string | undefined>(undefined);
-  const statusRef = React.useRef<HTMLParagraphElement>(null);
 
   const focusStatus = () => {
-    statusRef.current!.focus();
+    document.getElementById('statusText')?.focus();
   };
 
   const onDismissButtonClick = () => {
@@ -31,6 +30,7 @@ export const EventReminderAccessibilityScenario: React.FunctionComponent = () =>
 
   return (
     <Scenario pageTitle="Event reminder split button">
+      <h1>Event reminder</h1>
       {!statusText && (
         <>
           <p>Your meeting starts in 10 minutes.</p>
@@ -85,14 +85,9 @@ export const EventReminderAccessibilityScenario: React.FunctionComponent = () =>
           </Menu>
         </>
       )}
-      <div ref={statusRef} tabIndex={0}>
+      <div id="statusText" tabIndex={-1}>
         {statusText && <p>{statusText}</p>}
       </div>
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios/ Event reminder split button',
-  id: 'split-button-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Switch.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Switch.stories.tsx
new file mode 100644
index 0000000000000..18e3bed85c016
--- /dev/null
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Switch.stories.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { Switch } from '@fluentui/react-components';
+
+import { Scenario } from './utils';
+
+export const DeviceControlsSwitches: React.FunctionComponent = () => {
+  const [hotspotSwitchDisabled, setHotSpotSwitchDisabled] = React.useState<boolean | undefined>(true);
+  const [wiFiSwitchChecked, setWiFiSwitchChecked] = React.useState(false);
+  const [hotspotSwitchChecked, setHotspotSwitchChecked] = React.useState(false);
+
+  const onWiFiSwitchClick = (event: React.MouseEvent) => {
+    setHotSpotSwitchDisabled(hotspotSwitchDisabled ? undefined : true);
+    if (wiFiSwitchChecked) {
+      setHotspotSwitchChecked(false);
+    }
+    setWiFiSwitchChecked(!wiFiSwitchChecked);
+  };
+
+  const onHotspotSwitchClick = () => {
+    setHotspotSwitchChecked(!hotspotSwitchChecked);
+  };
+
+  return (
+    <Scenario pageTitle="Device controls switches">
+      <h1>Device controls</h1>
+      <p>This is a basic control panel for your device</p>
+      <Switch onClick={onWiFiSwitchClick} label="Wi-Fi" />
+      <Switch
+        checked={hotspotSwitchChecked}
+        disabled={hotspotSwitchDisabled}
+        onClick={onHotspotSwitchClick}
+        label="Hotspot"
+      />
+      <Switch label="Bluetooth" />
+    </Scenario>
+  );
+};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/TabListHorizontal.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/TabListHorizontal.stories.tsx
new file mode 100644
index 0000000000000..450e5aa48f8e3
--- /dev/null
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/TabListHorizontal.stories.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+
+import {
+  Label,
+  Checkbox,
+  RadioGroup,
+  Radio,
+  TabList,
+  Tab,
+  TabValue,
+  Textarea,
+  SelectTabEvent,
+  SelectTabData,
+} from '@fluentui/react-components';
+
+import { MusicNote1Filled, InfoRegular } from '@fluentui/react-icons';
+
+import { Scenario } from './utils';
+
+export const MailSettingsHorizontalTabList: React.FunctionComponent = () => {
+  const [selectedTabValue, setSelectedTabValue] = React.useState<TabValue>('general');
+
+  const onTabSelect = (event: SelectTabEvent, data: SelectTabData) => {
+    setSelectedTabValue(data.value);
+  };
+
+  const GeneralPanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="generalTab">
+      <div>
+        <Checkbox label="Run app at startup" />
+      </div>
+
+      <div>
+        <Checkbox label="Enable spell-check" />
+      </div>
+
+      <Label htmlFor="oofTextarea">Out of office message:</Label>
+      <Textarea id="oofTextarea" />
+    </div>
+  ));
+
+  const AppearancePanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="appearanceTab">
+      <Label id="themeLabel">Select theme:</Label>
+      <RadioGroup defaultValue="light" aria-labelledby="themeLabel">
+        <Radio value="light" label="Light" />
+        <Radio value="dark" label="Dark" />
+      </RadioGroup>
+
+      <Label id="fontSizeLabel">Font size:</Label>
+      <RadioGroup defaultValue="medium" aria-labelledby="fontSizeLabel">
+        <Radio value="small" label="Small" />
+        <Radio value="medium" label="Medium" />
+        <Radio value="large" label="Large" />
+      </RadioGroup>
+      <Checkbox defaultChecked={true} label="Show message preview pane" />
+    </div>
+  ));
+
+  const SoundsPanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="SoundsTab">
+      <Checkbox label="Disable all notification sounds" />
+    </div>
+  ));
+
+  const AboutPanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="aboutTab">
+      <h2>Mail</h2>
+      <p>Version: 1.0.0.</p>
+      <p>Copyright 2022. All rights reserved.</p>
+    </div>
+  ));
+
+  return (
+    <Scenario pageTitle="Mail settings with horizontal tablist">
+      <h1>Settings</h1>
+      <TabList selectedValue={selectedTabValue} onTabSelect={onTabSelect}>
+        <Tab id="generalTab" value="general">
+          General
+        </Tab>
+        <Tab id="appearanceTab" value="appearance">
+          Appearance
+        </Tab>
+        <Tab id="soundsTab" value="sounds" icon={<MusicNote1Filled />} aria-label="Sounds" />
+        <Tab id="advancedTab" value="advanced" disabled>
+          Advanced
+        </Tab>
+        <Tab id="aboutTab" icon={<InfoRegular />} value="about">
+          About
+        </Tab>
+      </TabList>
+
+      {selectedTabValue === 'general' && <GeneralPanel />}
+      {selectedTabValue === 'appearance' && <AppearancePanel />}
+      {selectedTabValue === 'sounds' && <SoundsPanel />}
+      {selectedTabValue === 'about' && <AboutPanel />}
+    </Scenario>
+  );
+};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/TabListOverflow.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/TabListOverflow.stories.tsx
new file mode 100644
index 0000000000000..abaff84e9b023
--- /dev/null
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/TabListOverflow.stories.tsx
@@ -0,0 +1,223 @@
+import * as React from 'react';
+
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';
+
+import {
+  tokens,
+  Button,
+  Label,
+  Checkbox,
+  RadioGroup,
+  Radio,
+  TabList,
+  Tab,
+  TabValue,
+  Textarea,
+  Menu,
+  MenuItem,
+  MenuList,
+  MenuPopover,
+  MenuTrigger,
+} from '@fluentui/react-components';
+import { Overflow, OverflowItem, useIsOverflowItemVisible, useOverflowMenu } from '@fluentui/react-overflow';
+
+import { MusicNote1Filled, InfoRegular, MoreHorizontalRegular } from '@fluentui/react-icons';
+
+import { Scenario } from './utils';
+
+type SettingsTab = {
+  id: string;
+  name: string | undefined;
+  icon: React.ReactElement | undefined;
+  disabled: boolean;
+};
+
+const tabs: SettingsTab[] = [
+  {
+    id: 'general',
+    name: 'General',
+    icon: undefined,
+    disabled: false,
+  },
+  {
+    id: 'appearance',
+    name: 'Appearance',
+    icon: undefined,
+    disabled: false,
+  },
+  {
+    id: 'sounds',
+    name: 'Sounds',
+    icon: <MusicNote1Filled />,
+    disabled: false,
+  },
+  {
+    id: 'advanced',
+    name: 'Advanced',
+    icon: undefined,
+    disabled: true,
+  },
+  {
+    id: 'about',
+    name: 'About',
+    icon: <InfoRegular />,
+    disabled: false,
+  },
+];
+
+type OverflowMenuItemProps = {
+  tab: SettingsTab;
+  onClick: React.MouseEventHandler<HTMLDivElement>;
+};
+
+const OverflowMenuItem = (props: OverflowMenuItemProps) => {
+  const { tab, onClick } = props;
+  const isVisible = useIsOverflowItemVisible(tab.id);
+
+  if (isVisible) {
+    return null;
+  }
+
+  return (
+    <MenuItem as="div" key={tab.id} icon={tab.icon} onClick={onClick} disabled={tab.disabled}>
+      <div>{tab.name}</div>
+    </MenuItem>
+  );
+};
+
+type OverflowMenuProps = {
+  onTabSelect?: (tabId: string) => void;
+};
+
+const OverflowMenu = (props: OverflowMenuProps) => {
+  const { onTabSelect } = props;
+  const { ref, isOverflowing, overflowCount } = useOverflowMenu<HTMLButtonElement>();
+
+  const onItemClick = (tabId: string) => {
+    onTabSelect?.(tabId);
+  };
+
+  if (!isOverflowing) {
+    return null;
+  }
+
+  return (
+    <Menu hasIcons>
+      <MenuTrigger>
+        <Button
+          ref={ref}
+          icon={<MoreHorizontalRegular />}
+          role="tab"
+          aria-label={`${overflowCount} more tabs`}
+          aria-selected="false"
+        />
+      </MenuTrigger>
+      <MenuPopover>
+        <MenuList>
+          {tabs.map(tab => (
+            <OverflowMenuItem key={tab.id} tab={tab} onClick={() => onItemClick(tab.id)} />
+          ))}
+        </MenuList>
+      </MenuPopover>
+    </Menu>
+  );
+};
+
+const useSettingsStyles = makeStyles({
+  settings: {
+    backgroundColor: tokens.colorNeutralBackground2,
+    ...shorthands.overflow('hidden'),
+    ...shorthands.padding('5px'),
+    zIndex: 0, //stop the browser resize handle from piercing the overflow menu
+  },
+  horizontal: {
+    height: 'fit-content',
+    minWidth: '150px',
+    resize: 'horizontal',
+    width: '300px',
+  },
+});
+
+export const MailSettingsOverflowTabList: React.FunctionComponent = () => {
+  const styles = useSettingsStyles();
+
+  const [selectedTabValue, setSelectedTabValue] = React.useState<TabValue>('general');
+
+  const onTabSelect = (tabId: string) => {
+    setSelectedTabValue(tabId);
+  };
+
+  const GeneralPanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="generalTab">
+      <div>
+        <Checkbox label="Run app at startup" />
+      </div>
+
+      <div>
+        <Checkbox label="Enable spell-check" />
+      </div>
+
+      <Label htmlFor="oofTextarea">Out of office message:</Label>
+      <Textarea id="oofTextarea" />
+    </div>
+  ));
+
+  const AppearancePanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="appearanceTab">
+      <Label id="themeLabel">Select theme:</Label>
+      <RadioGroup defaultValue="light" aria-labelledby="themeLabel">
+        <Radio value="light" label="Light" />
+        <Radio value="dark" label="Dark" />
+      </RadioGroup>
+
+      <Label id="fontSizeLabel">Font size:</Label>
+      <RadioGroup defaultValue="medium" aria-labelledby="fontSizeLabel">
+        <Radio value="small" label="Small" />
+        <Radio value="medium" label="Medium" />
+        <Radio value="large" label="Large" />
+      </RadioGroup>
+      <Checkbox defaultChecked={true} label="Show message preview pane" />
+    </div>
+  ));
+
+  const SoundsPanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="SoundsTab">
+      <Checkbox label="Disable all notification sounds" />
+    </div>
+  ));
+
+  const AboutPanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="aboutTab">
+      <h2>Mail</h2>
+      <p>Version: 1.0.0.</p>
+      <p>Copyright 2022. All rights reserved.</p>
+    </div>
+  ));
+
+  return (
+    <Scenario pageTitle="Mail settings with overflow tablist">
+      <h1>Settings</h1>
+      <div className={mergeClasses(styles.settings, styles.horizontal)}>
+        <Overflow minimumVisible={2}>
+          <TabList selectedValue={selectedTabValue} onTabSelect={(event, data) => onTabSelect(data.value as string)}>
+            {tabs.map(tab => {
+              return (
+                <OverflowItem key={tab.id} id={tab.id} priority={tab.id === selectedTabValue ? 2 : 1}>
+                  <Tab value={tab.id} icon={<span>{tab.icon}</span>} disabled={tab.disabled}>
+                    {tab.name}
+                  </Tab>
+                </OverflowItem>
+              );
+            })}
+            <OverflowMenu onTabSelect={onTabSelect} />
+          </TabList>
+        </Overflow>
+      </div>
+
+      {selectedTabValue === 'general' && <GeneralPanel />}
+      {selectedTabValue === 'appearance' && <AppearancePanel />}
+      {selectedTabValue === 'sounds' && <SoundsPanel />}
+      {selectedTabValue === 'about' && <AboutPanel />}
+    </Scenario>
+  );
+};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/TabListVertical.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/TabListVertical.stories.tsx
new file mode 100644
index 0000000000000..f2602f9352bde
--- /dev/null
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/TabListVertical.stories.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+
+import {
+  Label,
+  Checkbox,
+  RadioGroup,
+  Radio,
+  Textarea,
+  TabList,
+  Tab,
+  TabValue,
+  SelectTabEvent,
+  SelectTabData,
+} from '@fluentui/react-components';
+
+import { MusicNote1Filled, InfoRegular } from '@fluentui/react-icons';
+
+import { Scenario } from './utils';
+
+export const MailSettingsVerticalTabList: React.FunctionComponent = () => {
+  const [selectedTabValue, setSelectedTabValue] = React.useState<TabValue>('general');
+
+  const onTabSelect = (event: SelectTabEvent, data: SelectTabData) => {
+    setSelectedTabValue(data.value);
+  };
+
+  const GeneralPanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="generalTab">
+      <div>
+        <Checkbox label="Run app at startup" />
+      </div>
+
+      <div>
+        <Checkbox label="Enable spell-check" />
+      </div>
+
+      <Label htmlFor="oofTextarea">Out of office message:</Label>
+      <Textarea id="oofTextarea" />
+    </div>
+  ));
+
+  const AppearancePanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="appearanceTab">
+      <Label id="themeLabel">Select theme:</Label>
+      <RadioGroup defaultValue="light" aria-labelledby="themeLabel">
+        <Radio value="light" label="Light" />
+        <Radio value="dark" label="Dark" />
+      </RadioGroup>
+
+      <Label id="fontSizeLabel">Font size:</Label>
+      <RadioGroup defaultValue="medium" aria-labelledby="fontSizeLabel">
+        <Radio value="small" label="Small" />
+        <Radio value="medium" label="Medium" />
+        <Radio value="large" label="Large" />
+      </RadioGroup>
+      <Checkbox defaultChecked={true} label="Show message preview pane" />
+    </div>
+  ));
+
+  const SoundsPanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="SoundsTab">
+      <Checkbox label="Disable all notification sounds" />
+    </div>
+  ));
+
+  const AboutPanel = React.memo(() => (
+    <div role="tabpanel" aria-labelledby="aboutTab">
+      <h2>Mail</h2>
+      <p>Version: 1.0.0.</p>
+      <p>Copyright 2022. All rights reserved.</p>
+    </div>
+  ));
+
+  return (
+    <Scenario pageTitle="Mail settings with vertical tablist">
+      <h1>Settings</h1>
+      <TabList selectedValue={selectedTabValue} onTabSelect={onTabSelect} vertical>
+        <Tab id="generalTab" value="general">
+          General
+        </Tab>
+        <Tab id="appearanceTab" value="appearance">
+          Appearance
+        </Tab>
+        <Tab id="soundsTab" value="sounds" icon={<MusicNote1Filled />} aria-label="Sounds" />
+        <Tab id="advancedTab" value="advanced" disabled>
+          Advanced
+        </Tab>
+        <Tab id="aboutTab" icon={<InfoRegular />} value="about">
+          About
+        </Tab>
+      </TabList>
+
+      {selectedTabValue === 'general' && <GeneralPanel />}
+      {selectedTabValue === 'appearance' && <AppearancePanel />}
+      {selectedTabValue === 'sounds' && <SoundsPanel />}
+      {selectedTabValue === 'about' && <AboutPanel />}
+    </Scenario>
+  );
+};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Textarea.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Textarea.stories.tsx
new file mode 100644
index 0000000000000..49a4779024aa4
--- /dev/null
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Textarea.stories.tsx
@@ -0,0 +1,375 @@
+import * as React from 'react';
+
+import { Button, Textarea, Checkbox, Label } from '@fluentui/react-components';
+
+import { Scenario } from './utils';
+
+import { useForm, Controller, OnSubmit } from 'react-hook-form';
+import { usePubSub, PubSubProvider, Handler } from '@cactuslab/usepubsub';
+
+const generateCustomerId = (): string => {
+  let char;
+  let hash = 0;
+  const random = Math.random().toString();
+  for (let i = 0; i < random.length; i++) {
+    char = random.charCodeAt(i);
+    //eslint-disable-next-line no-bitwise
+    hash = (hash << 5) - hash + char;
+    //eslint-disable-next-line no-bitwise
+    hash |= 0; // Convert to 32bit integer
+  }
+  hash += 2147483647; // Convert to positive integer
+  return hash.toString().padStart(10, '0').substring(2);
+};
+
+let isSubmitting = false;
+
+interface FormTextareas {
+  knowledge: string;
+  effort: string;
+  problemNotSolved: string;
+  otherComments: string;
+  satisfaction: string;
+}
+
+interface FormValidation {
+  subscribe: (channel: string, handler: Handler) => () => void;
+  unsubscribe: (channel: string, handler: Handler) => void;
+}
+
+interface ValidationMessageProps {
+  id: string;
+  formValidation: FormValidation;
+}
+const ValidationMessage: React.FC<ValidationMessageProps> = ({ id, formValidation, children }) => {
+  const [isAlerting, setIsAlerting] = React.useState(true);
+
+  const alert = React.useCallback(() => {
+    setIsAlerting(false);
+    setTimeout(() => setIsAlerting(true), 200);
+  }, [setIsAlerting]);
+
+  React.useEffect(() => {
+    formValidation.subscribe(id, alert);
+    return () => formValidation.unsubscribe(id, alert);
+  }, [formValidation, alert, id]);
+  return (
+    <>
+      {isAlerting ? (
+        <div role="alert" style={{ color: 'red' }} id={`${id}Errors`}>
+          {children}
+        </div>
+      ) : (
+        <div style={{ color: 'green' }} id={`${id}Errors`}>
+          {children}
+        </div>
+      )}
+    </>
+  );
+};
+
+const useFormValidation = (
+  handleSubmit: (callback: OnSubmit<FormTextareas>) => (e?: React.BaseSyntheticEvent) => Promise<void>,
+) => {
+  const pubSub = usePubSub();
+  const isHandlingSubmit = React.useRef(false);
+
+  const wrappedHandleSubmit = React.useCallback(
+    (callback: OnSubmit<FormTextareas>) => {
+      const handler = handleSubmit(callback);
+      return async (e: React.BaseSyntheticEvent) => {
+        isHandlingSubmit.current = true;
+        const result = await handler(e);
+        isHandlingSubmit.current = false;
+        return result;
+      };
+    },
+    [isHandlingSubmit, handleSubmit],
+  );
+
+  const onFieldValidated = React.useCallback(
+    (field: string) => {
+      if (!isHandlingSubmit.current) {
+        pubSub.publish(field, 'validate');
+      }
+      return true;
+    },
+    [isHandlingSubmit, pubSub],
+  );
+
+  const notifyFormFieldError = React.useCallback(
+    (field: string) => {
+      pubSub.publish(field, 'validate');
+      return true;
+    },
+    [pubSub],
+  );
+
+  return {
+    subscribe: pubSub.subscribe,
+    unsubscribe: pubSub.unsubscribe,
+    onFieldValidated,
+    handleSubmit: wrappedHandleSubmit,
+    notifyFormFieldError,
+  };
+};
+
+const QuestionnaireAboutCustomerExperienceAccessibility = () => {
+  const { control, handleSubmit, errors, formState, unregister } = useForm<FormTextareas>({
+    validateCriteriaMode: 'all',
+    mode: 'onBlur',
+    reValidateMode: 'onBlur',
+  });
+
+  const formValidation = useFormValidation(handleSubmit);
+
+  const [isProblemNotSolved, setIsProblemNotSolved] = React.useState(false);
+  const [isSubmittedAndValid, setIsSubmittedAndValid] = React.useState(false);
+
+  React.useEffect(() => {
+    if (formState.isSubmitting) {
+      isSubmitting = true;
+    }
+  }, [formState]);
+
+  React.useEffect(() => {
+    // If the form is submitting and has errors, focus the first error fiel, otherwise do nothing
+    if (!isSubmitting || !formState.isSubmitted || formState.isValid) {
+      return;
+    }
+    isSubmitting = false;
+
+    const firstErrorName = Object.keys(errors)[0] as keyof FormTextareas;
+    const firstErrorField = document.getElementById(firstErrorName);
+
+    if (firstErrorField) {
+      setTimeout(() => firstErrorField.focus(), 500);
+    }
+  }, [errors, formState, formValidation]);
+
+  React.useEffect(() => {
+    if (isSubmittedAndValid) {
+      document.getElementById('validMessage')?.focus();
+    }
+  }, [isSubmittedAndValid]);
+
+  const onSubmit = (data: FormTextareas, event?: React.BaseSyntheticEvent) => {
+    event?.preventDefault();
+    if (formState.isValid) {
+      setIsSubmittedAndValid(true);
+    }
+  };
+
+  const onProblemNotSolvedChange = (event: React.ChangeEvent) => {
+    unregister('problemNotSolved');
+    setIsProblemNotSolved(!isProblemNotSolved);
+  };
+
+  return (
+    <Scenario pageTitle="Textareas in questionnaire about customer experience">
+      <h1>Questionnaire about telepohne customer experience</h1>
+      {!isSubmittedAndValid ? (
+        <>
+          <p>
+            Please answer the questions below regarding your last experience as a customer of our telephone banking
+            services.
+          </p>
+          <form onSubmit={formValidation.handleSubmit(onSubmit)}>
+            <div>
+              <Label htmlFor="knowledge">Describe the knowledge of the problem by the operator</Label>
+              <Controller
+                name="knowledge"
+                control={control}
+                as={
+                  <Textarea
+                    id="knowledge"
+                    aria-required="true"
+                    aria-invalid={!!errors.knowledge}
+                    aria-describedby="knowledgeErrors"
+                  />
+                }
+                rules={{
+                  required: true,
+                  minLength: 20,
+                  validate: {
+                    always: () => {
+                      if (!formState.isSubmitting) {
+                        formValidation.onFieldValidated('knowledge');
+                      }
+                      return true;
+                    },
+                  },
+                }}
+              />
+            </div>
+            {errors.knowledge?.types && (
+              <ValidationMessage id="knowledge" formValidation={formValidation}>
+                {'required' in errors.knowledge.types ? (
+                  <p>This field is required.</p>
+                ) : (
+                  <>
+                    <p>This field is invalid. It must:</p>
+                    <ul>{'minLength' in errors.knowledge.types && <li>Have at least 20 characters.</li>}</ul>
+                  </>
+                )}
+              </ValidationMessage>
+            )}
+
+            <div>
+              <Label htmlFor="effort">Describe the kindness and effort to solve your problem by the operator</Label>
+              <Controller
+                name="effort"
+                control={control}
+                as={
+                  <Textarea
+                    id="effort"
+                    aria-required="true"
+                    aria-invalid={!!errors.effort}
+                    aria-describedby="effortErrors"
+                  />
+                }
+                rules={{
+                  required: true,
+                  minLength: 20,
+                  validate: {
+                    always: () => {
+                      if (!formState.isSubmitting) {
+                        formValidation.onFieldValidated('effort');
+                      }
+                      return true;
+                    },
+                  },
+                }}
+              />
+            </div>
+            {errors.effort?.types && (
+              <ValidationMessage id="effort" formValidation={formValidation}>
+                {'required' in errors.effort.types ? (
+                  <p>This field is required.</p>
+                ) : (
+                  <>
+                    <p>This field is invalid. It must:</p>
+                    <ul>{'minLength' in errors.effort.types && <li>Have at least 20 characters.</li>}</ul>
+                  </>
+                )}
+              </ValidationMessage>
+            )}
+
+            <div>
+              <Checkbox
+                checked={isProblemNotSolved}
+                onChange={onProblemNotSolvedChange}
+                label="My problem has not been solved."
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="problemNotSolved">Tell us why your problem has not been solved</Label>
+              <Controller
+                name="problemNotSolved"
+                control={control}
+                as={
+                  <Textarea
+                    id="problemNotSolved"
+                    disabled={!isProblemNotSolved}
+                    aria-required={isProblemNotSolved}
+                    aria-invalid={!!errors.problemNotSolved}
+                    aria-describedby="problemNotSolvedErrors"
+                  />
+                }
+                rules={{
+                  required: isProblemNotSolved,
+                  minLength: isProblemNotSolved ? 20 : 0,
+                  validate: {
+                    always: () => {
+                      if (!formState.isSubmitting) {
+                        formValidation.onFieldValidated('problemNotSolved');
+                      }
+                      return true;
+                    },
+                  },
+                }}
+              />
+            </div>
+            {errors.problemNotSolved?.types && (
+              <ValidationMessage id="problemNotSolved" formValidation={formValidation}>
+                {'required' in errors.problemNotSolved.types ? (
+                  <p>This field is required.</p>
+                ) : (
+                  <>
+                    <p>This field is invalid. It must:</p>
+                    <ul>{'minLength' in errors.problemNotSolved.types && <li>Have at least 20 characters.</li>}</ul>
+                  </>
+                )}
+              </ValidationMessage>
+            )}
+
+            <div>
+              <Label htmlFor="otherComments">
+                Anything else you want to tell us about your last telephone experience
+              </Label>
+              <Textarea id="otherComments" />
+            </div>
+
+            <div>
+              <Label htmlFor="satisfaction">Extra question: How satisfied are you otherwise with our services?</Label>
+              <Controller
+                name="satisfaction"
+                control={control}
+                as={
+                  <Textarea
+                    id="satisfaction"
+                    placeholder="Try to be concise, not to use more than three sentences..."
+                    aria-invalid={!!errors.satisfaction}
+                    aria-describedby="satisfactionErrors"
+                  />
+                }
+                rules={{
+                  maxLength: 150,
+                  validate: {
+                    always: () => {
+                      if (!formState.isSubmitting) {
+                        formValidation.onFieldValidated('satisfaction');
+                      }
+                      return true;
+                    },
+                  },
+                }}
+              />
+            </div>
+            {errors.satisfaction?.types && (
+              <ValidationMessage id="satisfaction" formValidation={formValidation}>
+                <p>This field is invalid. It must:</p>
+                <ul>{'maxLength' in errors.satisfaction.types && <li>Have not more than150 characters.</li>}</ul>
+              </ValidationMessage>
+            )}
+
+            <div>
+              <Label htmlFor="customerId">Your customer id:</Label>
+              <Textarea
+                id="customerId"
+                defaultValue={generateCustomerId()}
+                readOnly
+                aria-describedby="customerIdHint"
+              />
+            </div>
+
+            <p id="customerIdHint">We will use the customer id to track your feedback.</p>
+
+            <Button type="submit">Submit</Button>
+          </form>
+        </>
+      ) : (
+        <p id="validMessage" role="alert" tabIndex={-1}>
+          The form is valid and would have been submitted.
+        </p>
+      )}
+    </Scenario>
+  );
+};
+
+export const QuestionnaireAboutCustomerExperienceTextareas: React.FunctionComponent = () => (
+  <PubSubProvider>
+    <QuestionnaireAboutCustomerExperienceAccessibility />
+  </PubSubProvider>
+);
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx
index e8ad7f75bc90d..6a3fead7f6f70 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx
@@ -4,7 +4,7 @@ import { ToggleButton } from '@fluentui/react-components';
 
 import { Scenario } from './utils';
 
-export const DeviceControlsToggleButtonsAccessibilityScenario: React.FunctionComponent = () => {
+export const DeviceControlsToggleButtons: React.FunctionComponent = () => {
   const [hotspotButtonDisabled, setHotspotButtonDisabled] = React.useState<boolean | undefined>(true);
   const [wiFiButtonPressed, setWiFiButtonPressed] = React.useState(false);
   const [hotspotButtonPressed, setHotspotButtonPressed] = React.useState(false);
@@ -37,8 +37,3 @@ export const DeviceControlsToggleButtonsAccessibilityScenario: React.FunctionCom
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios/ Device controls toggle buttons',
-  id: 'toggle-button-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
index e851ae75256d6..5c9dfe0b85de0 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -6,9 +6,10 @@ import { TextItalic24Regular, TextUnderline24Regular, TextBold24Regular } from '
 
 import { Scenario } from './utils';
 
-export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent = () => {
+export const ButtonsWithTooltip: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="Buttons with tooltip">
+      <h1>Tooltip variants</h1>
       <h2>Tooltips for text formatting icon-only buttons</h2>
       <Tooltip relationship="label" content="Make text bold">
         <Button icon={<TextBold24Regular />} />
@@ -29,8 +30,3 @@ export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent =
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios/ Buttons with tooltip',
-  id: 'tooltip-accessibility-scenario',
-};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/index.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/index.stories.tsx
new file mode 100644
index 0000000000000..8f50cd7590c4b
--- /dev/null
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/index.stories.tsx
@@ -0,0 +1,24 @@
+export { PersonalFormAccordion } from './Accordion.stories';
+export { FAQAccordion } from './AccordionFaq.stories';
+export { MessengerButtons } from './Button.stories';
+export { QuestionnaireAboutFoodCheckboxes } from './Checkbox.stories';
+export { TicketOrderFormInputs } from './Input.stories';
+export { SiteNavigationLinks } from './Link.stories';
+export { ProfileMenu } from './Menu.stories';
+export { MenuWithSplitItem } from './MenuSplitGroup.stories';
+export { AddPeoplePopover } from './Popover.stories';
+export { QuestionnaireAboutTransportationRadios } from './RadioGroup.stories';
+export { SoundControlSliders } from './Slider.stories';
+export { PostsLoadingSpinner } from './Spinner.stories';
+export { EventReminderSplitButton } from './SplitButton.stories';
+export { DeviceControlsSwitches } from './Switch.stories';
+export { MailSettingsHorizontalTabList } from './TabListHorizontal.stories';
+export { MailSettingsOverflowTabList } from './TabListOverflow.stories';
+export { MailSettingsVerticalTabList } from './TabListVertical.stories';
+export { QuestionnaireAboutCustomerExperienceTextareas } from './Textarea.stories';
+export { DeviceControlsToggleButtons } from './ToggleButton.stories';
+export { ButtonsWithTooltip } from './Tooltip.stories';
+
+export default {
+  title: 'Concepts/Developer/Accessibility/Stories',
+};
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/utils.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/utils.tsx
index ab1a1d301c5a9..06438c6e95fc4 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/utils.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/utils.tsx
@@ -18,7 +18,10 @@ export const FullscreenLink = (props: FullscreenLinkProps) => (
 );
 
 export const ScenariosListLink: React.FC = props => (
-  <a className="sbdocs sbdocs-a" href={`iframe.html?id=accessibility-scenarios-list-of-scenarios--page`}>
+  <a
+    className="sbdocs sbdocs-a"
+    href={`iframe.html?id=concepts-developer-accessibility-stories-list-of-scenarios--page`}
+  >
     {props.children}
   </a>
 );