From 074ae281bdc4020f9b98e3cd07bc8349c7099190 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Tue, 9 Nov 2021 10:59:51 +0100
Subject: [PATCH 01/70] Add accessibility scenarios for the Accordion, Button
 and Popover components

---
 .../Accordion.stories.tsx                     | 62 ++++++++++++++++++
 .../AccessibilityScenarios/Button.stories.tsx | 28 ++++++++
 .../ListOfScenarios.stories.mdx               | 22 +++++--
 .../AccessibilityScenarios/Menu.stories.tsx   |  6 +-
 .../Popover.stories.tsx                       | 64 +++++++++++++++++++
 .../src/AccessibilityScenarios/utils.tsx      |  6 +-
 6 files changed, 175 insertions(+), 13 deletions(-)
 create mode 100644 packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
 create mode 100644 packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
 create mode 100644 packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
new file mode 100644
index 0000000000000..4fdeb184af72d
--- /dev/null
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
+import { Scenario, APP_TITLE, APP_TITLE_SEPARATOR } from './utils';
+
+export const SimpleFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
+  return (
+    <Scenario pageTitle="Simple Form Accordion">
+      <Accordion defaultOpenItems={'personalDetails'}>
+        <AccordionItem value="personalDetails">
+          <AccordionHeader>Personal details</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" />
+            <div role="group" aria-label="Gender">
+              <input type="radio" id="male" name="gender" value="male" />
+              <label htmlFor="male">male</label>
+              <input type="radio" id="female" name="gender" value="female" />
+              <label htmlFor="female">female</label>
+            </div>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="residence">
+          <AccordionHeader>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>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>
+    </Scenario>
+  );
+};
+
+export default {
+  title: `Simple Form Accordion${APP_TITLE_SEPARATOR}${APP_TITLE}`,
+  id: 'accordion-accessibility-scenario',
+};
diff --git a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
new file mode 100644
index 0000000000000..62b483b6c902f
--- /dev/null
+++ b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Button } from '@fluentui/react-button';
+import { Scenario, APP_TITLE, APP_TITLE_SEPARATOR } from './utils';
+
+export const CalendarButtonsAccessibilityScenario: React.FunctionComponent = () => {
+  const onSaveButtonClick = React.useCallback(() => {
+    alert('The calendar event would have been saved.');
+  }, []);
+
+  return (
+    <Scenario pageTitle="Calendar Buttons">
+      <>
+        <Button onClick={onSaveButtonClick}>Save event</Button>
+        <Button disabled>Delete event</Button>
+        <Button disabledFocusable>Show upcoming events</Button>
+      </>
+    </Scenario>
+  );
+};
+
+export default {
+  title: `Calendar Buttons${APP_TITLE_SEPARATOR}${APP_TITLE}`,
+  id: 'button-accessibility-scenario',
+};
diff --git a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index 60b6bc88ef78a..ad7286b897d02 100644
--- a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -1,16 +1,24 @@
 import { Meta } from '@storybook/addon-docs';
-import { FullscreenLink } from './utils';
+import { FullscreenLink, APP_TITLE, APP_TITLE_SEPARATOR } from './utils';
 
-<Meta title="Accessibility Scenarios/List of Scenarios" />
+<Meta title={`List of Scenarios${APP_TITLE_SEPARATOR}${APP_TITLE}`} />
 
-## Accessibility Scenarios
+# Accessibility Scenarios
 
 Accessibility scenarios are used to validate accessibility of components and demonstrate common UI patterns using Fluent UI components.
 
-### Component: Accordion
+## Component: Accordion
 
-### Component: Menu
+- <FullscreenLink content="Accordion / Simple Form" parent="accordion-accessibility-scenario" story="simple-form" />
 
-- <FullscreenLink content="Menu / ProfileMenu" parent="menu-accessibility-scenario" story="profile-menu" />
+## Component: Button
 
-### Component: Popover
+- <FullscreenLink content="Button / Calendar Buttons" parent="button-accessibility-scenario" story="calendar-buttons" />
+
+## Component: Menu
+
+- <FullscreenLink content="Menu / Profile Menu" parent="menu-accessibility-scenario" story="profile-menu" />
+
+## Component: Popover
+
+- <FullscreenLink content="Popover / Add people" parent="popover-accessibility-scenario" story="add-people" />
diff --git a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
index 9a530dbeb4927..7a9ddf2ca4f75 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
@@ -18,7 +18,7 @@ import {
   MenuItemCheckbox,
   MenuItemRadio,
 } from '@fluentui/react-menu';
-import { Scenario } from './utils';
+import { Scenario, APP_TITLE, APP_TITLE_SEPARATOR } from './utils';
 
 interface StatusSubmenuProps {
   checkedValues: Record<string, string[]>;
@@ -73,7 +73,7 @@ export const ProfileMenuAccessibilityScenario: React.FunctionComponent = () => {
   };
 
   return (
-    <Scenario pageTitle="Profile menu">
+    <Scenario pageTitle="Profile Menu">
       <Menu>
         <MenuTrigger>
           <Button>Profile</Button>
@@ -107,6 +107,6 @@ export const ProfileMenuAccessibilityScenario: React.FunctionComponent = () => {
 };
 
 export default {
-  title: 'Accessibility Scenarios/ProfileMenu',
+  title: `Profile Menu${APP_TITLE_SEPARATOR}${APP_TITLE}`,
   id: 'menu-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
new file mode 100644
index 0000000000000..1ee522eb487f1
--- /dev/null
+++ b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Button } from '@fluentui/react-button';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-popover';
+
+import { Scenario, APP_TITLE, APP_TITLE_SEPARATOR } from './utils';
+
+interface IAddPeopleContentProps {
+  setPopoverOpened: (state: boolean) => void;
+}
+
+const AddPeopleContent: React.FunctionComponent<IAddPeopleContentProps> = (props: IAddPeopleContentProps) => {
+  const { setPopoverOpened } = props;
+
+  return (
+    <>
+      <label htmlFor="addPeopleInput">Enter name, email or tag</label>
+      <input type="text" name="addPeopleInput" id="addPeopleInput" />
+      <Button
+        onClick={() => {
+          setPopoverOpened(false);
+        }}
+      >
+        Cancel
+      </Button>
+    </>
+  );
+};
+
+export const AddPeoplePopoverAccessibilityScenario: React.FunctionComponent = () => {
+  const [popoverOpened, setPopoverOpened] = React.useState(false);
+
+  return (
+    <Scenario pageTitle="Add People Popover">
+      <Popover
+        open={popoverOpened}
+        onOpenChange={(event, data) => {
+          setPopoverOpened(data.open);
+        }}
+        trapFocus
+      >
+        <PopoverTrigger>
+          <Button>Add people</Button>
+        </PopoverTrigger>
+
+        <PopoverSurface aria-label="Add someone to the chat">
+          <AddPeopleContent setPopoverOpened={setPopoverOpened} />
+        </PopoverSurface>
+      </Popover>
+    </Scenario>
+  );
+};
+
+export default {
+  title: `Add People Popover${APP_TITLE_SEPARATOR}${APP_TITLE}`,
+  id: 'popover-accessibility-scenario',
+};
diff --git a/packages/react-components/src/AccessibilityScenarios/utils.tsx b/packages/react-components/src/AccessibilityScenarios/utils.tsx
index 2af5b21792706..f60b9a97bbafd 100644
--- a/packages/react-components/src/AccessibilityScenarios/utils.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/utils.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-const APP_TITLE = 'Fluent UI usage scenarios';
-const APP_TITLE_SEPARATOR = ' | ';
+export const APP_TITLE = 'Accessibility Scenarios';
+export const APP_TITLE_SEPARATOR = ' | ';
 
 interface FullscreenLinkProps {
   parent: string;
@@ -18,7 +18,7 @@ export const FullscreenLink = (props: FullscreenLinkProps) => (
 );
 
 export const BackLink = () => (
-  <a href={`iframe.html?id=accessibility-scenarios-list-of-scenarios--page`}>Go back to main menu</a>
+  <a href={`iframe.html?id=list-of-scenarios-accessibility-scenarios--page`}>Go back to main menu</a>
 );
 
 export const Scenario: React.FunctionComponent<{ pageTitle: string }> = ({ pageTitle, children }) => {

From 3352e776320fc297aba92ee3ea5e7d41f7df56d3 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 10 Nov 2021 17:38:56 +0100
Subject: [PATCH 02/70] Change scenario titles

---
 .../src/AccessibilityScenarios/Accordion.stories.tsx            | 2 +-
 .../src/AccessibilityScenarios/Button.stories.tsx               | 2 +-
 .../src/AccessibilityScenarios/Menu.stories.tsx                 | 2 +-
 .../src/AccessibilityScenarios/Popover.stories.tsx              | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
index 4fdeb184af72d..166149c776b48 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
@@ -57,6 +57,6 @@ export const SimpleFormAccordionAccessibilityScenario: React.FunctionComponent =
 };
 
 export default {
-  title: `Simple Form Accordion${APP_TITLE_SEPARATOR}${APP_TITLE}`,
+  title: 'Accessibility Scenarios / Simple Form Accordion',
   id: 'accordion-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
index 62b483b6c902f..d518a9ca3eb96 100644
--- a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
@@ -23,6 +23,6 @@ export const CalendarButtonsAccessibilityScenario: React.FunctionComponent = ()
 };
 
 export default {
-  title: `Calendar Buttons${APP_TITLE_SEPARATOR}${APP_TITLE}`,
+  title: 'Accessibility Scenarios / Calendar Buttons',
   id: 'button-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
index 7a9ddf2ca4f75..f6d005bc827ba 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
@@ -107,6 +107,6 @@ export const ProfileMenuAccessibilityScenario: React.FunctionComponent = () => {
 };
 
 export default {
-  title: `Profile Menu${APP_TITLE_SEPARATOR}${APP_TITLE}`,
+  title: 'Accessibility Scenarios / Profile Menu',
   id: 'menu-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
index 1ee522eb487f1..ce0bc836a4b51 100644
--- a/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
@@ -59,6 +59,6 @@ export const AddPeoplePopoverAccessibilityScenario: React.FunctionComponent = ()
 };
 
 export default {
-  title: `Add People Popover${APP_TITLE_SEPARATOR}${APP_TITLE}`,
+  title: 'Accessibility Scenarios / Add people Popover',
   id: 'popover-accessibility-scenario',
 };

From 5e45bbd19371ab4eabbcbf8c714967ee5892cdcf Mon Sep 17 00:00:00 2001
From: Adam <adam.samec@gmail.com>
Date: Thu, 11 Nov 2021 12:17:00 +0100
Subject: [PATCH 03/70] Use string directly as component prop value

Co-authored-by: Peter Varholak <peter.varholak@gmail.com>
---
 .../src/AccessibilityScenarios/Accordion.stories.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
index 166149c776b48..1ebd8917130c9 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
@@ -9,7 +9,7 @@ import { Scenario, APP_TITLE, APP_TITLE_SEPARATOR } from './utils';
 export const SimpleFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="Simple Form Accordion">
-      <Accordion defaultOpenItems={'personalDetails'}>
+      <Accordion defaultOpenItems="personalDetails">
         <AccordionItem value="personalDetails">
           <AccordionHeader>Personal details</AccordionHeader>
           <AccordionPanel>

From 0e82680ff8fdc4bdc5a0ae1c29cd4d4e8a94d717 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 11 Nov 2021 16:48:44 +0100
Subject: [PATCH 04/70] replace alert with status text and fix warnings

---
 .../src/AccessibilityScenarios/Accordion.stories.tsx      | 2 +-
 .../src/AccessibilityScenarios/Button.stories.tsx         | 8 ++++++--
 .../src/AccessibilityScenarios/Menu.stories.tsx           | 2 +-
 .../src/AccessibilityScenarios/Popover.stories.tsx        | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
index 1ebd8917130c9..eb65783e956c1 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
-import { Scenario, APP_TITLE, APP_TITLE_SEPARATOR } from './utils';
+import { Scenario } from './utils';
 
 export const SimpleFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
   return (
diff --git a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
index d518a9ca3eb96..1faf267a638ba 100644
--- a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
@@ -4,11 +4,12 @@ import * as React from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { Button } from '@fluentui/react-button';
-import { Scenario, APP_TITLE, APP_TITLE_SEPARATOR } from './utils';
+import { Scenario } from './utils';
 
 export const CalendarButtonsAccessibilityScenario: React.FunctionComponent = () => {
+  const [statusText, setStatusText] = React.useState('Not saved.');
   const onSaveButtonClick = React.useCallback(() => {
-    alert('The calendar event would have been saved.');
+    setStatusText('The event has been saved.');
   }, []);
 
   return (
@@ -17,6 +18,9 @@ export const CalendarButtonsAccessibilityScenario: React.FunctionComponent = ()
         <Button onClick={onSaveButtonClick}>Save event</Button>
         <Button disabled>Delete event</Button>
         <Button disabledFocusable>Show upcoming events</Button>
+        <p>
+          Event status: <span aria-live="polite">{statusText}</span>
+        </p>
       </>
     </Scenario>
   );
diff --git a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
index f6d005bc827ba..81a6c5988c85f 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
@@ -18,7 +18,7 @@ import {
   MenuItemCheckbox,
   MenuItemRadio,
 } from '@fluentui/react-menu';
-import { Scenario, APP_TITLE, APP_TITLE_SEPARATOR } from './utils';
+import { Scenario } from './utils';
 
 interface StatusSubmenuProps {
   checkedValues: Record<string, string[]>;
diff --git a/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
index ce0bc836a4b51..d989d1941685f 100644
--- a/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
@@ -10,7 +10,7 @@ import { Button } from '@fluentui/react-button';
 // @ts-ignore
 import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-popover';
 
-import { Scenario, APP_TITLE, APP_TITLE_SEPARATOR } from './utils';
+import { Scenario } from './utils';
 
 interface IAddPeopleContentProps {
   setPopoverOpened: (state: boolean) => void;

From f9c34fce721a36f0f9eba78135ec981da49ca674 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 11 Nov 2021 17:03:49 +0100
Subject: [PATCH 05/70] Replace useCallback with ordinary function

---
 .../src/AccessibilityScenarios/Button.stories.tsx             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
index 1faf267a638ba..b744f1326d0b0 100644
--- a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
@@ -8,9 +8,9 @@ import { Scenario } from './utils';
 
 export const CalendarButtonsAccessibilityScenario: React.FunctionComponent = () => {
   const [statusText, setStatusText] = React.useState('Not saved.');
-  const onSaveButtonClick = React.useCallback(() => {
+  const onSaveButtonClick = () => {
     setStatusText('The event has been saved.');
-  }, []);
+  };
 
   return (
     <Scenario pageTitle="Calendar Buttons">

From 930148bd0447c2a00ead32c9ab9ae4aab245b908 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 11 Nov 2021 17:19:45 +0100
Subject: [PATCH 06/70] Revert the title for the scenarios list page

---
 .../src/AccessibilityScenarios/ListOfScenarios.stories.mdx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index ad7286b897d02..db0f91c0813b1 100644
--- a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs';
-import { FullscreenLink, APP_TITLE, APP_TITLE_SEPARATOR } from './utils';
+import { FullscreenLink } from './utils';
 
-<Meta title={`List of Scenarios${APP_TITLE_SEPARATOR}${APP_TITLE}`} />
+<Meta title="Accessibility Scenarios/ List of Scenarios " />
 
 # Accessibility Scenarios
 

From 49691d4f8df2bdec690ee4ab8d7c0ff9a85f369d Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 11 Nov 2021 17:34:07 +0100
Subject: [PATCH 07/70] Removed unnecessary fragment

---
 .../src/AccessibilityScenarios/Button.stories.tsx  | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
index b744f1326d0b0..4090b961f9135 100644
--- a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
@@ -14,14 +14,12 @@ export const CalendarButtonsAccessibilityScenario: React.FunctionComponent = ()
 
   return (
     <Scenario pageTitle="Calendar Buttons">
-      <>
-        <Button onClick={onSaveButtonClick}>Save event</Button>
-        <Button disabled>Delete event</Button>
-        <Button disabledFocusable>Show upcoming events</Button>
-        <p>
-          Event status: <span aria-live="polite">{statusText}</span>
-        </p>
-      </>
+      <Button onClick={onSaveButtonClick}>Save event</Button>
+      <Button disabled>Delete event</Button>
+      <Button disabledFocusable>Show upcoming events</Button>
+      <p>
+        Event status: <span aria-live="polite">{statusText}</span>
+      </p>
     </Scenario>
   );
 };

From 8bdd2c0d044a8c5f58281d9adb04e79bddcd6c32 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 11 Nov 2021 18:46:26 +0100
Subject: [PATCH 08/70] Use <Label> components

---
 .../Accordion.stories.tsx                     | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
index eb65783e956c1..aa485c3537b13 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
@@ -4,6 +4,12 @@ import * as React from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Label } from '@fluentui/react-label';
+
 import { Scenario } from './utils';
 
 export const SimpleFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
@@ -13,26 +19,26 @@ export const SimpleFormAccordionAccessibilityScenario: React.FunctionComponent =
         <AccordionItem value="personalDetails">
           <AccordionHeader>Personal details</AccordionHeader>
           <AccordionPanel>
-            <label htmlFor="name">Name:</label>
+            <Label htmlFor="name">Name:</Label>
             <input type="text" id="name" name="name" />
-            <label htmlFor="email">Email:</label>
+            <Label htmlFor="email">Email:</Label>
             <input type="text" id="email" name="email" />
             <div role="group" aria-label="Gender">
               <input type="radio" id="male" name="gender" value="male" />
-              <label htmlFor="male">male</label>
+              <Label htmlFor="male">male</Label>
               <input type="radio" id="female" name="gender" value="female" />
-              <label htmlFor="female">female</label>
+              <Label htmlFor="female">female</Label>
             </div>
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="residence">
           <AccordionHeader>Residence</AccordionHeader>
           <AccordionPanel>
-            <label htmlFor="street">Street:</label>
+            <Label htmlFor="street">Street:</Label>
             <input type="text" id="street" name="street" />
-            <label htmlFor="city">City:</label>
+            <Label htmlFor="city">City:</Label>
             <input type="text" id="city" name="city" />
-            <label htmlFor="country">Country:</label>
+            <Label htmlFor="country">Country:</Label>
             <input type="text" id="country" name="country" />
           </AccordionPanel>
         </AccordionItem>
@@ -41,13 +47,13 @@ export const SimpleFormAccordionAccessibilityScenario: React.FunctionComponent =
           <AccordionPanel>
             <div role="group" aria-label="Hobbies">
               <input type="checkbox" id="books" name="hobbies" value="books" />
-              <label htmlFor="books">books</label>
+              <Label htmlFor="books">books</Label>
               <input type="checkbox" id="sports" name="hobbies" value="sports" />
-              <label htmlFor="sports">sports</label>
+              <Label htmlFor="sports">sports</Label>
               <input type="checkbox" id="music" name="hobbies" value="music" />
-              <label htmlFor="music">music</label>
+              <Label htmlFor="music">music</Label>
               <input type="checkbox" id="travelling" name="hobbies" value="travelling" />
-              <label htmlFor="travelling">travelling</label>
+              <Label htmlFor="travelling">travelling</Label>
             </div>
           </AccordionPanel>
         </AccordionItem>

From cfe3331d7c1c1c7ba6e0e9255d7ec3d375de627c Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Mon, 15 Nov 2021 12:04:55 +0100
Subject: [PATCH 09/70] Remove not used exports

---
 .../react-components/src/AccessibilityScenarios/utils.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/utils.tsx b/packages/react-components/src/AccessibilityScenarios/utils.tsx
index f60b9a97bbafd..b353a720d927a 100644
--- a/packages/react-components/src/AccessibilityScenarios/utils.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/utils.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-export const APP_TITLE = 'Accessibility Scenarios';
-export const APP_TITLE_SEPARATOR = ' | ';
+const APP_TITLE = 'Accessibility Scenarios';
+const APP_TITLE_SEPARATOR = ' | ';
 
 interface FullscreenLinkProps {
   parent: string;

From f4ea222515245e2a7e1f4ae10619e11a2cc4368b Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jukapsia@microsoft.com>
Date: Mon, 22 Nov 2021 08:50:37 +0100
Subject: [PATCH 10/70] Change files

---
 ...ct-components-577725ee-8be1-49cd-a0ba-70dcb68c13e8.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-components-577725ee-8be1-49cd-a0ba-70dcb68c13e8.json

diff --git a/change/@fluentui-react-components-577725ee-8be1-49cd-a0ba-70dcb68c13e8.json b/change/@fluentui-react-components-577725ee-8be1-49cd-a0ba-70dcb68c13e8.json
new file mode 100644
index 0000000000000..830de200b69cc
--- /dev/null
+++ b/change/@fluentui-react-components-577725ee-8be1-49cd-a0ba-70dcb68c13e8.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "docs(Accessibility): Introduce scanarios for accordion, button and popover",
+  "packageName": "@fluentui/react-components",
+  "email": "jukapsia@microsoft.com",
+  "dependentChangeType": "none"
+}

From 562db7c921d267dfb3847e0a8c0303da215abf2b Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 25 Nov 2021 12:40:35 +0100
Subject: [PATCH 11/70] Replace Calendar buttons scenario with Messenger
 buttons scenario, add Tooltip scenario and correct some wording

---
 .../Accordion.stories.tsx                     |   4 +-
 .../AccessibilityScenarios/Button.stories.tsx | 100 ++++++++++++++++--
 .../ListOfScenarios.stories.mdx               |  14 ++-
 .../AccessibilityScenarios/Menu.stories.tsx   |   4 +-
 .../Popover.stories.tsx                       |   4 +-
 .../Tooltip.stories.tsx                       |  32 ++++++
 6 files changed, 139 insertions(+), 19 deletions(-)
 create mode 100644 packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
index aa485c3537b13..c2ab231f16eaa 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
@@ -14,7 +14,7 @@ import { Scenario } from './utils';
 
 export const SimpleFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
   return (
-    <Scenario pageTitle="Simple Form Accordion">
+    <Scenario pageTitle="Simple form accordion">
       <Accordion defaultOpenItems="personalDetails">
         <AccordionItem value="personalDetails">
           <AccordionHeader>Personal details</AccordionHeader>
@@ -63,6 +63,6 @@ export const SimpleFormAccordionAccessibilityScenario: React.FunctionComponent =
 };
 
 export default {
-  title: 'Accessibility Scenarios / Simple Form Accordion',
+  title: 'Accessibility Scenarios / Simple form accordion',
   id: 'accordion-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
index 4090b961f9135..44d98297a9458 100644
--- a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
@@ -6,25 +6,105 @@ import * as React from 'react';
 import { Button } from '@fluentui/react-button';
 import { Scenario } from './utils';
 
-export const CalendarButtonsAccessibilityScenario: React.FunctionComponent = () => {
-  const [statusText, setStatusText] = React.useState('Not saved.');
-  const onSaveButtonClick = () => {
-    setStatusText('The event has been saved.');
+export const MessengerButtonsAccessibilityScenario: React.FunctionComponent = () => {
+  const [sendButtonDisabled, setSendButtonDisabled] = React.useState<boolean | undefined>(true);
+  const [deleteButtonDisabled, setDeleteButtonDisabled] = React.useState<boolean | undefined>(true);
+  const [increaseFontButtonDisabled, setIncreaseFontButtonDisabled] = React.useState<boolean | undefined>(undefined);
+  const [decreaseFontButtonDisabled, setDecreaseFontButtonDisabled] = React.useState<boolean | undefined>(true);
+  const [fontSizeIndex, setFontSizeIndex] = React.useState(0);
+  const [message, setMessage] = React.useState('');
+  const [statusText, setStatusText] = React.useState('');
+
+  const increaseFontButtonRef = React.useRef<HTMLButtonElement>(null);
+  const decreaseFontButtonRef = React.useRef<HTMLButtonElement>(null);
+
+  const possibleFontSizes = ['100%', '140%', '180%'];
+  const messageStyle = {
+    fontSize: possibleFontSizes[fontSizeIndex],
+  };
+
+  const resetMessage = () => {
+    setMessage('');
+    setSendButtonDisabled(true);
+    setDeleteButtonDisabled(true);
+  };
+
+  const onSendButtonClick = () => {
+    resetMessage();
+    setStatusText('Message has been sent.');
+  };
+  const onDeleteButtonClick = () => {
+    resetMessage();
+  };
+  const onIncreaseFontButtonClick = () => {
+    if (fontSizeIndex < possibleFontSizes.length - 1) {
+      if (fontSizeIndex === possibleFontSizes.length - 2) {
+        setIncreaseFontButtonDisabled(true);
+        decreaseFontButtonRef.current!.focus();
+      } else if (fontSizeIndex === 0) {
+        setDecreaseFontButtonDisabled(undefined);
+      }
+      setFontSizeIndex(fontSizeIndex + 1);
+    }
+  };
+  const onDecreaseFontButtonClick = () => {
+    if (fontSizeIndex > 0) {
+      if (fontSizeIndex === possibleFontSizes.length - 1) {
+        setIncreaseFontButtonDisabled(undefined);
+      } else if (fontSizeIndex === 1) {
+        setDecreaseFontButtonDisabled(true);
+        increaseFontButtonRef.current!.focus();
+      }
+      setFontSizeIndex(fontSizeIndex - 1);
+    }
+  };
+  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);
   };
 
   return (
-    <Scenario pageTitle="Calendar Buttons">
-      <Button onClick={onSaveButtonClick}>Save event</Button>
-      <Button disabled>Delete event</Button>
-      <Button disabledFocusable>Show upcoming events</Button>
+    <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>
-        Event status: <span aria-live="polite">{statusText}</span>
+        <span aria-live="polite">{statusText}</span>
       </p>
     </Scenario>
   );
 };
 
 export default {
-  title: 'Accessibility Scenarios / Calendar Buttons',
+  title: 'Accessibility Scenarios / Messenger buttons',
   id: 'button-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index db0f91c0813b1..07611932e092b 100644
--- a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -9,16 +9,24 @@ Accessibility scenarios are used to validate accessibility of components and dem
 
 ## Component: Accordion
 
-- <FullscreenLink content="Accordion / Simple Form" parent="accordion-accessibility-scenario" story="simple-form" />
+- <FullscreenLink content="Accordion / Simple form" parent="accordion-accessibility-scenario" story="simple-form" />
 
 ## Component: Button
 
-- <FullscreenLink content="Button / Calendar Buttons" parent="button-accessibility-scenario" story="calendar-buttons" />
+- <FullscreenLink content="Button / Messenger" parent="button-accessibility-scenario" story="messenger-buttons" />
 
 ## Component: Menu
 
-- <FullscreenLink content="Menu / Profile Menu" parent="menu-accessibility-scenario" story="profile-menu" />
+- <FullscreenLink content="Menu / Profile menu" parent="menu-accessibility-scenario" story="profile-menu" />
 
 ## Component: Popover
 
 - <FullscreenLink content="Popover / Add people" parent="popover-accessibility-scenario" story="add-people" />
+
+## Component: Tooltip
+
+- <FullscreenLink
+    content="Tooltip / Buttons with tooltip"
+    parent="tooltip-accessibility-scenario"
+    story="buttons-with-tooltip"
+  />
diff --git a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
index 81a6c5988c85f..3287f3e4458dd 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
@@ -73,7 +73,7 @@ export const ProfileMenuAccessibilityScenario: React.FunctionComponent = () => {
   };
 
   return (
-    <Scenario pageTitle="Profile Menu">
+    <Scenario pageTitle="Profile menu">
       <Menu>
         <MenuTrigger>
           <Button>Profile</Button>
@@ -107,6 +107,6 @@ export const ProfileMenuAccessibilityScenario: React.FunctionComponent = () => {
 };
 
 export default {
-  title: 'Accessibility Scenarios / Profile Menu',
+  title: 'Accessibility Scenarios / Profile menu',
   id: 'menu-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
index d989d1941685f..80af1e4c9ad70 100644
--- a/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
@@ -38,7 +38,7 @@ export const AddPeoplePopoverAccessibilityScenario: React.FunctionComponent = ()
   const [popoverOpened, setPopoverOpened] = React.useState(false);
 
   return (
-    <Scenario pageTitle="Add People Popover">
+    <Scenario pageTitle="Add people popover">
       <Popover
         open={popoverOpened}
         onOpenChange={(event, data) => {
@@ -59,6 +59,6 @@ export const AddPeoplePopoverAccessibilityScenario: React.FunctionComponent = ()
 };
 
 export default {
-  title: 'Accessibility Scenarios / Add people Popover',
+  title: 'Accessibility Scenarios / Add people popover',
   id: 'popover-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
new file mode 100644
index 0000000000000..462f4c99f540d
--- /dev/null
+++ b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Button } from '@fluentui/react-button';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Tooltip } from '@fluentui/react-tooltip';
+
+import { Scenario } from './utils';
+
+export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent = () => {
+  return (
+    <Scenario pageTitle="Buttons with tooltip">
+      <Tooltip content="Tooltip as a replacement label" triggerAriaAttribute="label">
+        <button>First</button>
+      </Tooltip>
+
+      <Tooltip content="Tooltip as a description" triggerAriaAttribute="describedby">
+        <button>Second</button>
+      </Tooltip>
+    </Scenario>
+  );
+};
+
+export default {
+  title: 'Accessibility Scenarios/ Buttons with tooltip',
+  id: 'tooltip-accessibility-scenario',
+};

From c0676e76c164a3ad1b025392d935204d2f4c4245 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 25 Nov 2021 18:53:49 +0100
Subject: [PATCH 12/70] Add ToggleButton component scenario and replace button
 element with Button component in Tooltip scenario

---
 .../ListOfScenarios.stories.mdx               | 14 ++++--
 .../ToggleButton.stories.tsx                  | 45 +++++++++++++++++++
 .../Tooltip.stories.tsx                       |  4 +-
 3 files changed, 58 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx

diff --git a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index 07611932e092b..93e543fee27fa 100644
--- a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -9,20 +9,28 @@ Accessibility scenarios are used to validate accessibility of components and dem
 
 ## Component: Accordion
 
-- <FullscreenLink content="Accordion / Simple form" parent="accordion-accessibility-scenario" story="simple-form" />
+- <FullscreenLink content="Accordion / Simple Form" parent="accordion-accessibility-scenario" story="simple-form" />
 
 ## Component: Button
 
-- <FullscreenLink content="Button / Messenger" parent="button-accessibility-scenario" story="messenger-buttons" />
+- <FullscreenLink content="Button / Calendar Buttons" parent="button-accessibility-scenario" story="calendar-buttons" />
 
 ## Component: Menu
 
-- <FullscreenLink content="Menu / Profile menu" parent="menu-accessibility-scenario" story="profile-menu" />
+- <FullscreenLink content="Menu / Profile Menu" parent="menu-accessibility-scenario" story="profile-menu" />
 
 ## Component: Popover
 
 - <FullscreenLink content="Popover / Add people" parent="popover-accessibility-scenario" story="add-people" />
 
+## Component: ToggleButton
+
+- <FullscreenLink
+    content="ToggleButton / Device controls"
+    parent="toggle-button-accessibility-scenario"
+    story="device-controls"
+  />
+
 ## Component: Tooltip
 
 - <FullscreenLink
diff --git a/packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx b/packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx
new file mode 100644
index 0000000000000..99777aaac0e26
--- /dev/null
+++ b/packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { ToggleButton } from '@fluentui/react-button';
+
+import { Scenario } from './utils';
+
+export const DeviceControlsToggleButtonsAccessibilityScenario: React.FunctionComponent = () => {
+  const [hotspotButtonDisabled, setHotspotButtonDisabled] = React.useState<boolean | undefined>(true);
+  const [wiFiButtonPressed, setWiFiButtonPressed] = React.useState(false);
+  const [hotspotButtonPressed, setHotspotButtonPressed] = React.useState(false);
+
+  const onWiFiButtonClick = (event: React.MouseEvent) => {
+    setHotspotButtonDisabled(hotspotButtonDisabled ? undefined : true);
+    if (wiFiButtonPressed) {
+      setHotspotButtonPressed(false);
+    }
+    setWiFiButtonPressed(!wiFiButtonPressed);
+  };
+
+  const onHotspotButtonClick = () => {
+    setHotspotButtonPressed(!hotspotButtonPressed);
+  };
+
+  return (
+    <Scenario pageTitle="Device controls toggle buttons">
+      <ToggleButton onClick={onWiFiButtonClick}>Wi-Fi</ToggleButton>
+      <ToggleButton
+        checked={hotspotButtonPressed}
+        disabledFocusable={hotspotButtonDisabled}
+        onClick={onHotspotButtonClick}
+      >
+        Hotspot
+      </ToggleButton>
+      <ToggleButton>Bluetooth</ToggleButton>
+    </Scenario>
+  );
+};
+
+export default {
+  title: 'Accessibility Scenarios/ Device controls toggle buttons',
+  id: 'toggle-button-accessibility-scenario',
+};
diff --git a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
index 462f4c99f540d..55109109d151d 100644
--- a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -16,11 +16,11 @@ export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent =
   return (
     <Scenario pageTitle="Buttons with tooltip">
       <Tooltip content="Tooltip as a replacement label" triggerAriaAttribute="label">
-        <button>First</button>
+        <Button>First</Button>
       </Tooltip>
 
       <Tooltip content="Tooltip as a description" triggerAriaAttribute="describedby">
-        <button>Second</button>
+        <Button>Second</Button>
       </Tooltip>
     </Scenario>
   );

From 8ad4bca1c3ef1b2b7a12c9bc8bd7606fc9465d5e Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 2 Dec 2021 13:50:12 +0100
Subject: [PATCH 13/70] Replace calendar scenario link with messenger scenario
 link and grammar changes

---
 .../src/AccessibilityScenarios/ListOfScenarios.stories.mdx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index 93e543fee27fa..c6b12d04c7af1 100644
--- a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -9,15 +9,15 @@ Accessibility scenarios are used to validate accessibility of components and dem
 
 ## Component: Accordion
 
-- <FullscreenLink content="Accordion / Simple Form" parent="accordion-accessibility-scenario" story="simple-form" />
+- <FullscreenLink content="Accordion / Simple form" parent="accordion-accessibility-scenario" story="simple-form" />
 
 ## Component: Button
 
-- <FullscreenLink content="Button / Calendar Buttons" parent="button-accessibility-scenario" story="calendar-buttons" />
+- <FullscreenLink content="Button / Messenger" parent="button-accessibility-scenario" story="messenger-buttons" />
 
 ## Component: Menu
 
-- <FullscreenLink content="Menu / Profile Menu" parent="menu-accessibility-scenario" story="profile-menu" />
+- <FullscreenLink content="Menu / Profile menu" parent="menu-accessibility-scenario" story="profile-menu" />
 
 ## Component: Popover
 

From 2ef8dd415507d3d376e42d377f31eeeb406ab472 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 2 Dec 2021 20:12:06 +0100
Subject: [PATCH 14/70] Add Link component scenario, and small changes in
 Accordion

---
 .../Accordion.stories.tsx                     | 12 ++---
 .../AccessibilityScenarios/Link.stories.tsx   | 52 +++++++++++++++++++
 .../ListOfScenarios.stories.mdx               |  6 ++-
 3 files changed, 63 insertions(+), 7 deletions(-)
 create mode 100644 packages/react-components/src/AccessibilityScenarios/Link.stories.tsx

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
index c2ab231f16eaa..1795345a3f94d 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
@@ -12,12 +12,12 @@ import { Label } from '@fluentui/react-label';
 
 import { Scenario } from './utils';
 
-export const SimpleFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
+export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
   return (
-    <Scenario pageTitle="Simple form accordion">
-      <Accordion defaultOpenItems="personalDetails">
-        <AccordionItem value="personalDetails">
-          <AccordionHeader>Personal details</AccordionHeader>
+    <Scenario pageTitle="Personal form accordion">
+      <Accordion defaultOpenItems="basicInfo">
+        <AccordionItem value="basicInfo">
+          <AccordionHeader>Basic information</AccordionHeader>
           <AccordionPanel>
             <Label htmlFor="name">Name:</Label>
             <input type="text" id="name" name="name" />
@@ -63,6 +63,6 @@ export const SimpleFormAccordionAccessibilityScenario: React.FunctionComponent =
 };
 
 export default {
-  title: 'Accessibility Scenarios / Simple form accordion',
+  title: 'Accessibility Scenarios / Personal form accordion',
   id: 'accordion-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Link.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Link.stories.tsx
new file mode 100644
index 0000000000000..27c8946dd72fe
--- /dev/null
+++ b/packages/react-components/src/AccessibilityScenarios/Link.stories.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Link } from '@fluentui/react-link';
+
+import { Scenario } from './utils';
+
+export const SiteNavigationAccessibilityScenario: React.FunctionComponent = () => {
+  return (
+    <Scenario pageTitle="Site navigation links">
+      <ul>
+        <li>
+          <Link href="https://www.microsoft.com" target="_blank">
+            Microsoft
+          </Link>
+        </li>
+        <li>
+          <Link href="https://www.office.com" target="_blank">
+            Microsoft Office
+          </Link>
+        </li>
+        <li>
+          <Link href="https://www.github.com" target="_blank">
+            GitHub
+          </Link>
+        </li>
+        <li>
+          <Link href="https://www.linkedin.com" target="_blank">
+            LinkedIn
+          </Link>
+        </li>
+        <li>
+          <Link href="https://www.skype.com" target="_blank" disabled>
+            Link can be disabled
+          </Link>
+        </li>
+        <li>
+          <Link href="https://www.bing.com" target="_blank" disabledFocusable>
+            Link can be disabled but focusable
+          </Link>
+        </li>
+      </ul>
+    </Scenario>
+  );
+};
+
+export default {
+  title: 'Accessibility Scenarios/ Site navigation links',
+  id: 'link-accessibility-scenario',
+};
diff --git a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index c6b12d04c7af1..bcf0579f26f86 100644
--- a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -9,12 +9,16 @@ Accessibility scenarios are used to validate accessibility of components and dem
 
 ## Component: Accordion
 
-- <FullscreenLink content="Accordion / Simple form" parent="accordion-accessibility-scenario" story="simple-form" />
+- <FullscreenLink content="Accordion / Personal form" parent="accordion-accessibility-scenario" story="personal-form" />
 
 ## Component: Button
 
 - <FullscreenLink content="Button / Messenger" parent="button-accessibility-scenario" story="messenger-buttons" />
 
+## Component: Link
+
+- <FullscreenLink content="Link / Site navigation" parent="link-accessibility-scenario" story="site-navigation" />
+
 ## Component: Menu
 
 - <FullscreenLink content="Menu / Profile menu" parent="menu-accessibility-scenario" story="profile-menu" />

From 5858cc2a63090cbb96f99744e3388319f87ca8ed Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 2 Dec 2021 21:53:32 +0100
Subject: [PATCH 15/70] Add beta version of SplitButton scenario

---
 .../ListOfScenarios.stories.mdx               |  8 ++++
 .../AccessibilityScenarios/Menu.stories.tsx   |  9 ++++
 .../SplitButton.stories.tsx                   | 44 +++++++++++++++++++
 3 files changed, 61 insertions(+)
 create mode 100644 packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx

diff --git a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index bcf0579f26f86..10c360aea6124 100644
--- a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -27,6 +27,14 @@ Accessibility scenarios are used to validate accessibility of components and dem
 
 - <FullscreenLink content="Popover / Add people" parent="popover-accessibility-scenario" story="add-people" />
 
+## Component: SplitButton
+
+- <FullscreenLink
+    content="SplitButton / Event remindar"
+    parent="split-button-accessibility-scenario"
+    story="event-reminder"
+  />
+
 ## Component: ToggleButton
 
 - <FullscreenLink
diff --git a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
index bf73f286dce23..38e758939fce2 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
@@ -1,5 +1,13 @@
 import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import { Button } from '@fluentui/react-button';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import {
   Menu,
   MenuTrigger,
@@ -11,6 +19,7 @@ import {
   MenuItemCheckbox,
   MenuItemRadio,
 } from '@fluentui/react-menu';
+
 import { Scenario } from './utils';
 
 interface StatusSubmenuProps {
diff --git a/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
new file mode 100644
index 0000000000000..8f522622a7a9b
--- /dev/null
+++ b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Menu, MenuTrigger, MenuList, MenuPopover, MenuItem } from '@fluentui/react-menu';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { MenuButtonProps } from '@fluentui/react-menubutton';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { SplitButton } from '@fluentui/react-button';
+
+import { Scenario } from './utils';
+
+export const EventReminderAccessibilityScenario: React.FunctionComponent = () => {
+  return (
+    <Scenario pageTitle="Event reminder split button">
+      <p>Your meeting starts in 10 minutes.</p>
+      <Menu positioning="below-end">
+        <MenuTrigger>
+          {(triggerProps: MenuButtonProps) => <SplitButton menuButton={triggerProps} primaryActionButton="Dismiss" />}
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>Postpone for 10 minutes</MenuItem>
+            <MenuItem>Postpone for 1 hour</MenuItem>
+            <MenuItem>Postpone until tomorrow</MenuItem>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Scenario>
+  );
+};
+
+export default {
+  title: 'Accessibility Scenarios/ Event reminder split button',
+  id: 'split-button-accessibility-scenario',
+};

From 1192d34bdda8d523eef7de5b01c9c8f24d40d369 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Sat, 4 Dec 2021 12:40:53 +0100
Subject: [PATCH 16/70] Make SplitButton scenario working

---
 .../SplitButton.stories.tsx                   | 82 +++++++++++++++----
 1 file changed, 67 insertions(+), 15 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
index 8f522622a7a9b..ff081290874de 100644
--- a/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
@@ -13,27 +13,79 @@ import { MenuButtonProps } from '@fluentui/react-menubutton';
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { SplitButton } from '@fluentui/react-button';
+import { Button, SplitButton } from '@fluentui/react-button';
 
 import { Scenario } from './utils';
 
 export const EventReminderAccessibilityScenario: React.FunctionComponent = () => {
+  const [statusText, setStatusText] = React.useState<string | undefined>(undefined);
+  const statusRef = React.useRef<HTMLParagraphElement>(null);
+
+  const focusStatus = () => {
+    statusRef.current!.focus();
+  };
+
+  const onDismissButtonClick = () => {
+    setStatusText('The reminder has been dismissed.');
+    focusStatus();
+  };
+
+  const showPostponeText = (duration: string) => {
+    const postponeMessages: Record<string, string> = {
+      tenMinutes: 'for 10 minutes',
+      oneHour: 'for 1 hour',
+      tomorrow: 'until tomorrow',
+    };
+    setStatusText(`The event has been postponed ${postponeMessages[duration]}.`);
+    focusStatus();
+  };
+
   return (
     <Scenario pageTitle="Event reminder split button">
-      <p>Your meeting starts in 10 minutes.</p>
-      <Menu positioning="below-end">
-        <MenuTrigger>
-          {(triggerProps: MenuButtonProps) => <SplitButton menuButton={triggerProps} primaryActionButton="Dismiss" />}
-        </MenuTrigger>
-
-        <MenuPopover>
-          <MenuList>
-            <MenuItem>Postpone for 10 minutes</MenuItem>
-            <MenuItem>Postpone for 1 hour</MenuItem>
-            <MenuItem>Postpone until tomorrow</MenuItem>
-          </MenuList>
-        </MenuPopover>
-      </Menu>
+      {!statusText && (
+        <>
+          <p>Your meeting starts in 10 minutes.</p>
+          <Menu positioning="below-end">
+            <MenuTrigger>
+              {(triggerProps: MenuButtonProps) => (
+                <SplitButton
+                  menuButton={triggerProps}
+                  primaryActionButton={{ children: 'Dismiss', onClick: onDismissButtonClick }}
+                />
+              )}
+            </MenuTrigger>
+
+            <MenuPopover>
+              <MenuList>
+                <MenuItem
+                  onClick={() => {
+                    showPostponeText('tenMinutes');
+                  }}
+                >
+                  Postpone for 10 minutes
+                </MenuItem>
+                <MenuItem
+                  onClick={() => {
+                    showPostponeText('oneHour');
+                  }}
+                >
+                  Postpone for 1 hour
+                </MenuItem>
+                <MenuItem
+                  onClick={() => {
+                    showPostponeText('tomorrow');
+                  }}
+                >
+                  Postpone until tomorrow
+                </MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+        </>
+      )}
+      <div ref={statusRef} tabIndex={0}>
+        {statusText && <p>{statusText}</p>}
+      </div>
     </Scenario>
   );
 };

From a4861c393e72108e23878e965e56744e110b493d Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Sat, 4 Dec 2021 13:06:45 +0100
Subject: [PATCH 17/70] Change label for menu button within SplitButton

---
 .../SplitButton.stories.tsx                      | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
index ff081290874de..0f05519aade77 100644
--- a/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
@@ -47,12 +47,16 @@ export const EventReminderAccessibilityScenario: React.FunctionComponent = () =>
           <p>Your meeting starts in 10 minutes.</p>
           <Menu positioning="below-end">
             <MenuTrigger>
-              {(triggerProps: MenuButtonProps) => (
-                <SplitButton
-                  menuButton={triggerProps}
-                  primaryActionButton={{ children: 'Dismiss', onClick: onDismissButtonClick }}
-                />
-              )}
+              {(triggerProps: MenuButtonProps) => {
+                triggerProps['aria-label'] = 'Postpone';
+
+                return (
+                  <SplitButton
+                    menuButton={triggerProps}
+                    primaryActionButton={{ children: 'Dismiss', onClick: onDismissButtonClick }}
+                  />
+                );
+              }}
             </MenuTrigger>
 
             <MenuPopover>

From 9ef8fdcfe529743905461e10cb4d43a55e9ccc5c Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 8 Dec 2021 09:49:43 +0100
Subject: [PATCH 18/70] Replace Button with MenuButton in Menu scenario

---
 .../src/AccessibilityScenarios/Menu.stories.tsx             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
index 38e758939fce2..728ec7508c653 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-
+b;
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { Button } from '@fluentui/react-button';
+import { MenuButton } from '@fluentui/react-button';
 
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -78,7 +78,7 @@ export const ProfileMenuAccessibilityScenario: React.FunctionComponent = () => {
     <Scenario pageTitle="Profile menu">
       <Menu>
         <MenuTrigger>
-          <Button>Profile</Button>
+          <MenuButton>Profile</MenuButton>
         </MenuTrigger>
 
         <MenuPopover>

From 98b93cb5afa5e19389435b797ad60b433744c965 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 8 Dec 2021 23:08:36 +0100
Subject: [PATCH 19/70] Fix error in Menu scenario

---
 .../src/AccessibilityScenarios/Menu.stories.tsx                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
index 728ec7508c653..458c63e8bce3c 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-b;
+
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

From d7e8650a81f47e96449d38f4470219085c6b30c7 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 16 Dec 2021 10:14:30 +0100
Subject: [PATCH 20/70] Refactor aria-label for menu button within split button

---
 .../src/AccessibilityScenarios/SplitButton.stories.tsx   | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
index 0f05519aade77..debf9a396356e 100644
--- a/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
@@ -47,12 +47,15 @@ export const EventReminderAccessibilityScenario: React.FunctionComponent = () =>
           <p>Your meeting starts in 10 minutes.</p>
           <Menu positioning="below-end">
             <MenuTrigger>
-              {(triggerProps: MenuButtonProps) => {
-                triggerProps['aria-label'] = 'Postpone';
+              {(menuButtonProps: MenuButtonProps) => {
+                const extendedMenuButtonProps = {
+                  ...menuButtonProps,
+                  'aria-label': 'Postpone',
+                };
 
                 return (
                   <SplitButton
-                    menuButton={triggerProps}
+                    menuButton={extendedMenuButtonProps}
                     primaryActionButton={{ children: 'Dismiss', onClick: onDismissButtonClick }}
                   />
                 );

From 97dba3f52d3e0b2aef681b87c82ec5b67154a7f2 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 16 Dec 2021 10:44:32 +0100
Subject: [PATCH 21/70] Extract Postpone menu item into separate button

---
 .../SplitButton.stories.tsx                       | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
index debf9a396356e..1fdffedff7abc 100644
--- a/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
@@ -33,6 +33,7 @@ export const EventReminderAccessibilityScenario: React.FunctionComponent = () =>
   const showPostponeText = (duration: string) => {
     const postponeMessages: Record<string, string> = {
       tenMinutes: 'for 10 minutes',
+      thirtyMinutes: 'for 30 minutes',
       oneHour: 'for 1 hour',
       tomorrow: 'until tomorrow',
     };
@@ -45,18 +46,24 @@ export const EventReminderAccessibilityScenario: React.FunctionComponent = () =>
       {!statusText && (
         <>
           <p>Your meeting starts in 10 minutes.</p>
+          <Button onClick={onDismissButtonClick}>Dismiss</Button>
           <Menu positioning="below-end">
             <MenuTrigger>
               {(menuButtonProps: MenuButtonProps) => {
                 const extendedMenuButtonProps = {
                   ...menuButtonProps,
-                  'aria-label': 'Postpone',
+                  'aria-label': 'Postpone for later',
                 };
 
                 return (
                   <SplitButton
                     menuButton={extendedMenuButtonProps}
-                    primaryActionButton={{ children: 'Dismiss', onClick: onDismissButtonClick }}
+                    primaryActionButton={{
+                      children: 'Postpone for 10 minutes',
+                      onClick: () => {
+                        showPostponeText('tenMinutes');
+                      },
+                    }}
                   />
                 );
               }}
@@ -66,10 +73,10 @@ export const EventReminderAccessibilityScenario: React.FunctionComponent = () =>
               <MenuList>
                 <MenuItem
                   onClick={() => {
-                    showPostponeText('tenMinutes');
+                    showPostponeText('thirtyMinutes');
                   }}
                 >
-                  Postpone for 10 minutes
+                  Postpone for 30 minutes
                 </MenuItem>
                 <MenuItem
                   onClick={() => {

From 6e4f0b67c12a284b9ed8191d3510eeae204d1480 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 16 Dec 2021 11:45:48 +0100
Subject: [PATCH 22/70] Add tooltip button without triggerAriaAttribute prop

---
 .../src/AccessibilityScenarios/Tooltip.stories.tsx        | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
index 55109109d151d..69324b50b9077 100644
--- a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -15,13 +15,17 @@ import { Scenario } from './utils';
 export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="Buttons with tooltip">
-      <Tooltip content="Tooltip as a replacement label" triggerAriaAttribute="label">
+      <Tooltip content="Default tooltip behavior">
         <Button>First</Button>
       </Tooltip>
 
-      <Tooltip content="Tooltip as a description" triggerAriaAttribute="describedby">
+      <Tooltip content="Tooltip as a replacement label" triggerAriaAttribute="label">
         <Button>Second</Button>
       </Tooltip>
+
+      <Tooltip content="Tooltip as a description" triggerAriaAttribute="describedby">
+        <Button>Third</Button>
+      </Tooltip>
     </Scenario>
   );
 };

From 71d63491a2ee26bddd4e7f50f77d47cd78350611 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Tue, 21 Dec 2021 12:36:39 +0100
Subject: [PATCH 23/70] Add other gender radio option

---
 .../src/AccessibilityScenarios/Accordion.stories.tsx          | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
index 1795345a3f94d..94cd37049a932 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
@@ -23,11 +23,13 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
             <input type="text" id="name" name="name" />
             <Label htmlFor="email">Email:</Label>
             <input type="text" id="email" name="email" />
-            <div role="group" aria-label="Gender">
+            <div role="radiogroup" aria-label="Gender">
               <input type="radio" id="male" name="gender" value="male" />
               <Label htmlFor="male">male</Label>
               <input type="radio" id="female" name="gender" value="female" />
               <Label htmlFor="female">female</Label>
+              <input type="radio" id="otherGender" name="gender" value="other" />
+              <Label htmlFor="otherGender">other</Label>
             </div>
           </AccordionPanel>
         </AccordionItem>

From b2cee2cc1c8db5f0bd46b64215f9f781c38031d0 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Tue, 21 Dec 2021 13:20:49 +0100
Subject: [PATCH 24/70] Rename disabled links and add nav region

---
 .../AccessibilityScenarios/Link.stories.tsx   | 66 ++++++++++---------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Link.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Link.stories.tsx
index 27c8946dd72fe..fcb1644c9fcd5 100644
--- a/packages/react-components/src/AccessibilityScenarios/Link.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Link.stories.tsx
@@ -10,38 +10,40 @@ import { Scenario } from './utils';
 export const SiteNavigationAccessibilityScenario: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="Site navigation links">
-      <ul>
-        <li>
-          <Link href="https://www.microsoft.com" target="_blank">
-            Microsoft
-          </Link>
-        </li>
-        <li>
-          <Link href="https://www.office.com" target="_blank">
-            Microsoft Office
-          </Link>
-        </li>
-        <li>
-          <Link href="https://www.github.com" target="_blank">
-            GitHub
-          </Link>
-        </li>
-        <li>
-          <Link href="https://www.linkedin.com" target="_blank">
-            LinkedIn
-          </Link>
-        </li>
-        <li>
-          <Link href="https://www.skype.com" target="_blank" disabled>
-            Link can be disabled
-          </Link>
-        </li>
-        <li>
-          <Link href="https://www.bing.com" target="_blank" disabledFocusable>
-            Link can be disabled but focusable
-          </Link>
-        </li>
-      </ul>
+      <nav aria-label="Main menu">
+        <ul>
+          <li>
+            <Link href="https://www.microsoft.com" target="_blank">
+              Microsoft
+            </Link>
+          </li>
+          <li>
+            <Link href="https://www.office.com" target="_blank">
+              Microsoft Office
+            </Link>
+          </li>
+          <li>
+            <Link href="https://www.github.com" target="_blank">
+              GitHub
+            </Link>
+          </li>
+          <li>
+            <Link href="https://www.linkedin.com" target="_blank">
+              LinkedIn
+            </Link>
+          </li>
+          <li>
+            <Link href="https://www.skype.com" target="_blank" disabled>
+              Skype
+            </Link>
+          </li>
+          <li>
+            <Link href="https://www.bing.com" target="_blank" disabledFocusable>
+              Bing
+            </Link>
+          </li>
+        </ul>
+      </nav>
     </Scenario>
   );
 };

From bff21cf955d49fb516a6c81c28c44b54b97db213 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Tue, 21 Dec 2021 13:48:00 +0100
Subject: [PATCH 25/70] Add heading and description for toggle buttons

---
 .../src/AccessibilityScenarios/ToggleButton.stories.tsx         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx b/packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx
index 99777aaac0e26..a6b3fbf802e5e 100644
--- a/packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx
@@ -26,6 +26,8 @@ export const DeviceControlsToggleButtonsAccessibilityScenario: React.FunctionCom
 
   return (
     <Scenario pageTitle="Device controls toggle buttons">
+      <h1>Device controls</h1>
+      <p>This is a basic control panel for your device</p>
       <ToggleButton onClick={onWiFiButtonClick}>Wi-Fi</ToggleButton>
       <ToggleButton
         checked={hotspotButtonPressed}

From d7a5eea8638c092a5fade1857c38477a3b1942e9 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 22 Dec 2021 11:03:07 +0100
Subject: [PATCH 26/70] Add FAQ accordion scenario and change radios in
 personal form accordion scenario

---
 ...ion.stories.tsx => Accordion1.stories.tsx} | 19 +++---
 .../Accordion2.stories.tsx                    | 65 +++++++++++++++++++
 .../ListOfScenarios.stories.mdx               |  7 +-
 3 files changed, 81 insertions(+), 10 deletions(-)
 rename packages/react-components/src/AccessibilityScenarios/{Accordion.stories.tsx => Accordion1.stories.tsx} (82%)
 create mode 100644 packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
similarity index 82%
rename from packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
rename to packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
index 94cd37049a932..cee6348a66a55 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
@@ -23,14 +23,15 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
             <input type="text" id="name" name="name" />
             <Label htmlFor="email">Email:</Label>
             <input type="text" id="email" name="email" />
-            <div role="radiogroup" aria-label="Gender">
-              <input type="radio" id="male" name="gender" value="male" />
-              <Label htmlFor="male">male</Label>
-              <input type="radio" id="female" name="gender" value="female" />
-              <Label htmlFor="female">female</Label>
-              <input type="radio" id="otherGender" name="gender" value="other" />
-              <Label htmlFor="otherGender">other</Label>
-            </div>
+            <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">
@@ -66,5 +67,5 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
 
 export default {
   title: 'Accessibility Scenarios / Personal form accordion',
-  id: 'accordion-accessibility-scenario',
+  id: 'accordion1-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
new file mode 100644
index 0000000000000..e4a84e679af76
--- /dev/null
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
@@ -0,0 +1,65 @@
+import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Label } from '@fluentui/react-label';
+
+import { Scenario } from './utils';
+
+export const FAQAccordionAccessibilityScenario: React.FunctionComponent = () => {
+  return (
+    <Scenario pageTitle="FAQ accordion">
+      <Accordion multiple>
+        <AccordionItem value="faq1">
+          <AccordionHeader>What's the difference between 32-bit and 64-bit versions of Windows?</AccordionHeader>
+          <AccordionPanel>
+            <p>
+              The terms 32-bit and 64-bit refer to the way a computer's processor (also called a CPU) handles
+              information. The 64-bit version of Windows handles large amounts of random access memory (RAM) more
+              effectively than a 32-bit system. Not all devices can run the 64-bit versions of Windows.
+            </p>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="faq2">
+          <AccordionHeader>How do I tell if my computer can run a 64-bit version of Windows?</AccordionHeader>
+          <AccordionPanel>
+            <p>If you have a Windows operating system installed, open File Explorer or This PC.</p>
+            <ol>
+              <li>Right click on This PC or Computer in the navigation pane and select Properties.</li>
+              <li>
+                In the System information screen, find the System type entry. This will indicate what type of processor
+                your device has.
+              </li>
+            </ol>
+            <p>
+              If you do not have an operating system installed, you should refer to the documentation that came with the
+              device. Most device and processor manufacturers also provide information regarding processor capabilities
+              on their websites.
+            </p>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem value="faq3">
+          <AccordionHeader>How do I find my Windows product key?</AccordionHeader>
+          <AccordionPanel>
+            <p>
+              The product key is located inside the product packaging, on the receipt or confirmation page for a digital
+              purchase or in a confirmation e-mail that shows you purchased Windows. If you purchased a digital copy
+              from Microsoft Store, you can locate your product key in your Account under Digital Content.
+            </p>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </Scenario>
+  );
+};
+
+export default {
+  title: 'Accessibility Scenarios / FAQ accordion',
+  id: 'accordion2-accessibility-scenario',
+};
diff --git a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index 10c360aea6124..835577f81ac38 100644
--- a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -9,7 +9,12 @@ 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 / Personal form"
+    parent="accordion1-accessibility-scenario"
+    story="personal-form"
+  />
+- <FullscreenLink content="Accordion / FAQ" parent="accordion2-accessibility-scenario" story="faq" />
 
 ## Component: Button
 

From d731e75e496d79c599d4248b9ea63eadd9a8123e Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 22 Dec 2021 11:31:18 +0100
Subject: [PATCH 27/70] Add h1 for accordion scenarios

---
 .../src/AccessibilityScenarios/Accordion1.stories.tsx            | 1 +
 .../src/AccessibilityScenarios/Accordion2.stories.tsx            | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
index cee6348a66a55..056b9d803af7f 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
@@ -15,6 +15,7 @@ import { Scenario } from './utils';
 export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="Personal form accordion">
+      <h1>Personal form</h1>
       <Accordion defaultOpenItems="basicInfo">
         <AccordionItem value="basicInfo">
           <AccordionHeader>Basic information</AccordionHeader>
diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
index e4a84e679af76..4dbdc7d40600f 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
@@ -15,6 +15,7 @@ import { Scenario } from './utils';
 export const FAQAccordionAccessibilityScenario: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="FAQ accordion">
+      <h1>Frequently asked questions about Windows</h1>
       <Accordion multiple>
         <AccordionItem value="faq1">
           <AccordionHeader>What's the difference between 32-bit and 64-bit versions of Windows?</AccordionHeader>

From cbcf7bdd41fe0c9ce3db038495bfc5bf3aa5a5bb Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 22 Dec 2021 22:34:21 +0100
Subject: [PATCH 28/70] Fix lint errors and change Tooltip scenario for more
 real life examples

---
 .../Popover.stories.tsx                       |  4 +--
 .../Tooltip.stories.tsx                       | 32 +++++++++++++++----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
index 80af1e4c9ad70..63d2d192e8055 100644
--- a/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
@@ -12,11 +12,11 @@ import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-popover
 
 import { Scenario } from './utils';
 
-interface IAddPeopleContentProps {
+interface AddPeopleContentProps {
   setPopoverOpened: (state: boolean) => void;
 }
 
-const AddPeopleContent: React.FunctionComponent<IAddPeopleContentProps> = (props: IAddPeopleContentProps) => {
+const AddPeopleContent: React.FunctionComponent<AddPeopleContentProps> = (props: AddPeopleContentProps) => {
   const { setPopoverOpened } = props;
 
   return (
diff --git a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
index 69324b50b9077..ee0445233b888 100644
--- a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -5,26 +5,46 @@ import * as React from 'react';
 // @ts-ignore
 import { Button } from '@fluentui/react-button';
 
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Label } from '@fluentui/react-label';
+
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { Tooltip } from '@fluentui/react-tooltip';
 
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Menu, MenuTrigger, MenuList, MenuPopover, MenuItem } from '@fluentui/react-menu';
+
 import { Scenario } from './utils';
 
 export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent = () => {
+  const [tooltipVisible, setTooltipVisible] = React.useState(false);
+
   return (
     <Scenario pageTitle="Buttons with tooltip">
-      <Tooltip content="Default tooltip behavior">
-        <Button>First</Button>
+      <h2>Tooltip as a password requirements</h2>
+      <Label htmlFor="password">Password</Label>
+      <input type="password" id="password" name="password" />
+      <Tooltip
+        visible={tooltipVisible}
+        content="Password must be at least 8 characters long, contain a capital letter, and a number."
+      >
+        <Button onClick={() => setTooltipVisible(visible => !visible)}>Password requirements</Button>
       </Tooltip>
 
-      <Tooltip content="Tooltip as a replacement label" triggerAriaAttribute="label">
-        <Button>Second</Button>
+      <h2>Tooltips for text formatting icon-only buttons</h2>
+      <Tooltip content="Make text bold" triggerAriaAttribute="label">
+        <Button>Bold</Button>
       </Tooltip>
 
-      <Tooltip content="Tooltip as a description" triggerAriaAttribute="describedby">
-        <Button>Third</Button>
+      <h2>Tooltip as an additional button description</h2>
+      <Tooltip content="App and account settings, status and more" triggerAriaAttribute="describedby">
+        <Button>Settings</Button>
       </Tooltip>
     </Scenario>
   );

From 54aef0929e3124775ab7f5e546981ed4fa200bc5 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 23 Dec 2021 10:21:35 +0100
Subject: [PATCH 29/70] Add icon buttons for Tooltip scenario

---
 .../AccessibilityScenarios/Tooltip.stories.tsx    | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
index ee0445233b888..d6c87729d8d82 100644
--- a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -20,6 +20,11 @@ import { Tooltip } from '@fluentui/react-tooltip';
 // @ts-ignore
 import { Menu, MenuTrigger, MenuList, MenuPopover, MenuItem } from '@fluentui/react-menu';
 
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { TextItalic24Regular, TextUnderline24Regular, TextBold24Regular } from '@fluentui/react-icons';
+
 import { Scenario } from './utils';
 
 export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent = () => {
@@ -39,7 +44,15 @@ export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent =
 
       <h2>Tooltips for text formatting icon-only buttons</h2>
       <Tooltip content="Make text bold" triggerAriaAttribute="label">
-        <Button>Bold</Button>
+        <Button icon={<TextBold24Regular />} />
+      </Tooltip>
+
+      <Tooltip content="Make text underline" triggerAriaAttribute="label">
+        <Button icon={<TextUnderline24Regular />} />
+      </Tooltip>
+
+      <Tooltip content="Make text italic" triggerAriaAttribute="label">
+        <Button icon={<TextItalic24Regular />} />
       </Tooltip>
 
       <h2>Tooltip as an additional button description</h2>

From 9d95202a46db54ee8d93cc1a6421605688db4c33 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 13 Jan 2022 13:55:48 +0100
Subject: [PATCH 30/70] Add x of Y and Submit button to simple form accordion
 scenario

---
 .../AccessibilityScenarios/Accordion1.stories.tsx    | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
index 056b9d803af7f..00a33e005c6d5 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
@@ -10,6 +10,11 @@ import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@flue
 // @ts-ignore
 import { Label } from '@fluentui/react-label';
 
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Button } from '@fluentui/react-button';
+
 import { Scenario } from './utils';
 
 export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
@@ -18,7 +23,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
       <h1>Personal form</h1>
       <Accordion defaultOpenItems="basicInfo">
         <AccordionItem value="basicInfo">
-          <AccordionHeader>Basic information</AccordionHeader>
+          <AccordionHeader>Basic information - 1 of 3</AccordionHeader>
           <AccordionPanel>
             <Label htmlFor="name">Name:</Label>
             <input type="text" id="name" name="name" />
@@ -36,7 +41,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="residence">
-          <AccordionHeader>Residence</AccordionHeader>
+          <AccordionHeader>Residence - 2 of 3</AccordionHeader>
           <AccordionPanel>
             <Label htmlFor="street">Street:</Label>
             <input type="text" id="street" name="street" />
@@ -47,7 +52,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="hobbies">
-          <AccordionHeader>Hobbies</AccordionHeader>
+          <AccordionHeader>Hobbies - 3 of 3</AccordionHeader>
           <AccordionPanel>
             <div role="group" aria-label="Hobbies">
               <input type="checkbox" id="books" name="hobbies" value="books" />
@@ -62,6 +67,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
           </AccordionPanel>
         </AccordionItem>
       </Accordion>
+      <Button>Submit</Button>
     </Scenario>
   );
 };

From 0ac2a8fa6947204a6ccc0e1264d6f06683a83789 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 13 Jan 2022 18:11:27 +0100
Subject: [PATCH 31/70] Add menu with split item scenario

---
 .../ListOfScenarios.stories.mdx               |  7 ++-
 .../{Menu.stories.tsx => Menu1.stories.tsx}   |  2 +-
 .../AccessibilityScenarios/Menu2.stories.tsx  | 54 +++++++++++++++++++
 3 files changed, 61 insertions(+), 2 deletions(-)
 rename packages/react-components/src/AccessibilityScenarios/{Menu.stories.tsx => Menu1.stories.tsx} (98%)
 create mode 100644 packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx

diff --git a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index 835577f81ac38..c379b4565f4e6 100644
--- a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -26,7 +26,12 @@ Accessibility scenarios are used to validate accessibility of components and dem
 
 ## Component: Menu
 
-- <FullscreenLink content="Menu / Profile menu" parent="menu-accessibility-scenario" story="profile-menu" />
+- <FullscreenLink content="Menu / Profile menu" parent="menu1-accessibility-scenario" story="profile-menu" />
+- <FullscreenLink
+    content="Menu / Menu with split item"
+    parent="menu2-accessibility-scenario"
+    story="menu-with-split-item"
+  />
 
 ## Component: Popover
 
diff --git a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu1.stories.tsx
similarity index 98%
rename from packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
rename to packages/react-components/src/AccessibilityScenarios/Menu1.stories.tsx
index 458c63e8bce3c..51659ccebab00 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu1.stories.tsx
@@ -110,5 +110,5 @@ export const ProfileMenuAccessibilityScenario: React.FunctionComponent = () => {
 
 export default {
   title: 'Accessibility Scenarios / Profile menu',
-  id: 'menu-accessibility-scenario',
+  id: 'menu1-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
new file mode 100644
index 0000000000000..5d4d9f9e52621
--- /dev/null
+++ b/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { MenuButton } from '@fluentui/react-button';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Menu, MenuTrigger, MenuList, MenuPopover, MenuItem, MenuSplitGroup } from '@fluentui/react-menu';
+
+import { Scenario } from './utils';
+
+export const MenuWithSplitItemAccessibilityScenario: React.FunctionComponent = () => {
+  return (
+    <Scenario pageTitle="Menu with split item">
+      <Menu>
+        <MenuTrigger>
+          <MenuButton>More actions</MenuButton>
+        </MenuTrigger>
+
+        <MenuPopover>
+          <MenuList>
+            <MenuItem>New </MenuItem>
+            <MenuItem>New Window</MenuItem>
+            <MenuItem>Open Folder</MenuItem>
+            <Menu>
+              <MenuSplitGroup>
+                <MenuItem>Open</MenuItem>
+                <MenuTrigger>
+                  <MenuItem id="nestedTrigger">More open options</MenuItem>
+                </MenuTrigger>
+              </MenuSplitGroup>
+
+              <MenuPopover>
+                <MenuList>
+                  <MenuItem>In browser</MenuItem>
+                  <MenuItem>In desktop app</MenuItem>
+                  <MenuItem>In mobile</MenuItem>
+                </MenuList>
+              </MenuPopover>
+            </Menu>
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Scenario>
+  );
+};
+
+export default {
+  title: 'Accessibility Scenarios / Menu with split item',
+  id: 'menu2-accessibility-scenario',
+};

From c68c2f505c3b8b4c9e81e8f969ed5f9186512018 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 13 Jan 2022 18:22:12 +0100
Subject: [PATCH 32/70] Change menu items in menu with split item scenario

---
 .../src/AccessibilityScenarios/Menu2.stories.tsx               | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
index 5d4d9f9e52621..7c9b7e1a32b7c 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
@@ -22,9 +22,8 @@ export const MenuWithSplitItemAccessibilityScenario: React.FunctionComponent = (
 
         <MenuPopover>
           <MenuList>
-            <MenuItem>New </MenuItem>
             <MenuItem>New Window</MenuItem>
-            <MenuItem>Open Folder</MenuItem>
+            <MenuItem>Create Folder</MenuItem>
             <Menu>
               <MenuSplitGroup>
                 <MenuItem>Open</MenuItem>

From c41c0badeef707f011dd39e51dd41e96e5d83709 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Tue, 18 Jan 2022 14:49:48 +0100
Subject: [PATCH 33/70] Fix visible label in split button in menu secondary
 action

---
 .../src/AccessibilityScenarios/Menu2.stories.tsx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
index 7c9b7e1a32b7c..b0bb08af0ec37 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
@@ -28,7 +28,7 @@ export const MenuWithSplitItemAccessibilityScenario: React.FunctionComponent = (
               <MenuSplitGroup>
                 <MenuItem>Open</MenuItem>
                 <MenuTrigger>
-                  <MenuItem id="nestedTrigger">More open options</MenuItem>
+                  <MenuItem id="nestedTrigger" aria-label="More open options" />
                 </MenuTrigger>
               </MenuSplitGroup>
 

From 4e10fe27cb61f8ece133c8ea50552888c4a07b36 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Tue, 18 Jan 2022 14:57:32 +0100
Subject: [PATCH 34/70] Remove X of Y in Accordion scenario

---
 .../src/AccessibilityScenarios/Accordion1.stories.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
index 00a33e005c6d5..4acfa8ce5cba1 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
@@ -23,7 +23,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
       <h1>Personal form</h1>
       <Accordion defaultOpenItems="basicInfo">
         <AccordionItem value="basicInfo">
-          <AccordionHeader>Basic information - 1 of 3</AccordionHeader>
+          <AccordionHeader>Basic information</AccordionHeader>
           <AccordionPanel>
             <Label htmlFor="name">Name:</Label>
             <input type="text" id="name" name="name" />
@@ -41,7 +41,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="residence">
-          <AccordionHeader>Residence - 2 of 3</AccordionHeader>
+          <AccordionHeader>Residence</AccordionHeader>
           <AccordionPanel>
             <Label htmlFor="street">Street:</Label>
             <input type="text" id="street" name="street" />
@@ -52,7 +52,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="hobbies">
-          <AccordionHeader>Hobbies - 3 of 3</AccordionHeader>
+          <AccordionHeader>Hobbies</AccordionHeader>
           <AccordionPanel>
             <div role="group" aria-label="Hobbies">
               <input type="checkbox" id="books" name="hobbies" value="books" />

From 589d404a64f50a8a4d9027d6306e696ab5c2f7e6 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Tue, 18 Jan 2022 17:15:12 +0100
Subject: [PATCH 35/70] Enable dismiss of tooltip with Escape

---
 .../src/AccessibilityScenarios/Tooltip.stories.tsx         | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
index d6c87729d8d82..f5c1abb60ae17 100644
--- a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -13,7 +13,7 @@ import { Label } from '@fluentui/react-label';
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { Tooltip } from '@fluentui/react-tooltip';
+import { Tooltip, TooltipProps } from '@fluentui/react-tooltip';
 
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -30,12 +30,17 @@ import { Scenario } from './utils';
 export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent = () => {
   const [tooltipVisible, setTooltipVisible] = React.useState(false);
 
+  const onVisibleChange: TooltipProps['onVisibleChange'] = (event, { visible }) => {
+    setTooltipVisible(visible);
+  };
+
   return (
     <Scenario pageTitle="Buttons with tooltip">
       <h2>Tooltip as a password requirements</h2>
       <Label htmlFor="password">Password</Label>
       <input type="password" id="password" name="password" />
       <Tooltip
+        onVisibleChange={onVisibleChange}
         visible={tooltipVisible}
         content="Password must be at least 8 characters long, contain a capital letter, and a number."
       >

From b552a699dd75038c0ca867caba2e5c9fcb75a0ca Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 19 Jan 2022 13:37:00 +0100
Subject: [PATCH 36/70] Move password hint button between password label and
 input field

---
 .../src/AccessibilityScenarios/Tooltip.stories.tsx              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
index f5c1abb60ae17..a55849988759b 100644
--- a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -38,7 +38,6 @@ export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent =
     <Scenario pageTitle="Buttons with tooltip">
       <h2>Tooltip as a password requirements</h2>
       <Label htmlFor="password">Password</Label>
-      <input type="password" id="password" name="password" />
       <Tooltip
         onVisibleChange={onVisibleChange}
         visible={tooltipVisible}
@@ -46,6 +45,7 @@ export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent =
       >
         <Button onClick={() => setTooltipVisible(visible => !visible)}>Password requirements</Button>
       </Tooltip>
+      <input type="password" id="password" name="password" />
 
       <h2>Tooltips for text formatting icon-only buttons</h2>
       <Tooltip content="Make text bold" triggerAriaAttribute="label">

From 9a78db13815d88cc47e6f7106b8b6b4fbceb95fd Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Fri, 21 Jan 2022 21:45:43 +0100
Subject: [PATCH 37/70] Reintroduce X of Y for personal form accordion scenario

---
 .../src/AccessibilityScenarios/Accordion1.stories.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
index 4acfa8ce5cba1..81a29c6d755af 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
@@ -23,7 +23,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
       <h1>Personal form</h1>
       <Accordion defaultOpenItems="basicInfo">
         <AccordionItem value="basicInfo">
-          <AccordionHeader>Basic information</AccordionHeader>
+          <AccordionHeader>Basic information, 1 of 3</AccordionHeader>
           <AccordionPanel>
             <Label htmlFor="name">Name:</Label>
             <input type="text" id="name" name="name" />
@@ -41,7 +41,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="residence">
-          <AccordionHeader>Residence</AccordionHeader>
+          <AccordionHeader>Residence, 2 of 3</AccordionHeader>
           <AccordionPanel>
             <Label htmlFor="street">Street:</Label>
             <input type="text" id="street" name="street" />
@@ -52,7 +52,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="hobbies">
-          <AccordionHeader>Hobbies</AccordionHeader>
+          <AccordionHeader>Hobbies, 3 of 3</AccordionHeader>
           <AccordionPanel>
             <div role="group" aria-label="Hobbies">
               <input type="checkbox" id="books" name="hobbies" value="books" />

From 2750d26dce3f0604e6a8d9026959821e71cc4ee5 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 3 Feb 2022 09:36:27 +0100
Subject: [PATCH 38/70] Add as='h2' for accordion headers

---
 .../src/AccessibilityScenarios/Accordion1.stories.tsx     | 6 +++---
 .../src/AccessibilityScenarios/Accordion2.stories.tsx     | 8 +++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
index 81a29c6d755af..4bf6d6b7f5481 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
@@ -23,7 +23,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
       <h1>Personal form</h1>
       <Accordion defaultOpenItems="basicInfo">
         <AccordionItem value="basicInfo">
-          <AccordionHeader>Basic information, 1 of 3</AccordionHeader>
+          <AccordionHeader as="h2">Basic information, 1 of 3</AccordionHeader>
           <AccordionPanel>
             <Label htmlFor="name">Name:</Label>
             <input type="text" id="name" name="name" />
@@ -41,7 +41,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="residence">
-          <AccordionHeader>Residence, 2 of 3</AccordionHeader>
+          <AccordionHeader as="h2">Residence, 2 of 3</AccordionHeader>
           <AccordionPanel>
             <Label htmlFor="street">Street:</Label>
             <input type="text" id="street" name="street" />
@@ -52,7 +52,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="hobbies">
-          <AccordionHeader>Hobbies, 3 of 3</AccordionHeader>
+          <AccordionHeader as="h2">Hobbies, 3 of 3</AccordionHeader>
           <AccordionPanel>
             <div role="group" aria-label="Hobbies">
               <input type="checkbox" id="books" name="hobbies" value="books" />
diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
index 4dbdc7d40600f..62677ed194319 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
@@ -18,7 +18,9 @@ export const FAQAccordionAccessibilityScenario: React.FunctionComponent = () =>
       <h1>Frequently asked questions about Windows</h1>
       <Accordion multiple>
         <AccordionItem value="faq1">
-          <AccordionHeader>What's the difference between 32-bit and 64-bit versions of Windows?</AccordionHeader>
+          <AccordionHeader as="h2">
+            What's the difference between 32-bit and 64-bit versions of Windows?
+          </AccordionHeader>
           <AccordionPanel>
             <p>
               The terms 32-bit and 64-bit refer to the way a computer's processor (also called a CPU) handles
@@ -28,7 +30,7 @@ export const FAQAccordionAccessibilityScenario: React.FunctionComponent = () =>
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="faq2">
-          <AccordionHeader>How do I tell if my computer can run a 64-bit version of Windows?</AccordionHeader>
+          <AccordionHeader as="h2">How do I tell if my computer can run a 64-bit version of Windows?</AccordionHeader>
           <AccordionPanel>
             <p>If you have a Windows operating system installed, open File Explorer or This PC.</p>
             <ol>
@@ -46,7 +48,7 @@ export const FAQAccordionAccessibilityScenario: React.FunctionComponent = () =>
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="faq3">
-          <AccordionHeader>How do I find my Windows product key?</AccordionHeader>
+          <AccordionHeader as="h2">How do I find my Windows product key?</AccordionHeader>
           <AccordionPanel>
             <p>
               The product key is located inside the product packaging, on the receipt or confirmation page for a digital

From fd65b42ec839dfcf98e5727575357f81d5eb85a1 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 3 Feb 2022 15:48:35 +0100
Subject: [PATCH 39/70] Remove X of Y in personal form accordion scenario

---
 .../src/AccessibilityScenarios/Accordion1.stories.tsx       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
index 4bf6d6b7f5481..b2f11903e73be 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
@@ -23,7 +23,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
       <h1>Personal form</h1>
       <Accordion defaultOpenItems="basicInfo">
         <AccordionItem value="basicInfo">
-          <AccordionHeader as="h2">Basic information, 1 of 3</AccordionHeader>
+          <AccordionHeader as="h2">Basic information</AccordionHeader>
           <AccordionPanel>
             <Label htmlFor="name">Name:</Label>
             <input type="text" id="name" name="name" />
@@ -41,7 +41,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="residence">
-          <AccordionHeader as="h2">Residence, 2 of 3</AccordionHeader>
+          <AccordionHeader as="h2">Residence</AccordionHeader>
           <AccordionPanel>
             <Label htmlFor="street">Street:</Label>
             <input type="text" id="street" name="street" />
@@ -52,7 +52,7 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem value="hobbies">
-          <AccordionHeader as="h2">Hobbies, 3 of 3</AccordionHeader>
+          <AccordionHeader as="h2">Hobbies</AccordionHeader>
           <AccordionPanel>
             <div role="group" aria-label="Hobbies">
               <input type="checkbox" id="books" name="hobbies" value="books" />

From 1c5502522b47e02c4d5524cd84265da4ab71448a Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Fri, 4 Feb 2022 09:52:33 +0100
Subject: [PATCH 40/70] Fix Tooltip error regarding relationship attribute

---
 .../src/AccessibilityScenarios/Tooltip.stories.tsx       | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
index a55849988759b..39b4a9ae7486b 100644
--- a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -39,6 +39,7 @@ export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent =
       <h2>Tooltip as a password requirements</h2>
       <Label htmlFor="password">Password</Label>
       <Tooltip
+        relationship="label"
         onVisibleChange={onVisibleChange}
         visible={tooltipVisible}
         content="Password must be at least 8 characters long, contain a capital letter, and a number."
@@ -48,20 +49,20 @@ export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent =
       <input type="password" id="password" name="password" />
 
       <h2>Tooltips for text formatting icon-only buttons</h2>
-      <Tooltip content="Make text bold" triggerAriaAttribute="label">
+      <Tooltip relationship="label" content="Make text bold">
         <Button icon={<TextBold24Regular />} />
       </Tooltip>
 
-      <Tooltip content="Make text underline" triggerAriaAttribute="label">
+      <Tooltip relationship="label" content="Make text underline">
         <Button icon={<TextUnderline24Regular />} />
       </Tooltip>
 
-      <Tooltip content="Make text italic" triggerAriaAttribute="label">
+      <Tooltip relationship="label" content="Make text italic">
         <Button icon={<TextItalic24Regular />} />
       </Tooltip>
 
       <h2>Tooltip as an additional button description</h2>
-      <Tooltip content="App and account settings, status and more" triggerAriaAttribute="describedby">
+      <Tooltip relationship="description" content="App and account settings, status and more">
         <Button>Settings</Button>
       </Tooltip>
     </Scenario>

From d3716440cb2ff0c434a090ebf5c5e11ddfa50706 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Tue, 8 Feb 2022 14:08:13 +0100
Subject: [PATCH 41/70] Add uncomplete Input scenario

---
 .../AccessibilityScenarios/Input.stories.tsx  | 40 +++++++++++++++++++
 .../ListOfScenarios.stories.mdx               |  8 ++++
 2 files changed, 48 insertions(+)
 create mode 100644 packages/react-components/src/AccessibilityScenarios/Input.stories.tsx

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
new file mode 100644
index 0000000000000..da46f038dfaed
--- /dev/null
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Input } from '@fluentui/react-components/unstable';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Label } from '@fluentui/react-label';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Button } from '@fluentui/react-button';
+
+import { Scenario } from './utils';
+
+export const RegistrationFormInputsAccessibilityScenario: React.FunctionComponent = () => {
+  return (
+    <Scenario pageTitle="Registration form inputs">
+      <h1>Registration form</h1>
+
+      <Label htmlFor="name">Name:</Label>
+      <Input type="text" id="name" name="name" />
+
+      <Label htmlFor="password">Password:</Label>
+      <Input type="password" id="password" name="password" />
+
+      <Label htmlFor="confirmPassword">Confirm password:</Label>
+      <Input type="password" id="confirmPassword" name="confirmPassword" />
+    </Scenario>
+  );
+};
+
+export default {
+  title: 'Accessibility Scenarios/ Registration form inputs',
+  id: 'input-accessibility-scenario',
+};
diff --git a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index c379b4565f4e6..30d351b0e7db9 100644
--- a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -20,6 +20,14 @@ Accessibility scenarios are used to validate accessibility of components and dem
 
 - <FullscreenLink content="Button / Messenger" parent="button-accessibility-scenario" story="messenger-buttons" />
 
+## Component: Input
+
+- <FullscreenLink
+    content="Input / Registration form"
+    parent="input-accessibility-scenario"
+    story="registration-form-inputs"
+  />
+
 ## Component: Link
 
 - <FullscreenLink content="Link / Site navigation" parent="link-accessibility-scenario" story="site-navigation" />

From 576e8ecd5506549a3a890001b52ad09701737692 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Tue, 8 Feb 2022 16:22:33 +0100
Subject: [PATCH 42/70] Add slider component scenario and fix TS error in Input
 scenario

---
 .../AccessibilityScenarios/Input.stories.tsx  |  2 ++
 .../ListOfScenarios.stories.mdx               |  8 +++++
 .../AccessibilityScenarios/Slider.stories.tsx | 32 +++++++++++++++++++
 3 files changed, 42 insertions(+)
 create mode 100644 packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index da46f038dfaed..96b149cbd85b3 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -30,6 +30,8 @@ export const RegistrationFormInputsAccessibilityScenario: React.FunctionComponen
 
       <Label htmlFor="confirmPassword">Confirm password:</Label>
       <Input type="password" id="confirmPassword" name="confirmPassword" />
+
+      <Button>Submit</Button>
     </Scenario>
   );
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
index 30d351b0e7db9..34dba85cbd852 100644
--- a/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -45,6 +45,14 @@ Accessibility scenarios are used to validate accessibility of components and dem
 
 - <FullscreenLink content="Popover / Add people" parent="popover-accessibility-scenario" story="add-people" />
 
+## Component: Slider
+
+- <FullscreenLink
+    content="Slider / Sound control"
+    parent="slider-accessibility-scenario"
+    story="sound-control-sliders"
+  />
+
 ## Component: SplitButton
 
 - <FullscreenLink
diff --git a/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
new file mode 100644
index 0000000000000..29093ed0232b6
--- /dev/null
+++ b/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Slider } from '@fluentui/react-components/unstable';
+
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Label } from '@fluentui/react-label';
+
+import { Scenario } from './utils';
+
+export const SoundControlSlidersAccessibilityScenario: React.FunctionComponent = () => {
+  return (
+    <Scenario pageTitle="Sound control sliders">
+      <h1>Sound control panel</h1>
+
+      <Label htmlFor="volume">Volume:</Label>
+      <Slider id="volume" defaultValue={30} />
+
+      <Label htmlFor="bass">Bass level:</Label>
+      <Slider id="bass" defaultValue={5} min={0} max={10} />
+    </Scenario>
+  );
+};
+
+export default {
+  title: 'Accessibility Scenarios/ Sound control sliders',
+  id: 'slider-accessibility-scenario',
+};

From 7153067eccde055edd0f4994f9a45eb141202e7b Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Tue, 8 Feb 2022 17:53:09 +0100
Subject: [PATCH 43/70] Change files

---
 ...ct-components-ee7b5914-40cd-4950-b46d-d75c94ad4037.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-components-ee7b5914-40cd-4950-b46d-d75c94ad4037.json

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"
+}

From e2caadf7f2dfaf6f26045e185e64f783da4275d9 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 9 Feb 2022 17:39:06 +0100
Subject: [PATCH 44/70] Fix import errors

---
 .../src/AccessibilityScenarios/Input.stories.tsx                | 2 +-
 .../src/AccessibilityScenarios/Slider.stories.tsx               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index 96b149cbd85b3..b81169fbc892e 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { Input } from '@fluentui/react-components/unstable';
+import { Input } from '@fluentui/react-input';
 
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
index 29093ed0232b6..e80c182cf6a1f 100644
--- a/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { Slider } from '@fluentui/react-components/unstable';
+import { Slider } from '@fluentui/react-slider';
 
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

From effff28e63ec214162a76ddcc8d3adcfc279fcf9 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 10 Feb 2022 18:01:58 +0100
Subject: [PATCH 45/70] Add screen reader supported validation to input
 scenario form

---
 .../AccessibilityScenarios/Input.stories.tsx  | 188 +++++++++++++++++-
 .../AccessibilityScenarios/Slider.stories.tsx |   5 +-
 2 files changed, 181 insertions(+), 12 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index b81169fbc892e..2b6fb71dc15cd 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+extractComponentArgTypes; // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import { Input } from '@fluentui/react-input';
+import { Input, InputOnChangeData } from '@fluentui/react-input';
 
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -16,26 +16,192 @@ import { Label } from '@fluentui/react-label';
 import { Button } from '@fluentui/react-button';
 
 import { Scenario } from './utils';
+import { extractComponentArgTypes } from '@storybook/addon-docs';
+
+export const RegistrationFormInputsAccessibilityScenario = () => {
+  const validations: Record<string, any> = {
+    fullName: {
+      type: 'field',
+      regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{1,50}$/],
+    },
+    nickName: {
+      type: 'field',
+      regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{0,20}$/],
+    },
+    password: {
+      type: 'password',
+      regexes: [
+        /^[^ ]{8,20}$/,
+        /^[^ ]*[0-9][^ ]*$/,
+        /^[^ ]*[A-Z][^ ]*$/,
+        /^[^ ]*[a-z][^ ]*$/,
+        /^[^ ]*[^A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ ][^ ]*$/,
+      ],
+    },
+  };
+
+  const [values, setValues] = React.useState<Record<string, string>>({
+    fullName: '',
+    nickname: '',
+    password: '',
+  });
+  const [invalids, setInvalids] = React.useState<Record<string, boolean>>({
+    fullName: false,
+    nikname: false,
+    password: false,
+  });
+  const [isErrorMessageVisible, setIsErrorMessageVisible] = React.useState<Record<string, boolean>>({
+    fullName: false,
+    nickname: false,
+    password: false,
+  });
+  const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  const handleControlChange = (event: React.FormEvent<HTMLInputElement>, data: InputOnChangeData, name: string) => {
+    const stateUpdate = { [name]: data.value };
+    setValues({ ...values, ...stateUpdate });
+  };
+  const handleShowPasswordChange = (event: React.ChangeEvent) => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    if (validateForm()) {
+      setIsSubmitted(true);
+    }
+  };
+
+  const validateForm = () => {
+    for (const name in validations) {
+      if (!validateControl(name)) {
+        // Set the focus to the invalid control
+        const validation = validations[name];
+        let invalidControl;
+        if (validation.type === 'field' || validation.type === 'password') {
+          invalidControl = document.getElementById(name);
+        }
+        invalidControl?.focus();
+        return false;
+      }
+    }
+    return true;
+  };
+
+  const validateControl = (name: string) => {
+    // First hide the error message if exists
+    const validation = validations[name];
+    let stateUpdate = { [name]: false };
+    setIsErrorMessageVisible({ ...isErrorMessageVisible, ...stateUpdate });
+
+    // If the control value is invalid, show the error and set the aria-invalid attribute
+    const value = values[name];
+    let isInvalid = false;
+    if (validation.type === 'field' || validation.type === 'password') {
+      for (let i = 0; i < validation.regexes.length; i++) {
+        if (!validation.regexes[i].exec(value)) {
+          isInvalid = true;
+          break;
+        }
+      }
+    }
+    if (isInvalid) {
+      // Set some timeout to give the element with role="alert" a chance to speak
+      setTimeout(() => {
+        stateUpdate = { [name]: true };
+        setIsErrorMessageVisible({ ...isErrorMessageVisible, ...stateUpdate });
+      }, 400);
+      stateUpdate = { [name]: isInvalid };
+      setInvalids({ ...invalids, ...stateUpdate });
+      return false;
+    }
+    return true;
+  };
 
-export const RegistrationFormInputsAccessibilityScenario: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="Registration form inputs">
       <h1>Registration form</h1>
+      {!isSubmitted ? (
+        <form onSubmit={handleSubmit}>
+          <Label htmlFor="fullName">Full name:</Label>
+          <Input
+            type="text"
+            id="fullName"
+            name="fullName"
+            onChange={(event, data) => {
+              handleControlChange(event, data, 'fullName');
+            }}
+            aria-required="true"
+            aria-describedby="fullNameHint fullNameHint1 fullNameHint2"
+          />
+          <ErrorMessage isVisible={isErrorMessageVisible.fullName}>
+            <p id="fullNameHint">Full name is invalid. It must</p>
+            <ul>
+              <li id="fullNameHint1">have at maximum 50 characters,</li>
+              <li id="fullNameHint2">contain only lowercase or uppercase letters, spaces or hyphens.</li>
+            </ul>
+          </ErrorMessage>
 
-      <Label htmlFor="name">Name:</Label>
-      <Input type="text" id="name" name="name" />
-
-      <Label htmlFor="password">Password:</Label>
-      <Input type="password" id="password" name="password" />
+          <Label htmlFor="nickname">Nickname:</Label>
+          <Input
+            type="text"
+            id="nickname"
+            name="nickname"
+            onChange={(event, data) => {
+              handleControlChange(event, data, 'nickname');
+            }}
+            aria-describedby="nicknameHint nicknameHint1 nicknameHint2"
+          />
+          <ErrorMessage isVisible={isErrorMessageVisible.nickname}>
+            <p id="nicknameHint">Nickname is invalid. It must</p>
+            <ul>
+              <li id="nicknameHint1">have between 8 and 20 characters,</li>
+              <li id="nicknameHint2">contain only lowercase or uppercase letters, spaces or hyphens.</li>
+            </ul>
+          </ErrorMessage>
 
-      <Label htmlFor="confirmPassword">Confirm password:</Label>
-      <Input type="password" id="confirmPassword" name="confirmPassword" />
+          <Label htmlFor="password">Password:</Label>
+          <Input
+            type={isPasswordVisible ? 'text' : 'password'}
+            id="password"
+            name="password"
+            onChange={(event, data) => {
+              handleControlChange(event, data, 'password');
+            }}
+            aria-required="true"
+            aria-describedby="passwordHint passwordHint1 passwordHint2"
+          />
+          <Label htmlFor="showPassword">Show password</Label>
+          <input type="checkbox" id="showPassword" name="showPassword" onChange={handleShowPasswordChange} />
+          <ErrorMessage isVisible={isErrorMessageVisible.password}>
+            <p id="passwordHint">Password is invalid. It must</p>
+            <ul>
+              <li id="passwordHint1">have between 8 and 20 characters,</li>
+              <li id="passwordHint2">
+                contain at least one lower case letter, upper case letter, number and special character.
+              </li>
+            </ul>
+          </ErrorMessage>
 
-      <Button>Submit</Button>
+          <Button type="submit">Register</Button>
+        </form>
+      ) : (
+        <p role="alert">The form is valid and would have been submitted.</p>
+      )}
     </Scenario>
   );
 };
 
+interface ErrorMessageProps {
+  isVisible: boolean;
+  children: React.ReactNode;
+}
+const ErrorMessage = (props: ErrorMessageProps) => {
+  const { isVisible, children } = props;
+
+  return <div role="alert">{isVisible ? children : null}</div>;
+};
+
 export default {
   title: 'Accessibility Scenarios/ Registration form inputs',
   id: 'input-accessibility-scenario',
diff --git a/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
index e80c182cf6a1f..e81d2eaf04ae4 100644
--- a/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
@@ -21,7 +21,10 @@ export const SoundControlSlidersAccessibilityScenario: React.FunctionComponent =
       <Slider id="volume" defaultValue={30} />
 
       <Label htmlFor="bass">Bass level:</Label>
-      <Slider id="bass" defaultValue={5} min={0} max={10} />
+      <Slider id="bass" defaultValue={5} min={0} max={10} vertical />
+
+      <Label htmlFor="treble">Treble level:</Label>
+      <Slider id="treble" defaultValue={5} min={0} max={10} vertical />
     </Scenario>
   );
 };

From 9571be7f8c7f63d98dd7d29c3071f91422b91272 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 10 Feb 2022 18:14:44 +0100
Subject: [PATCH 46/70] Add lint disable next line for complex object

---
 .../src/AccessibilityScenarios/Input.stories.tsx                 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index 2b6fb71dc15cd..3941ecf0990a0 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -19,6 +19,7 @@ import { Scenario } from './utils';
 import { extractComponentArgTypes } from '@storybook/addon-docs';
 
 export const RegistrationFormInputsAccessibilityScenario = () => {
+  // eslint-disable-next-line
   const validations: Record<string, any> = {
     fullName: {
       type: 'field',

From 74f98dfeb055b488bdef34f607a5fdf763a765d5 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 10 Feb 2022 18:39:27 +0100
Subject: [PATCH 47/70] Rename labels in slider scenario

---
 .../src/AccessibilityScenarios/Slider.stories.tsx             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
index e81d2eaf04ae4..4b432679b82cd 100644
--- a/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
@@ -20,10 +20,10 @@ export const SoundControlSlidersAccessibilityScenario: React.FunctionComponent =
       <Label htmlFor="volume">Volume:</Label>
       <Slider id="volume" defaultValue={30} />
 
-      <Label htmlFor="bass">Bass level:</Label>
+      <Label htmlFor="bass">Bass:</Label>
       <Slider id="bass" defaultValue={5} min={0} max={10} vertical />
 
-      <Label htmlFor="treble">Treble level:</Label>
+      <Label htmlFor="treble">Treble:</Label>
       <Slider id="treble" defaultValue={5} min={0} max={10} vertical />
     </Scenario>
   );

From 643ddf99ee1f7244342d17cd90317d2f9d4e3ff5 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 10 Feb 2022 20:16:27 +0100
Subject: [PATCH 48/70] Remove errorneously inserted unused declaration and
 import

---
 .../src/AccessibilityScenarios/Input.stories.tsx               | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index 3941ecf0990a0..a8c5d37945140 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-extractComponentArgTypes; // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { Input, InputOnChangeData } from '@fluentui/react-input';
@@ -16,7 +16,6 @@ import { Label } from '@fluentui/react-label';
 import { Button } from '@fluentui/react-button';
 
 import { Scenario } from './utils';
-import { extractComponentArgTypes } from '@storybook/addon-docs';
 
 export const RegistrationFormInputsAccessibilityScenario = () => {
   // eslint-disable-next-line

From 0ad7cfa28c55266e313593f1739dccc3723b5877 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 16 Feb 2022 11:16:11 +0100
Subject: [PATCH 49/70] Replace <input> with <Input> and add <form>

---
 .../Accordion1.stories.tsx                    | 101 ++++++++++--------
 1 file changed, 54 insertions(+), 47 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
index b2f11903e73be..ec459a6495662 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
@@ -10,6 +10,11 @@ import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@flue
 // @ts-ignore
 import { Label } from '@fluentui/react-label';
 
+// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { Input } from '@fluentui/react-input';
+
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -21,53 +26,55 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
   return (
     <Scenario pageTitle="Personal form accordion">
       <h1>Personal form</h1>
-      <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>
+        <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>
     </Scenario>
   );
 };

From 06711762887d2d176a84d534ea773c8b7ff8265b Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 16 Feb 2022 11:46:37 +0100
Subject: [PATCH 50/70] Remove already not needed import error ignore comments

---
 .../Accordion1.stories.tsx                       | 15 ---------------
 .../Accordion2.stories.tsx                       |  8 --------
 .../AccessibilityScenarios/Button.stories.tsx    |  4 +---
 .../src/AccessibilityScenarios/Input.stories.tsx | 11 -----------
 .../src/AccessibilityScenarios/Link.stories.tsx  |  3 ---
 .../src/AccessibilityScenarios/Menu1.stories.tsx |  7 -------
 .../src/AccessibilityScenarios/Menu2.stories.tsx |  7 -------
 .../AccessibilityScenarios/Popover.stories.tsx   |  7 -------
 .../AccessibilityScenarios/Slider.stories.tsx    |  7 -------
 .../SplitButton.stories.tsx                      |  6 ------
 .../ToggleButton.stories.tsx                     |  3 ---
 .../AccessibilityScenarios/Tooltip.stories.tsx   | 16 ----------------
 12 files changed, 1 insertion(+), 93 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
index ec459a6495662..98d7a6a35c12c 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
@@ -1,23 +1,8 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
-
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Label } from '@fluentui/react-label';
-
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Input } from '@fluentui/react-input';
-
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Button } from '@fluentui/react-button';
 
 import { Scenario } from './utils';
diff --git a/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
index 62677ed194319..316895f3566e6 100644
--- a/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
@@ -1,15 +1,7 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { Label } from '@fluentui/react-label';
-
 import { Scenario } from './utils';
 
 export const FAQAccordionAccessibilityScenario: React.FunctionComponent = () => {
diff --git a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
index 44d98297a9458..0e4fb3194bd57 100644
--- a/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
@@ -1,9 +1,7 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Button } from '@fluentui/react-button';
+
 import { Scenario } from './utils';
 
 export const MessengerButtonsAccessibilityScenario: React.FunctionComponent = () => {
diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index a8c5d37945140..d194034ce3149 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -1,18 +1,7 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Input, InputOnChangeData } from '@fluentui/react-input';
-
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Label } from '@fluentui/react-label';
-
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Button } from '@fluentui/react-button';
 
 import { Scenario } from './utils';
diff --git a/packages/react-components/src/AccessibilityScenarios/Link.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Link.stories.tsx
index fcb1644c9fcd5..0765ef9e659ee 100644
--- a/packages/react-components/src/AccessibilityScenarios/Link.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Link.stories.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Link } from '@fluentui/react-link';
 
 import { Scenario } from './utils';
diff --git a/packages/react-components/src/AccessibilityScenarios/Menu1.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu1.stories.tsx
index 51659ccebab00..44476153cd134 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu1.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu1.stories.tsx
@@ -1,13 +1,6 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { MenuButton } from '@fluentui/react-button';
-
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import {
   Menu,
   MenuTrigger,
diff --git a/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
index b0bb08af0ec37..ab6a636b70223 100644
--- a/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
@@ -1,13 +1,6 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { MenuButton } from '@fluentui/react-button';
-
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Menu, MenuTrigger, MenuList, MenuPopover, MenuItem, MenuSplitGroup } from '@fluentui/react-menu';
 
 import { Scenario } from './utils';
diff --git a/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
index 63d2d192e8055..833e8436bf0b6 100644
--- a/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Popover.stories.tsx
@@ -1,13 +1,6 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Button } from '@fluentui/react-button';
-
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-popover';
 
 import { Scenario } from './utils';
diff --git a/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
index 4b432679b82cd..4b26688236a9b 100644
--- a/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
@@ -1,13 +1,6 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Slider } from '@fluentui/react-slider';
-
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Label } from '@fluentui/react-label';
 
 import { Scenario } from './utils';
diff --git a/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
index 1fdffedff7abc..ebb145da14718 100644
--- a/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/SplitButton.stories.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Menu, MenuTrigger, MenuList, MenuPopover, MenuItem } from '@fluentui/react-menu';
 
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
@@ -10,9 +7,6 @@ import { Menu, MenuTrigger, MenuList, MenuPopover, MenuItem } from '@fluentui/re
 // @ts-ignore
 import { MenuButtonProps } from '@fluentui/react-menubutton';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Button, SplitButton } from '@fluentui/react-button';
 
 import { Scenario } from './utils';
diff --git a/packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx b/packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx
index a6b3fbf802e5e..87f6cc22730b9 100644
--- a/packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/ToggleButton.stories.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { ToggleButton } from '@fluentui/react-button';
 
 import { Scenario } from './utils';
diff --git a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
index 39b4a9ae7486b..0916560cf09ad 100644
--- a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -1,25 +1,9 @@
 import * as React from 'react';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Button } from '@fluentui/react-button';
-
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Label } from '@fluentui/react-label';
-
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
 import { Tooltip, TooltipProps } from '@fluentui/react-tooltip';
 
-// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { Menu, MenuTrigger, MenuList, MenuPopover, MenuItem } from '@fluentui/react-menu';
-
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore

From 703885e270c0ad81f57142fed74d3d43685169b0 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 16 Feb 2022 13:58:28 +0100
Subject: [PATCH 51/70] Add onBlur validation for Input scenario and changed
 input requirements and hints

---
 .../AccessibilityScenarios/Input.stories.tsx  | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index d194034ce3149..f417388592ca5 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -11,16 +11,16 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
   const validations: Record<string, any> = {
     fullName: {
       type: 'field',
-      regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{1,50}$/],
+      regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{2,50}$/],
     },
-    nickName: {
+    nickname: {
       type: 'field',
-      regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{0,20}$/],
+      regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{2,20}$|^$/],
     },
     password: {
       type: 'password',
       regexes: [
-        /^[^ ]{8,20}$/,
+        /^[^ ]{8,30}$/,
         /^[^ ]*[0-9][^ ]*$/,
         /^[^ ]*[A-Z][^ ]*$/,
         /^[^ ]*[a-z][^ ]*$/,
@@ -47,13 +47,16 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
   const [isSubmitted, setIsSubmitted] = React.useState(false);
 
-  const handleControlChange = (event: React.FormEvent<HTMLInputElement>, data: InputOnChangeData, name: string) => {
+  const handleControlChange = (event: React.FormEvent, data: InputOnChangeData, name: string) => {
     const stateUpdate = { [name]: data.value };
     setValues({ ...values, ...stateUpdate });
   };
   const handleShowPasswordChange = (event: React.ChangeEvent) => {
     setIsPasswordVisible(!isPasswordVisible);
   };
+  const handleControlBlur = (event: React.FormEvent, name: string) => {
+    validateControl(name);
+  };
   const handleSubmit = (event: React.FormEvent) => {
     event.preventDefault();
     if (validateForm()) {
@@ -120,13 +123,16 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
             onChange={(event, data) => {
               handleControlChange(event, data, 'fullName');
             }}
+            onBlur={(event: React.FocusEvent) => {
+              handleControlBlur(event, 'fullName');
+            }}
             aria-required="true"
             aria-describedby="fullNameHint fullNameHint1 fullNameHint2"
           />
           <ErrorMessage isVisible={isErrorMessageVisible.fullName}>
             <p id="fullNameHint">Full name is invalid. It must</p>
             <ul>
-              <li id="fullNameHint1">have at maximum 50 characters,</li>
+              <li id="fullNameHint1">have between 2 and 50 characters,</li>
               <li id="fullNameHint2">contain only lowercase or uppercase letters, spaces or hyphens.</li>
             </ul>
           </ErrorMessage>
@@ -139,12 +145,15 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
             onChange={(event, data) => {
               handleControlChange(event, data, 'nickname');
             }}
+            onBlur={(event: React.FocusEvent) => {
+              handleControlBlur(event, 'nickname');
+            }}
             aria-describedby="nicknameHint nicknameHint1 nicknameHint2"
           />
           <ErrorMessage isVisible={isErrorMessageVisible.nickname}>
-            <p id="nicknameHint">Nickname is invalid. It must</p>
+            <p id="nicknameHint">Nickname is invalid. If entered, it must</p>
             <ul>
-              <li id="nicknameHint1">have between 8 and 20 characters,</li>
+              <li id="nicknameHint1">have between 2 and 20 characters,</li>
               <li id="nicknameHint2">contain only lowercase or uppercase letters, spaces or hyphens.</li>
             </ul>
           </ErrorMessage>
@@ -157,6 +166,9 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
             onChange={(event, data) => {
               handleControlChange(event, data, 'password');
             }}
+            onBlur={(event: React.FocusEvent) => {
+              handleControlBlur(event, 'password');
+            }}
             aria-required="true"
             aria-describedby="passwordHint passwordHint1 passwordHint2"
           />
@@ -165,7 +177,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
           <ErrorMessage isVisible={isErrorMessageVisible.password}>
             <p id="passwordHint">Password is invalid. It must</p>
             <ul>
-              <li id="passwordHint1">have between 8 and 20 characters,</li>
+              <li id="passwordHint1">have between 8 and 30 characters,</li>
               <li id="passwordHint2">
                 contain at least one lower case letter, upper case letter, number and special character.
               </li>

From 8b486786774b8e64d16694a521ac2321f64aeeaa Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 17 Feb 2022 10:54:03 +0100
Subject: [PATCH 52/70] Replace 'any' with new type

---
 .../AccessibilityScenarios/Input.stories.tsx  | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index f417388592ca5..025771962b23b 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -6,29 +6,33 @@ import { Button } from '@fluentui/react-button';
 
 import { Scenario } from './utils';
 
-export const RegistrationFormInputsAccessibilityScenario = () => {
-  // eslint-disable-next-line
-  const validations: Record<string, any> = {
-    fullName: {
-      type: 'field',
-      regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{2,50}$/],
-    },
-    nickname: {
-      type: 'field',
-      regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{2,20}$|^$/],
-    },
-    password: {
-      type: 'password',
-      regexes: [
-        /^[^ ]{8,30}$/,
-        /^[^ ]*[0-9][^ ]*$/,
-        /^[^ ]*[A-Z][^ ]*$/,
-        /^[^ ]*[a-z][^ ]*$/,
-        /^[^ ]*[^A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ ][^ ]*$/,
-      ],
-    },
-  };
+type InputValidation = {
+  type: string;
+  regexes: RegExp[];
+};
 
+const validations: Record<string, InputValidation> = {
+  fullName: {
+    type: 'field',
+    regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{2,50}$/],
+  },
+  nickname: {
+    type: 'field',
+    regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{2,20}$|^$/],
+  },
+  password: {
+    type: 'password',
+    regexes: [
+      /^[^ ]{8,30}$/,
+      /^[^ ]*[0-9][^ ]*$/,
+      /^[^ ]*[A-Z][^ ]*$/,
+      /^[^ ]*[a-z][^ ]*$/,
+      /^[^ ]*[^A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ ][^ ]*$/,
+    ],
+  },
+};
+
+export const RegistrationFormInputsAccessibilityScenario = () => {
   const [values, setValues] = React.useState<Record<string, string>>({
     fullName: '',
     nickname: '',

From f25e9d1d7010671c7091ad1df5f2203b7cedc948 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Sun, 20 Feb 2022 00:39:56 +0100
Subject: [PATCH 53/70] Fix error messages flickering

---
 .../AccessibilityScenarios/Input.stories.tsx  | 98 +++++++++++++------
 1 file changed, 69 insertions(+), 29 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index 025771962b23b..f25da8b1b2c29 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -32,6 +32,35 @@ const validations: Record<string, InputValidation> = {
   },
 };
 
+const getAriaDescribedby = (name: string, isVisible: boolean) => {
+  if (!isVisible) {
+    return '';
+  }
+  return `${name}Error`;
+};
+
+let errorTimeout: number;
+const narrate = (element: HTMLElement, priority = 'polite') => {
+  window.clearTimeout(errorTimeout);
+  const wrapper = document.createElement('div');
+  wrapper.setAttribute(
+    'style',
+    'position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;',
+  );
+  wrapper.setAttribute('aria-live', priority);
+  document.body.appendChild(wrapper);
+
+  errorTimeout = window.setTimeout(() => {
+    const clone = element.cloneNode(true) as HTMLElement;
+    clone.removeAttribute('id');
+    wrapper.appendChild(clone);
+  }, 1000);
+
+  setTimeout(() => {
+    document.body.removeChild(wrapper);
+  }, 1300);
+};
+
 export const RegistrationFormInputsAccessibilityScenario = () => {
   const [values, setValues] = React.useState<Record<string, string>>({
     fullName: '',
@@ -50,6 +79,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
   });
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
   const [isSubmitted, setIsSubmitted] = React.useState(false);
+  // const testError: React.ReactElement = <b>hello world</b>;
 
   const handleControlChange = (event: React.FormEvent, data: InputOnChangeData, name: string) => {
     const stateUpdate = { [name]: data.value };
@@ -85,14 +115,10 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
   };
 
   const validateControl = (name: string) => {
-    // First hide the error message if exists
     const validation = validations[name];
-    let stateUpdate = { [name]: false };
-    setIsErrorMessageVisible({ ...isErrorMessageVisible, ...stateUpdate });
-
-    // If the control value is invalid, show the error and set the aria-invalid attribute
     const value = values[name];
     let isInvalid = false;
+    let stateUpdate;
     if (validation.type === 'field' || validation.type === 'password') {
       for (let i = 0; i < validation.regexes.length; i++) {
         if (!validation.regexes[i].exec(value)) {
@@ -101,15 +127,22 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
         }
       }
     }
+
+    // If the control value is invalid, show the error, narrate it and set the aria-invalid attribute
     if (isInvalid) {
-      // Set some timeout to give the element with role="alert" a chance to speak
-      setTimeout(() => {
-        stateUpdate = { [name]: true };
-        setIsErrorMessageVisible({ ...isErrorMessageVisible, ...stateUpdate });
-      }, 400);
+      stateUpdate = { [name]: true };
+      setIsErrorMessageVisible({ ...isErrorMessageVisible, ...stateUpdate });
+      const error = document.getElementById(`${name}Error`);
+      if (error) {
+        narrate(error, 'assertive');
+      }
       stateUpdate = { [name]: isInvalid };
       setInvalids({ ...invalids, ...stateUpdate });
       return false;
+    } else {
+      // Otherwise, hide the error message
+      stateUpdate = { [name]: false };
+      setIsErrorMessageVisible({ ...isErrorMessageVisible, ...stateUpdate });
     }
     return true;
   };
@@ -131,13 +164,13 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
               handleControlBlur(event, 'fullName');
             }}
             aria-required="true"
-            aria-describedby="fullNameHint fullNameHint1 fullNameHint2"
+            aria-describedby={getAriaDescribedby('fullName', isErrorMessageVisible.fullName)}
           />
-          <ErrorMessage isVisible={isErrorMessageVisible.fullName}>
-            <p id="fullNameHint">Full name is invalid. It must</p>
+          <ErrorMessage controlName="fullName" isVisible={isErrorMessageVisible.fullName}>
+            <p>Full name is invalid. It must</p>
             <ul>
-              <li id="fullNameHint1">have between 2 and 50 characters,</li>
-              <li id="fullNameHint2">contain only lowercase or uppercase letters, spaces or hyphens.</li>
+              <li>have between 2 and 50 characters,</li>
+              <li>contain only lowercase or uppercase letters, spaces or hyphens.</li>
             </ul>
           </ErrorMessage>
 
@@ -152,13 +185,13 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
             onBlur={(event: React.FocusEvent) => {
               handleControlBlur(event, 'nickname');
             }}
-            aria-describedby="nicknameHint nicknameHint1 nicknameHint2"
+            aria-describedby={getAriaDescribedby('nickname', isErrorMessageVisible.nickname)}
           />
-          <ErrorMessage isVisible={isErrorMessageVisible.nickname}>
-            <p id="nicknameHint">Nickname is invalid. If entered, it must</p>
+          <ErrorMessage controlName="nickname" isVisible={isErrorMessageVisible.nickname}>
+            <p>Nickname is invalid. If entered, it must</p>
             <ul>
-              <li id="nicknameHint1">have between 2 and 20 characters,</li>
-              <li id="nicknameHint2">contain only lowercase or uppercase letters, spaces or hyphens.</li>
+              <li>have between 2 and 20 characters,</li>
+              <li>contain only lowercase or uppercase letters, spaces or hyphens.</li>
             </ul>
           </ErrorMessage>
 
@@ -174,17 +207,15 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
               handleControlBlur(event, 'password');
             }}
             aria-required="true"
-            aria-describedby="passwordHint passwordHint1 passwordHint2"
+            aria-describedby={getAriaDescribedby('password', isErrorMessageVisible.password)}
           />
           <Label htmlFor="showPassword">Show password</Label>
           <input type="checkbox" id="showPassword" name="showPassword" onChange={handleShowPasswordChange} />
-          <ErrorMessage isVisible={isErrorMessageVisible.password}>
-            <p id="passwordHint">Password is invalid. It must</p>
+          <ErrorMessage controlName="password" isVisible={isErrorMessageVisible.password}>
+            <p>Password is invalid. It must</p>
             <ul>
-              <li id="passwordHint1">have between 8 and 30 characters,</li>
-              <li id="passwordHint2">
-                contain at least one lower case letter, upper case letter, number and special character.
-              </li>
+              <li>have between 8 and 30 characters,</li>
+              <li>contain at least one lower case letter, upper case letter, number and special character.</li>
             </ul>
           </ErrorMessage>
 
@@ -198,13 +229,22 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
 };
 
 interface ErrorMessageProps {
+  controlName: string;
   isVisible: boolean;
   children: React.ReactNode;
 }
 const ErrorMessage = (props: ErrorMessageProps) => {
-  const { isVisible, children } = props;
+  const { controlName: controlId, isVisible, children } = props;
+  const id = `${controlId}Error`;
+  const styles = {
+    display: isVisible ? 'block' : 'none',
+  };
 
-  return <div role="alert">{isVisible ? children : null}</div>;
+  return (
+    <div id={id} style={styles}>
+      {children}
+    </div>
+  );
 };
 
 export default {

From 395b2972825e2207e6efa18e92bbdf44020c0ddd Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Mon, 21 Feb 2022 15:35:05 +0100
Subject: [PATCH 54/70] Add aria=invalid in Input scenario

---
 .../src/AccessibilityScenarios/Input.stories.tsx             | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index f25da8b1b2c29..e410892cc1c7c 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -56,7 +56,7 @@ const narrate = (element: HTMLElement, priority = 'polite') => {
     wrapper.appendChild(clone);
   }, 1000);
 
-  setTimeout(() => {
+  window.setTimeout(() => {
     document.body.removeChild(wrapper);
   }, 1300);
 };
@@ -164,6 +164,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
               handleControlBlur(event, 'fullName');
             }}
             aria-required="true"
+            aria-invalid={invalids.fullName}
             aria-describedby={getAriaDescribedby('fullName', isErrorMessageVisible.fullName)}
           />
           <ErrorMessage controlName="fullName" isVisible={isErrorMessageVisible.fullName}>
@@ -185,6 +186,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
             onBlur={(event: React.FocusEvent) => {
               handleControlBlur(event, 'nickname');
             }}
+            aria-invalid={invalids.nickname}
             aria-describedby={getAriaDescribedby('nickname', isErrorMessageVisible.nickname)}
           />
           <ErrorMessage controlName="nickname" isVisible={isErrorMessageVisible.nickname}>
@@ -207,6 +209,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
               handleControlBlur(event, 'password');
             }}
             aria-required="true"
+            aria-invalid={invalids.password}
             aria-describedby={getAriaDescribedby('password', isErrorMessageVisible.password)}
           />
           <Label htmlFor="showPassword">Show password</Label>

From fe3da604e847665d590eb12a53f13c6700a7431c Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Mon, 21 Feb 2022 15:41:36 +0100
Subject: [PATCH 55/70] Fix nickname typo

---
 .../src/AccessibilityScenarios/Input.stories.tsx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index e410892cc1c7c..f942d95144e5e 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -69,7 +69,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
   });
   const [invalids, setInvalids] = React.useState<Record<string, boolean>>({
     fullName: false,
-    nikname: false,
+    nickname: false,
     password: false,
   });
   const [isErrorMessageVisible, setIsErrorMessageVisible] = React.useState<Record<string, boolean>>({

From 76895f18ca146eef45f1e4cdb9d18eedb69c8aca Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Mon, 21 Feb 2022 18:30:13 +0100
Subject: [PATCH 56/70] Replace h1 heading with h2

---
 .../src/AccessibilityScenarios/Input.stories.tsx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index f942d95144e5e..bda96b2069619 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -149,7 +149,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
 
   return (
     <Scenario pageTitle="Registration form inputs">
-      <h1>Registration form</h1>
+      <h2>Registration form</h2>
       {!isSubmitted ? (
         <form onSubmit={handleSubmit}>
           <Label htmlFor="fullName">Full name:</Label>

From 54224b7917f9123c7e5c30de798da3def273f92c Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Wed, 2 Mar 2022 16:00:39 +0100
Subject: [PATCH 57/70] Implement form validation using React Hook Form

---
 .../AccessibilityScenarios/Input.stories.tsx  | 326 ++++++++----------
 1 file changed, 151 insertions(+), 175 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index bda96b2069619..779c60a7bf2ea 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -1,46 +1,25 @@
 import * as React from 'react';
 
-import { Input, InputOnChangeData } from '@fluentui/react-input';
+import { Input } from '@fluentui/react-input';
 import { Label } from '@fluentui/react-label';
 import { Button } from '@fluentui/react-button';
 
 import { Scenario } from './utils';
 
-type InputValidation = {
-  type: string;
-  regexes: RegExp[];
-};
-
-const validations: Record<string, InputValidation> = {
-  fullName: {
-    type: 'field',
-    regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{2,50}$/],
-  },
-  nickname: {
-    type: 'field',
-    regexes: [/^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]{2,20}$|^$/],
-  },
-  password: {
-    type: 'password',
-    regexes: [
-      /^[^ ]{8,30}$/,
-      /^[^ ]*[0-9][^ ]*$/,
-      /^[^ ]*[A-Z][^ ]*$/,
-      /^[^ ]*[a-z][^ ]*$/,
-      /^[^ ]*[^A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ ][^ ]*$/,
-    ],
-  },
-};
+import { useForm } from 'react-hook-form';
 
-const getAriaDescribedby = (name: string, isVisible: boolean) => {
-  if (!isVisible) {
-    return '';
-  }
-  return `${name}Error`;
+const regexes = {
+  onlyNameChars: /^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*$/,
+  startsAndEndsWithLetter: /^([A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ][A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ])?$/,
+  noWhitespace: /^\S*$/,
+  hasNumber: /^\S*[0-9]\S*$/,
+  hasLowercaseLetter: /^\S*[a-z]\S*$/,
+  hasUppercaseLetter: /^\S*[A-Z]\S*$/,
+  hasSpecialChar: /^\S*[^0-9a-zA-ZÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ\s]\S*$/,
 };
 
 let errorTimeout: number;
-const narrate = (element: HTMLElement, priority = 'polite') => {
+const narrate = (id: string, priority = 'polite') => {
   window.clearTimeout(errorTimeout);
   const wrapper = document.createElement('div');
   wrapper.setAttribute(
@@ -51,6 +30,10 @@ const narrate = (element: HTMLElement, priority = 'polite') => {
   document.body.appendChild(wrapper);
 
   errorTimeout = window.setTimeout(() => {
+    const element = document.getElementById(id);
+    if (!element) {
+      return;
+    }
     const clone = element.cloneNode(true) as HTMLElement;
     clone.removeAttribute('id');
     wrapper.appendChild(clone);
@@ -61,195 +44,188 @@ const narrate = (element: HTMLElement, priority = 'polite') => {
   }, 1300);
 };
 
+interface FormInputs {
+  fullName: string;
+  nickname: string;
+  password: string;
+}
+
 export const RegistrationFormInputsAccessibilityScenario = () => {
-  const [values, setValues] = React.useState<Record<string, string>>({
-    fullName: '',
-    nickname: '',
-    password: '',
-  });
-  const [invalids, setInvalids] = React.useState<Record<string, boolean>>({
-    fullName: false,
-    nickname: false,
-    password: false,
-  });
-  const [isErrorMessageVisible, setIsErrorMessageVisible] = React.useState<Record<string, boolean>>({
-    fullName: false,
-    nickname: false,
-    password: false,
+  const { register, handleSubmit, errors, formState } = useForm<FormInputs>({
+    validateCriteriaMode: 'all',
+    mode: 'onBlur',
   });
+
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
-  const [isSubmitted, setIsSubmitted] = React.useState(false);
-  // const testError: React.ReactElement = <b>hello world</b>;
+  const [isSubmittedAndValid, setIsSubmittedAndValid] = React.useState(false);
 
-  const handleControlChange = (event: React.FormEvent, data: InputOnChangeData, name: string) => {
-    const stateUpdate = { [name]: data.value };
-    setValues({ ...values, ...stateUpdate });
-  };
-  const handleShowPasswordChange = (event: React.ChangeEvent) => {
-    setIsPasswordVisible(!isPasswordVisible);
-  };
-  const handleControlBlur = (event: React.FormEvent, name: string) => {
-    validateControl(name);
-  };
-  const handleSubmit = (event: React.FormEvent) => {
-    event.preventDefault();
-    if (validateForm()) {
-      setIsSubmitted(true);
+  React.useEffect(() => {
+    if (isSubmittedAndValid) {
+      document.getElementById('validMessage')?.focus();
     }
-  };
+  }, [isSubmittedAndValid]);
 
-  const validateForm = () => {
-    for (const name in validations) {
-      if (!validateControl(name)) {
-        // Set the focus to the invalid control
-        const validation = validations[name];
-        let invalidControl;
-        if (validation.type === 'field' || validation.type === 'password') {
-          invalidControl = document.getElementById(name);
-        }
-        invalidControl?.focus();
-        return false;
-      }
+  const onSubmit = (data: FormInputs, event?: React.BaseSyntheticEvent) => {
+    event?.preventDefault();
+    if (formState.isValid) {
+      setIsSubmittedAndValid(true);
     }
-    return true;
   };
 
-  const validateControl = (name: string) => {
-    const validation = validations[name];
-    const value = values[name];
-    let isInvalid = false;
-    let stateUpdate;
-    if (validation.type === 'field' || validation.type === 'password') {
-      for (let i = 0; i < validation.regexes.length; i++) {
-        if (!validation.regexes[i].exec(value)) {
-          isInvalid = true;
-          break;
-        }
-      }
-    }
-
-    // If the control value is invalid, show the error, narrate it and set the aria-invalid attribute
-    if (isInvalid) {
-      stateUpdate = { [name]: true };
-      setIsErrorMessageVisible({ ...isErrorMessageVisible, ...stateUpdate });
-      const error = document.getElementById(`${name}Error`);
-      if (error) {
-        narrate(error, 'assertive');
-      }
-      stateUpdate = { [name]: isInvalid };
-      setInvalids({ ...invalids, ...stateUpdate });
-      return false;
-    } else {
-      // Otherwise, hide the error message
-      stateUpdate = { [name]: false };
-      setIsErrorMessageVisible({ ...isErrorMessageVisible, ...stateUpdate });
-    }
-    return true;
+  const onShowPasswordChange = (event: React.ChangeEvent) => {
+    setIsPasswordVisible(!isPasswordVisible);
   };
 
   return (
     <Scenario pageTitle="Registration form inputs">
       <h2>Registration form</h2>
-      {!isSubmitted ? (
-        <form onSubmit={handleSubmit}>
+      {!isSubmittedAndValid ? (
+        <form onSubmit={handleSubmit(onSubmit)}>
           <Label htmlFor="fullName">Full name:</Label>
           <Input
             type="text"
             id="fullName"
             name="fullName"
-            onChange={(event, data) => {
-              handleControlChange(event, data, 'fullName');
-            }}
-            onBlur={(event: React.FocusEvent) => {
-              handleControlBlur(event, 'fullName');
-            }}
+            ref={register({
+              required: true,
+              minLength: 2,
+              maxLength: 50,
+              validate: {
+                onlyNameChars: value => regexes.onlyNameChars.test(value),
+                startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
+                always: () => {
+                  narrate('fullNameErrors');
+                  return true;
+                },
+              },
+            })}
             aria-required="true"
-            aria-invalid={invalids.fullName}
-            aria-describedby={getAriaDescribedby('fullName', isErrorMessageVisible.fullName)}
+            aria-invalid={!!errors.fullName}
+            aria-describedby="fullNameErrors"
           />
-          <ErrorMessage controlName="fullName" isVisible={isErrorMessageVisible.fullName}>
-            <p>Full name is invalid. It must</p>
-            <ul>
-              <li>have between 2 and 50 characters,</li>
-              <li>contain only lowercase or uppercase letters, spaces or hyphens.</li>
-            </ul>
-          </ErrorMessage>
+          {errors.fullName?.types && (
+            <div id="fullNameErrors">
+              {'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>
+                </>
+              )}
+            </div>
+          )}
 
           <Label htmlFor="nickname">Nickname:</Label>
           <Input
             type="text"
             id="nickname"
             name="nickname"
-            onChange={(event, data) => {
-              handleControlChange(event, data, 'nickname');
-            }}
-            onBlur={(event: React.FocusEvent) => {
-              handleControlBlur(event, 'nickname');
-            }}
-            aria-invalid={invalids.nickname}
-            aria-describedby={getAriaDescribedby('nickname', isErrorMessageVisible.nickname)}
+            ref={register({
+              minLength: 2,
+              maxLength: 20,
+              validate: {
+                onlyNameChars: value => regexes.onlyNameChars.test(value),
+                startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
+                always: () => {
+                  narrate('nicknameErrors');
+                  return true;
+                },
+              },
+            })}
+            aria-invalid={!!errors.nickname}
+            aria-describedby="nicknameErrors"
           />
-          <ErrorMessage controlName="nickname" isVisible={isErrorMessageVisible.nickname}>
-            <p>Nickname is invalid. If entered, it must</p>
-            <ul>
-              <li>have between 2 and 20 characters,</li>
-              <li>contain only lowercase or uppercase letters, spaces or hyphens.</li>
-            </ul>
-          </ErrorMessage>
+          {errors.nickname?.types && (
+            <div id="nicknameErrors">
+              <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>
+            </div>
+          )}
 
           <Label htmlFor="password">Password:</Label>
           <Input
             type={isPasswordVisible ? 'text' : 'password'}
             id="password"
             name="password"
-            onChange={(event, data) => {
-              handleControlChange(event, data, 'password');
-            }}
-            onBlur={(event: React.FocusEvent) => {
-              handleControlBlur(event, 'password');
-            }}
+            ref={register({
+              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: () => {
+                  narrate('passwordErrors');
+                  return true;
+                },
+              },
+            })}
             aria-required="true"
-            aria-invalid={invalids.password}
-            aria-describedby={getAriaDescribedby('password', isErrorMessageVisible.password)}
+            aria-invalid={!!errors.password}
+            aria-describedby="passwordErrors"
           />
+
           <Label htmlFor="showPassword">Show password</Label>
-          <input type="checkbox" id="showPassword" name="showPassword" onChange={handleShowPasswordChange} />
-          <ErrorMessage controlName="password" isVisible={isErrorMessageVisible.password}>
-            <p>Password is invalid. It must</p>
-            <ul>
-              <li>have between 8 and 30 characters,</li>
-              <li>contain at least one lower case letter, upper case letter, number and special character.</li>
-            </ul>
-          </ErrorMessage>
+          <input type="checkbox" id="showPassword" name="showPassword" onChange={onShowPasswordChange} />
+
+          {errors.password?.types && (
+            <div id="passwordErrors">
+              {'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>
+                </>
+              )}
+            </div>
+          )}
 
           <Button type="submit">Register</Button>
         </form>
       ) : (
-        <p role="alert">The form is valid and would have been submitted.</p>
+        <p id="validMessage" role="alert" tabIndex={0}>
+          The form is valid and would have been submitted.
+        </p>
       )}
     </Scenario>
   );
 };
 
-interface ErrorMessageProps {
-  controlName: string;
-  isVisible: boolean;
-  children: React.ReactNode;
-}
-const ErrorMessage = (props: ErrorMessageProps) => {
-  const { controlName: controlId, isVisible, children } = props;
-  const id = `${controlId}Error`;
-  const styles = {
-    display: isVisible ? 'block' : 'none',
-  };
-
-  return (
-    <div id={id} style={styles}>
-      {children}
-    </div>
-  );
-};
-
 export default {
   title: 'Accessibility Scenarios/ Registration form inputs',
   id: 'input-accessibility-scenario',

From 3d26d6f1b2bbc180f274ab320aaf8f1b6d305f98 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 3 Mar 2022 14:14:55 +0100
Subject: [PATCH 58/70] Ignore line max length lint error and add
 react-hook-form dependency

---
 packages/react-components/package.json                         | 3 ++-
 .../src/AccessibilityScenarios/Input.stories.tsx               | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index f92de1123b136..aebf81bc31e76 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -35,7 +35,8 @@
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
     "react": "16.8.6",
-    "react-dom": "16.8.6"
+    "react-dom": "16.8.6",
+    "react-hook-form": "5.7.2"
   },
   "dependencies": {
     "@fluentui/react-accordion": "9.0.0-rc.1",
diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index 779c60a7bf2ea..de37cff1225ab 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -10,6 +10,7 @@ import { useForm } from 'react-hook-form';
 
 const regexes = {
   onlyNameChars: /^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*$/,
+  // eslint-disable-next-line @fluentui/max-len
   startsAndEndsWithLetter: /^([A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ][A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ])?$/,
   noWhitespace: /^\S*$/,
   hasNumber: /^\S*[0-9]\S*$/,

From aed87de20d3c801edacd8f737d3c68bd06140c12 Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 3 Mar 2022 18:16:06 +0100
Subject: [PATCH 59/70] Focus error element upon form submission and narrate
 when already focused

---
 .../AccessibilityScenarios/Input.stories.tsx  | 88 +++++++++++++------
 1 file changed, 62 insertions(+), 26 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index de37cff1225ab..6eb4dfd24ee3d 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -6,12 +6,12 @@ import { Button } from '@fluentui/react-button';
 
 import { Scenario } from './utils';
 
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 
 const regexes = {
   onlyNameChars: /^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*$/,
   // eslint-disable-next-line @fluentui/max-len
-  startsAndEndsWithLetter: /^([A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ][A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ])?$/,
+  startsAndEndsWithLetter: /^(([A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ][A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ])|[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ])?$/,
   noWhitespace: /^\S*$/,
   hasNumber: /^\S*[0-9]\S*$/,
   hasLowercaseLetter: /^\S*[a-z]\S*$/,
@@ -52,7 +52,7 @@ interface FormInputs {
 }
 
 export const RegistrationFormInputsAccessibilityScenario = () => {
-  const { register, handleSubmit, errors, formState } = useForm<FormInputs>({
+  const { control, handleSubmit, errors, formState } = useForm<FormInputs>({
     validateCriteriaMode: 'all',
     mode: 'onBlur',
   });
@@ -60,6 +60,24 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
   const [isSubmittedAndValid, setIsSubmittedAndValid] = React.useState(false);
 
+  React.useEffect(() => {
+    // If the form is submitted and has errors, focus the first error field
+    if (!formState.isSubmitted || formState.isValid) {
+      return;
+    }
+    const firstErrorName = Object.keys(errors)[0];
+    const firstErrorField = document.getElementById(firstErrorName);
+
+    // Narrate the errors if the error field is already focused
+    if (document.activeElement === firstErrorField) {
+      narrate(`${firstErrorName}Errors`);
+      return;
+    }
+    if (firstErrorField) {
+      firstErrorField.focus();
+    }
+  }, [errors, formState]);
+
   React.useEffect(() => {
     if (isSubmittedAndValid) {
       document.getElementById('validMessage')?.focus();
@@ -83,11 +101,20 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
       {!isSubmittedAndValid ? (
         <form onSubmit={handleSubmit(onSubmit)}>
           <Label htmlFor="fullName">Full name:</Label>
-          <Input
-            type="text"
-            id="fullName"
+          <Controller
             name="fullName"
-            ref={register({
+            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,
@@ -99,10 +126,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                   return true;
                 },
               },
-            })}
-            aria-required="true"
-            aria-invalid={!!errors.fullName}
-            aria-describedby="fullNameErrors"
+            }}
           />
           {errors.fullName?.types && (
             <div id="fullNameErrors">
@@ -126,11 +150,19 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
           )}
 
           <Label htmlFor="nickname">Nickname:</Label>
-          <Input
-            type="text"
-            id="nickname"
+          <Controller
             name="nickname"
-            ref={register({
+            control={control}
+            as={
+              <Input
+                type="text"
+                id="nickname"
+                name="nickname"
+                aria-invalid={!!errors.nickname}
+                aria-describedby="nicknameErrors"
+              />
+            }
+            rules={{
               minLength: 2,
               maxLength: 20,
               validate: {
@@ -141,9 +173,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                   return true;
                 },
               },
-            })}
-            aria-invalid={!!errors.nickname}
-            aria-describedby="nicknameErrors"
+            }}
           />
           {errors.nickname?.types && (
             <div id="nicknameErrors">
@@ -161,11 +191,20 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
           )}
 
           <Label htmlFor="password">Password:</Label>
-          <Input
-            type={isPasswordVisible ? 'text' : 'password'}
-            id="password"
+          <Controller
             name="password"
-            ref={register({
+            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,
@@ -180,10 +219,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                   return true;
                 },
               },
-            })}
-            aria-required="true"
-            aria-invalid={!!errors.password}
-            aria-describedby="passwordErrors"
+            }}
           />
 
           <Label htmlFor="showPassword">Show password</Label>

From 370246605d8427ee3e6809459b4d394e786a681e Mon Sep 17 00:00:00 2001
From: "adam.samec" <adam.samec@gmail.com>
Date: Thu, 3 Mar 2022 19:09:56 +0100
Subject: [PATCH 60/70] Change form revalidate to onBlur

---
 .../src/AccessibilityScenarios/Input.stories.tsx                 | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index 6eb4dfd24ee3d..2784361ee78a3 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -55,6 +55,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
   const { control, handleSubmit, errors, formState } = useForm<FormInputs>({
     validateCriteriaMode: 'all',
     mode: 'onBlur',
+    reValidateMode: 'onBlur',
   });
 
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);

From cdc1c17395d070c985020c8ef1fec93520dbfa6b Mon Sep 17 00:00:00 2001
From: Adam Samec <asamec@microsoft.com>
Date: Wed, 16 Mar 2022 21:16:56 +0100
Subject: [PATCH 61/70] Replace custom validation with React Hook Form library,
 but narration is not working properly

---
 .../AccessibilityScenarios/Input.stories.tsx  | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index 2784361ee78a3..319c4351b663b 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -19,9 +19,7 @@ const regexes = {
   hasSpecialChar: /^\S*[^0-9a-zA-ZÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ\s]\S*$/,
 };
 
-let errorTimeout: number;
-const narrate = (id: string, priority = 'polite') => {
-  window.clearTimeout(errorTimeout);
+const narrateErrors = (name: keyof FormInputs, priority = 'polite') => {
   const wrapper = document.createElement('div');
   wrapper.setAttribute(
     'style',
@@ -30,12 +28,13 @@ const narrate = (id: string, priority = 'polite') => {
   wrapper.setAttribute('aria-live', priority);
   document.body.appendChild(wrapper);
 
-  errorTimeout = window.setTimeout(() => {
-    const element = document.getElementById(id);
-    if (!element) {
+  window.setTimeout(() => {
+    const errorId = `${name}Errors`;
+    const error = document.getElementById(errorId);
+    if (!error) {
       return;
     }
-    const clone = element.cloneNode(true) as HTMLElement;
+    const clone = error.cloneNode(true) as HTMLElement;
     clone.removeAttribute('id');
     wrapper.appendChild(clone);
   }, 1000);
@@ -62,16 +61,16 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
   const [isSubmittedAndValid, setIsSubmittedAndValid] = React.useState(false);
 
   React.useEffect(() => {
-    // If the form is submitted and has errors, focus the first error field
-    if (!formState.isSubmitted || formState.isValid) {
+    // If the form is submitted and has errors, focus the first error fiel, otherwise do nothing
+    if (!formState.isSubmitting || formState.isValid) {
       return;
     }
-    const firstErrorName = Object.keys(errors)[0];
+    const firstErrorName = Object.keys(errors)[0] as keyof FormInputs;
     const firstErrorField = document.getElementById(firstErrorName);
 
     // Narrate the errors if the error field is already focused
     if (document.activeElement === firstErrorField) {
-      narrate(`${firstErrorName}Errors`);
+      narrateErrors(firstErrorName);
       return;
     }
     if (firstErrorField) {
@@ -123,7 +122,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                 onlyNameChars: value => regexes.onlyNameChars.test(value),
                 startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
                 always: () => {
-                  narrate('fullNameErrors');
+                  narrateErrors('fullName');
                   return true;
                 },
               },
@@ -170,7 +169,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                 onlyNameChars: value => regexes.onlyNameChars.test(value),
                 startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
                 always: () => {
-                  narrate('nicknameErrors');
+                  narrateErrors('nickname');
                   return true;
                 },
               },
@@ -216,7 +215,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                 hasSpecialChar: value => regexes.hasSpecialChar.test(value),
                 noWhitespace: value => regexes.noWhitespace.test(value),
                 always: () => {
-                  narrate('passwordErrors');
+                  narrateErrors('password');
                   return true;
                 },
               },

From 28334765bb85496e0db50b5b1e32ff2a80676d81 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jukapsia@microsoft.com>
Date: Mon, 21 Mar 2022 09:42:03 +0100
Subject: [PATCH 62/70] toggle alert role to force re-reading of errors

---
 packages/react-components/package.json        |  3 +-
 .../AccessibilityScenarios/Input.stories.tsx  | 79 ++++++++++---------
 yarn.lock                                     |  5 ++
 3 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index aebf81bc31e76..34168b2ae28fa 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -36,7 +36,8 @@
     "@types/react-dom": "16.9.10",
     "react": "16.8.6",
     "react-dom": "16.8.6",
-    "react-hook-form": "5.7.2"
+    "react-hook-form": "^5.7.2",
+    "@cactuslab/usepubsub": "^1.0.2"
   },
   "dependencies": {
     "@fluentui/react-accordion": "9.0.0-rc.1",
diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index 319c4351b663b..6f4677eb9b7de 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -7,6 +7,7 @@ import { Button } from '@fluentui/react-button';
 import { Scenario } from './utils';
 
 import { useForm, Controller } from 'react-hook-form';
+import { usePubSub, PubSubProvider, PubSubContext } from '@cactuslab/usepubsub';
 
 const regexes = {
   onlyNameChars: /^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*$/,
@@ -19,44 +20,44 @@ const regexes = {
   hasSpecialChar: /^\S*[^0-9a-zA-ZÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ\s]\S*$/,
 };
 
-const narrateErrors = (name: keyof FormInputs, priority = 'polite') => {
-  const wrapper = document.createElement('div');
-  wrapper.setAttribute(
-    'style',
-    'position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;',
-  );
-  wrapper.setAttribute('aria-live', priority);
-  document.body.appendChild(wrapper);
-
-  window.setTimeout(() => {
-    const errorId = `${name}Errors`;
-    const error = document.getElementById(errorId);
-    if (!error) {
-      return;
-    }
-    const clone = error.cloneNode(true) as HTMLElement;
-    clone.removeAttribute('id');
-    wrapper.appendChild(clone);
-  }, 1000);
-
-  window.setTimeout(() => {
-    document.body.removeChild(wrapper);
-  }, 1300);
-};
-
 interface FormInputs {
   fullName: string;
   nickname: string;
   password: string;
 }
 
-export const RegistrationFormInputsAccessibilityScenario = () => {
+interface ValidationMessageProps {
+  id: string;
+  formValidation: PubSubContext;
+}
+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]);
+  return (
+    <div role={isAlerting ? 'alert' : undefined} id={`${id}Errors`}>
+      {children}
+    </div>
+  );
+};
+
+const RegistrationFormInputsAccessibility = () => {
   const { control, handleSubmit, errors, formState } = useForm<FormInputs>({
     validateCriteriaMode: 'all',
     mode: 'onBlur',
     reValidateMode: 'onBlur',
   });
 
+  const formValidation = usePubSub();
+
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
   const [isSubmittedAndValid, setIsSubmittedAndValid] = React.useState(false);
 
@@ -70,7 +71,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
 
     // Narrate the errors if the error field is already focused
     if (document.activeElement === firstErrorField) {
-      narrateErrors(firstErrorName);
+      formValidation.publish(firstErrorName, 'validate');
       return;
     }
     if (firstErrorField) {
@@ -122,14 +123,14 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                 onlyNameChars: value => regexes.onlyNameChars.test(value),
                 startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
                 always: () => {
-                  narrateErrors('fullName');
+                  formValidation.publish('fullName', 'validate');
                   return true;
                 },
               },
             }}
           />
           {errors.fullName?.types && (
-            <div id="fullNameErrors">
+            <ValidationMessage id="fullName" formValidation={formValidation}>
               {'required' in errors.fullName.types ? (
                 <p>Full name is required.</p>
               ) : (
@@ -146,7 +147,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                   </ul>
                 </>
               )}
-            </div>
+            </ValidationMessage>
           )}
 
           <Label htmlFor="nickname">Nickname:</Label>
@@ -169,14 +170,14 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                 onlyNameChars: value => regexes.onlyNameChars.test(value),
                 startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
                 always: () => {
-                  narrateErrors('nickname');
+                  formValidation.publish('nickname', 'validate');
                   return true;
                 },
               },
             }}
           />
           {errors.nickname?.types && (
-            <div id="nicknameErrors">
+            <ValidationMessage id="nickname" formValidation={formValidation}>
               <p>Nickname is invalid. It must:</p>
               <ul>
                 {('minLength' in errors.nickname.types || 'maxLength' in errors.nickname.types) && (
@@ -187,7 +188,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                 )}
                 {'startsAndEndsWithLetter' in errors.nickname.types && <li>Start and end wit letter.</li>}
               </ul>
-            </div>
+            </ValidationMessage>
           )}
 
           <Label htmlFor="password">Password:</Label>
@@ -215,7 +216,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                 hasSpecialChar: value => regexes.hasSpecialChar.test(value),
                 noWhitespace: value => regexes.noWhitespace.test(value),
                 always: () => {
-                  narrateErrors('password');
+                  formValidation.publish('password', 'validate');
                   return true;
                 },
               },
@@ -226,7 +227,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
           <input type="checkbox" id="showPassword" name="showPassword" onChange={onShowPasswordChange} />
 
           {errors.password?.types && (
-            <div id="passwordErrors">
+            <ValidationMessage id="password" formValidation={formValidation}>
               {'required' in errors.password.types ? (
                 <p>Password is required.</p>
               ) : (
@@ -249,7 +250,7 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
                   </ul>
                 </>
               )}
-            </div>
+            </ValidationMessage>
           )}
 
           <Button type="submit">Register</Button>
@@ -263,6 +264,12 @@ export const RegistrationFormInputsAccessibilityScenario = () => {
   );
 };
 
+export const RegistrationFormInputsAccessibilityScenario = () => (
+  <PubSubProvider>
+    <RegistrationFormInputsAccessibility />
+  </PubSubProvider>
+);
+
 export default {
   title: 'Accessibility Scenarios/ Registration form inputs',
   id: 'input-accessibility-scenario',
diff --git a/yarn.lock b/yarn.lock
index 96dbc68a56001..7a33228645f71 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1324,6 +1324,11 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@cactuslab/usepubsub@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@cactuslab/usepubsub/-/usepubsub-1.0.2.tgz#08877905242d2e1b6053ffc6d0efbb097dd5a32b"
+  integrity sha512-xNl3YemJ+aTDgs7MRlmGla7TGDVowtZ/FAF5DaHfR5EJaM4tV5EvK0FIk9hz/lt3AHXL+vxnBoyf4z2Z1sYzJA==
+
 "@charlietango/use-client-hydrated@^1.8.2":
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/@charlietango/use-client-hydrated/-/use-client-hydrated-1.8.2.tgz#7066f4c9966233dcb3dcc755351570e62b101a4f"

From 2670641b4e812f4d5cd17ebc4cc44805490102c7 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jukapsia@microsoft.com>
Date: Thu, 24 Mar 2022 15:16:10 +0100
Subject: [PATCH 63/70] fix narration on submit

---
 .../AccessibilityScenarios/Input.stories.tsx  | 82 +++++++++++++++----
 1 file changed, 68 insertions(+), 14 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index 6f4677eb9b7de..ff33c9163fe75 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -6,8 +6,8 @@ import { Button } from '@fluentui/react-button';
 
 import { Scenario } from './utils';
 
-import { useForm, Controller } from 'react-hook-form';
-import { usePubSub, PubSubProvider, PubSubContext } from '@cactuslab/usepubsub';
+import { useForm, Controller, OnSubmit } from 'react-hook-form';
+import { usePubSub, PubSubProvider, Handler } from '@cactuslab/usepubsub';
 
 const regexes = {
   onlyNameChars: /^[A-Za-zÀ-ÖØ-öø-ÿěščřžďťňůĚŠČŘŽĎŤŇŮ -]*$/,
@@ -26,9 +26,14 @@ interface FormInputs {
   password: string;
 }
 
+interface FormValidation {
+  subscribe: (channel: string, handler: Handler) => () => void;
+  unsubscribe: (channel: string, handler: Handler) => void;
+}
+
 interface ValidationMessageProps {
   id: string;
-  formValidation: PubSubContext;
+  formValidation: FormValidation;
 }
 const ValidationMessage: React.FC<ValidationMessageProps> = ({ id, formValidation, children }) => {
   const [isAlerting, setIsAlerting] = React.useState(true);
@@ -43,12 +48,58 @@ const ValidationMessage: React.FC<ValidationMessageProps> = ({ id, formValidatio
     return () => formValidation.unsubscribe(id, alert);
   }, [formValidation]);
   return (
-    <div role={isAlerting ? 'alert' : undefined} id={`${id}Errors`}>
+    <div role={isAlerting ? 'alert' : undefined} style={{ color: isAlerting ? 'red' : 'green' }} id={`${id}Errors`}>
       {children}
     </div>
   );
 };
 
+const useFormValidation = (
+  handleSubmit: (callback: OnSubmit<any>) => (e?: React.BaseSyntheticEvent) => Promise<void>,
+) => {
+  const pubSub = usePubSub();
+  const isSubmitting = React.useRef(false);
+
+  const wrappedHandleSubmit = React.useCallback(
+    (callback: OnSubmit<any>) => {
+      const handler = handleSubmit(callback);
+      return async (e: React.BaseSyntheticEvent) => {
+        isSubmitting.current = true;
+        const result = await handler(e);
+        isSubmitting.current = false;
+        return result;
+      };
+    },
+    [isSubmitting],
+  );
+
+  const onFieldValidated = React.useCallback(
+    (field: string) => {
+      if (!isSubmitting.current) {
+        pubSub.publish(field, 'validate');
+      }
+      return true;
+    },
+    [isSubmitting, 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 RegistrationFormInputsAccessibility = () => {
   const { control, handleSubmit, errors, formState } = useForm<FormInputs>({
     validateCriteriaMode: 'all',
@@ -56,7 +107,7 @@ const RegistrationFormInputsAccessibility = () => {
     reValidateMode: 'onBlur',
   });
 
-  const formValidation = usePubSub();
+  const formValidation = useFormValidation(handleSubmit);
 
   const [isPasswordVisible, setIsPasswordVisible] = React.useState(false);
   const [isSubmittedAndValid, setIsSubmittedAndValid] = React.useState(false);
@@ -69,11 +120,8 @@ const RegistrationFormInputsAccessibility = () => {
     const firstErrorName = Object.keys(errors)[0] as keyof FormInputs;
     const firstErrorField = document.getElementById(firstErrorName);
 
-    // Narrate the errors if the error field is already focused
-    if (document.activeElement === firstErrorField) {
-      formValidation.publish(firstErrorName, 'validate');
-      return;
-    }
+    formValidation.notifyFormFieldError(firstErrorName);
+
     if (firstErrorField) {
       firstErrorField.focus();
     }
@@ -100,7 +148,7 @@ const RegistrationFormInputsAccessibility = () => {
     <Scenario pageTitle="Registration form inputs">
       <h2>Registration form</h2>
       {!isSubmittedAndValid ? (
-        <form onSubmit={handleSubmit(onSubmit)}>
+        <form onSubmit={formValidation.handleSubmit(onSubmit)}>
           <Label htmlFor="fullName">Full name:</Label>
           <Controller
             name="fullName"
@@ -123,7 +171,9 @@ const RegistrationFormInputsAccessibility = () => {
                 onlyNameChars: value => regexes.onlyNameChars.test(value),
                 startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
                 always: () => {
-                  formValidation.publish('fullName', 'validate');
+                  if (!formState.isSubmitting) {
+                    formValidation.onFieldValidated('fullName');
+                  }
                   return true;
                 },
               },
@@ -170,7 +220,9 @@ const RegistrationFormInputsAccessibility = () => {
                 onlyNameChars: value => regexes.onlyNameChars.test(value),
                 startsAndEndsWithLetter: value => regexes.startsAndEndsWithLetter.test(value),
                 always: () => {
-                  formValidation.publish('nickname', 'validate');
+                  if (!formState.isSubmitting) {
+                    formValidation.onFieldValidated('nickname');
+                  }
                   return true;
                 },
               },
@@ -216,7 +268,9 @@ const RegistrationFormInputsAccessibility = () => {
                 hasSpecialChar: value => regexes.hasSpecialChar.test(value),
                 noWhitespace: value => regexes.noWhitespace.test(value),
                 always: () => {
-                  formValidation.publish('password', 'validate');
+                  if (!formState.isSubmitting) {
+                    formValidation.onFieldValidated('password');
+                  }
                   return true;
                 },
               },

From e2c1013cd36b20aebb01b082d2474cbcbf539978 Mon Sep 17 00:00:00 2001
From: Adam Samec <adam.samec@gmail.com>
Date: Thu, 7 Apr 2022 10:46:17 +0200
Subject: [PATCH 64/70] Fix onblur error narration instead of first error
 narration on submit

---
 .../src/AccessibilityScenarios/Input.stories.tsx                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index ff33c9163fe75..8bab6765b31b4 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -120,7 +120,7 @@ const RegistrationFormInputsAccessibility = () => {
     const firstErrorName = Object.keys(errors)[0] as keyof FormInputs;
     const firstErrorField = document.getElementById(firstErrorName);
 
-    formValidation.notifyFormFieldError(firstErrorName);
+    setTimeout(() => formValidation.notifyFormFieldError(firstErrorName), 200);
 
     if (firstErrorField) {
       firstErrorField.focus();

From aac3bc549b722ed6ba8b7f534715cacdcd63f9f1 Mon Sep 17 00:00:00 2001
From: Adam Samec <adam.samec@gmail.com>
Date: Thu, 7 Apr 2022 14:05:54 +0200
Subject: [PATCH 65/70] Remove pubsub dependancy which was moved to root

---
 packages/react-components/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 2512d82b28d28..e12e818c6b8b1 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -29,7 +29,6 @@
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "@cactuslab/usepubsub": "^1.0.2",
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "@fluentui/scripts": "^1.0.0",

From e72718ca34dc69e1e89519fbb1a6b0a91984ecd2 Mon Sep 17 00:00:00 2001
From: Adam Samec <adam.samec@gmail.com>
Date: Mon, 11 Apr 2022 16:40:26 +0200
Subject: [PATCH 66/70] Remove the password hint scenario for Tooltip component

---
 .../Tooltip.stories.tsx                       | 21 +------------------
 1 file changed, 1 insertion(+), 20 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
index 0916560cf09ad..a637856305f1d 100644
--- a/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Tooltip.stories.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 
 import { Button } from '@fluentui/react-button';
-import { Label } from '@fluentui/react-label';
-import { Tooltip, TooltipProps } from '@fluentui/react-tooltip';
+import { Tooltip } from '@fluentui/react-tooltip';
 
 // https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -12,26 +11,8 @@ import { TextItalic24Regular, TextUnderline24Regular, TextBold24Regular } from '
 import { Scenario } from './utils';
 
 export const ButtonsWithTooltipAccessibilityScenario: React.FunctionComponent = () => {
-  const [tooltipVisible, setTooltipVisible] = React.useState(false);
-
-  const onVisibleChange: TooltipProps['onVisibleChange'] = (event, { visible }) => {
-    setTooltipVisible(visible);
-  };
-
   return (
     <Scenario pageTitle="Buttons with tooltip">
-      <h2>Tooltip as a password requirements</h2>
-      <Label htmlFor="password">Password</Label>
-      <Tooltip
-        relationship="label"
-        onVisibleChange={onVisibleChange}
-        visible={tooltipVisible}
-        content="Password must be at least 8 characters long, contain a capital letter, and a number."
-      >
-        <Button onClick={() => setTooltipVisible(visible => !visible)}>Password requirements</Button>
-      </Tooltip>
-      <input type="password" id="password" name="password" />
-
       <h2>Tooltips for text formatting icon-only buttons</h2>
       <Tooltip relationship="label" content="Make text bold">
         <Button icon={<TextBold24Regular />} />

From 03324c3f30f99a7082cbdc447cf95ed51cd86744 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jukapsia@microsoft.com>
Date: Wed, 13 Apr 2022 12:30:14 +0200
Subject: [PATCH 67/70] fix lint issues

---
 .../src/AccessibilityScenarios/Input.stories.tsx       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
index 8bab6765b31b4..255e7e66e6a2d 100644
--- a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
+++ b/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
@@ -46,7 +46,7 @@ const ValidationMessage: React.FC<ValidationMessageProps> = ({ id, formValidatio
   React.useEffect(() => {
     formValidation.subscribe(id, alert);
     return () => formValidation.unsubscribe(id, alert);
-  }, [formValidation]);
+  }, [formValidation, alert, id]);
   return (
     <div role={isAlerting ? 'alert' : undefined} style={{ color: isAlerting ? 'red' : 'green' }} id={`${id}Errors`}>
       {children}
@@ -55,13 +55,13 @@ const ValidationMessage: React.FC<ValidationMessageProps> = ({ id, formValidatio
 };
 
 const useFormValidation = (
-  handleSubmit: (callback: OnSubmit<any>) => (e?: React.BaseSyntheticEvent) => Promise<void>,
+  handleSubmit: (callback: OnSubmit<FormInputs>) => (e?: React.BaseSyntheticEvent) => Promise<void>,
 ) => {
   const pubSub = usePubSub();
   const isSubmitting = React.useRef(false);
 
   const wrappedHandleSubmit = React.useCallback(
-    (callback: OnSubmit<any>) => {
+    (callback: OnSubmit<FormInputs>) => {
       const handler = handleSubmit(callback);
       return async (e: React.BaseSyntheticEvent) => {
         isSubmitting.current = true;
@@ -70,7 +70,7 @@ const useFormValidation = (
         return result;
       };
     },
-    [isSubmitting],
+    [isSubmitting, handleSubmit],
   );
 
   const onFieldValidated = React.useCallback(
@@ -125,7 +125,7 @@ const RegistrationFormInputsAccessibility = () => {
     if (firstErrorField) {
       firstErrorField.focus();
     }
-  }, [errors, formState]);
+  }, [errors, formState, formValidation]);
 
   React.useEffect(() => {
     if (isSubmittedAndValid) {

From 140f833b07bd13dd80f728d672acf7cb5ca40da0 Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jukapsia@microsoft.com>
Date: Thu, 14 Apr 2022 09:06:23 +0200
Subject: [PATCH 68/70] fix package

---
 packages/react-components/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index e12e818c6b8b1..8c826ff6459a5 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -32,7 +32,8 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "@fluentui/scripts": "^1.0.0",
-    "react-hook-form": "^5.7.2"
+    "react-hook-form": "^5.7.2",
+    "@cactuslab/usepubsub": "^1.0.2"
   },
   "dependencies": {
     "@fluentui/react-accordion": "9.0.0-rc.5",

From 6f825f86f02c9f2677fbde4563df5bdcd2b9060f Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jukapsia@microsoft.com>
Date: Thu, 14 Apr 2022 10:06:08 +0200
Subject: [PATCH 69/70] fix

---
 package.json                           | 1 +
 packages/react-components/package.json | 3 +--
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 28cbeebc5e68e..7a40d8ea60c37 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "@babel/preset-typescript": "7.14.5",
     "@babel/register": "7.14.5",
     "@babel/standalone": "7.14.8",
+    "@cactuslab/usepubsub": "^1.0.2",
     "@ctrl/tinycolor": "3.3.4",
     "@cypress/react": "5.12.4",
     "@cypress/webpack-dev-server": "1.8.3",
diff --git a/packages/react-components/package.json b/packages/react-components/package.json
index 8c826ff6459a5..e12e818c6b8b1 100644
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@@ -32,8 +32,7 @@
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
     "@fluentui/scripts": "^1.0.0",
-    "react-hook-form": "^5.7.2",
-    "@cactuslab/usepubsub": "^1.0.2"
+    "react-hook-form": "^5.7.2"
   },
   "dependencies": {
     "@fluentui/react-accordion": "9.0.0-rc.5",

From 9e71aed808ee79bc5ec92f317d99c8e29cc4b1fe Mon Sep 17 00:00:00 2001
From: Juraj Kapsiar <jukapsia@microsoft.com>
Date: Fri, 6 May 2022 15:10:54 +0200
Subject: [PATCH 70/70] cleanup

---
 ...{Accordion1.stories.tsx => Accordion.stories.tsx} |  2 +-
 ...cordion2.stories.tsx => AccordionFaq.stories.tsx} |  2 +-
 .../src/AccessibilityScenarios/Input.stories.tsx     |  0
 .../ListOfScenarios.stories.mdx                      | 12 ++++--------
 .../{Menu1.stories.tsx => Menu.stories.tsx}          |  2 +-
 ...{Menu2.stories.tsx => MenuSplitGroup.stories.tsx} |  2 +-
 .../src/AccessibilityScenarios/Slider.stories.tsx    |  0
 7 files changed, 8 insertions(+), 12 deletions(-)
 rename packages/react-components/react-components/src/AccessibilityScenarios/{Accordion1.stories.tsx => Accordion.stories.tsx} (98%)
 rename packages/react-components/react-components/src/AccessibilityScenarios/{Accordion2.stories.tsx => AccordionFaq.stories.tsx} (98%)
 rename packages/react-components/{ => react-components}/src/AccessibilityScenarios/Input.stories.tsx (100%)
 rename packages/react-components/react-components/src/AccessibilityScenarios/{Menu1.stories.tsx => Menu.stories.tsx} (98%)
 rename packages/react-components/react-components/src/AccessibilityScenarios/{Menu2.stories.tsx => MenuSplitGroup.stories.tsx} (96%)
 rename packages/react-components/{ => react-components}/src/AccessibilityScenarios/Slider.stories.tsx (100%)

diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
similarity index 98%
rename from packages/react-components/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
rename to packages/react-components/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
index 98d7a6a35c12c..b8926ba007688 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Accordion.stories.tsx
@@ -66,5 +66,5 @@ export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent
 
 export default {
   title: 'Accessibility Scenarios / Personal form accordion',
-  id: 'accordion1-accessibility-scenario',
+  id: 'accordion-accessibility-scenario',
 };
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/AccordionFaq.stories.tsx
similarity index 98%
rename from packages/react-components/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
rename to packages/react-components/react-components/src/AccessibilityScenarios/AccordionFaq.stories.tsx
index 316895f3566e6..ca26495eac901 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/AccordionFaq.stories.tsx
@@ -56,5 +56,5 @@ export const FAQAccordionAccessibilityScenario: React.FunctionComponent = () =>
 
 export default {
   title: 'Accessibility Scenarios / FAQ accordion',
-  id: 'accordion2-accessibility-scenario',
+  id: 'accordion-faq-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Input.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Input.stories.tsx
similarity index 100%
rename from packages/react-components/src/AccessibilityScenarios/Input.stories.tsx
rename to packages/react-components/react-components/src/AccessibilityScenarios/Input.stories.tsx
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 34dba85cbd852..0d751da9efcef 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/ListOfScenarios.stories.mdx
@@ -9,12 +9,8 @@ Accessibility scenarios are used to validate accessibility of components and dem
 
 ## Component: Accordion
 
-- <FullscreenLink
-    content="Accordion / Personal form"
-    parent="accordion1-accessibility-scenario"
-    story="personal-form"
-  />
-- <FullscreenLink content="Accordion / FAQ" parent="accordion2-accessibility-scenario" story="faq" />
+- <FullscreenLink content="Accordion / Personal form" parent="accordion-accessibility-scenario" story="personal-form" />
+- <FullscreenLink content="Accordion / FAQ" parent="accordion-faq-accessibility-scenario" story="faq" />
 
 ## Component: Button
 
@@ -34,10 +30,10 @@ Accessibility scenarios are used to validate accessibility of components and dem
 
 ## Component: Menu
 
-- <FullscreenLink content="Menu / Profile menu" parent="menu1-accessibility-scenario" story="profile-menu" />
+- <FullscreenLink content="Menu / Profile menu" parent="menu-accessibility-scenario" story="profile-menu" />
 - <FullscreenLink
     content="Menu / Menu with split item"
-    parent="menu2-accessibility-scenario"
+    parent="menu-splitgroup-accessibility-scenario"
     story="menu-with-split-item"
   />
 
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Menu1.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Menu.stories.tsx
similarity index 98%
rename from packages/react-components/react-components/src/AccessibilityScenarios/Menu1.stories.tsx
rename to packages/react-components/react-components/src/AccessibilityScenarios/Menu.stories.tsx
index 44476153cd134..b9a9dee43f369 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Menu1.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/Menu.stories.tsx
@@ -103,5 +103,5 @@ export const ProfileMenuAccessibilityScenario: React.FunctionComponent = () => {
 
 export default {
   title: 'Accessibility Scenarios / Profile menu',
-  id: 'menu1-accessibility-scenario',
+  id: 'menu-accessibility-scenario',
 };
diff --git a/packages/react-components/react-components/src/AccessibilityScenarios/Menu2.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/MenuSplitGroup.stories.tsx
similarity index 96%
rename from packages/react-components/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
rename to packages/react-components/react-components/src/AccessibilityScenarios/MenuSplitGroup.stories.tsx
index ab6a636b70223..33e1489d1c986 100644
--- a/packages/react-components/react-components/src/AccessibilityScenarios/Menu2.stories.tsx
+++ b/packages/react-components/react-components/src/AccessibilityScenarios/MenuSplitGroup.stories.tsx
@@ -42,5 +42,5 @@ export const MenuWithSplitItemAccessibilityScenario: React.FunctionComponent = (
 
 export default {
   title: 'Accessibility Scenarios / Menu with split item',
-  id: 'menu2-accessibility-scenario',
+  id: 'menu-splitgroup-accessibility-scenario',
 };
diff --git a/packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx b/packages/react-components/react-components/src/AccessibilityScenarios/Slider.stories.tsx
similarity index 100%
rename from packages/react-components/src/AccessibilityScenarios/Slider.stories.tsx
rename to packages/react-components/react-components/src/AccessibilityScenarios/Slider.stories.tsx