feat: Add accessibility scenariose for Fluent UI v9 components #2

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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",

packages/react-components/react-components/package.json

@@ -28,7 +28,8 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-storybook-addon": "9.0.0-rc.1",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/scripts": "^1.0.0",
+    "react-hook-form": "^5.7.2"
   },
   "dependencies": {
     "@fluentui/react-accordion": "9.0.0-rc.9",

packages/react-components/react-components/src/AccessibilityScenarios/Accordion.stories.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+
+import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from '@fluentui/react-accordion';
+import { Label } from '@fluentui/react-label';
+import { Input } from '@fluentui/react-input';
+import { Button } from '@fluentui/react-button';
+
+import { Scenario } from './utils';
+
+export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
+  return (
+    <Scenario pageTitle="Personal form accordion">
+      <h1>Personal form</h1>
+      <form>
+        <Accordion defaultOpenItems="basicInfo">
+          <AccordionItem value="basicInfo">
+            <AccordionHeader as="h2">Basic information</AccordionHeader>
+            <AccordionPanel>
+              <Label htmlFor="name">Name:</Label>
+              <Input type="text" id="name" name="name" />
+              <Label htmlFor="email">Email:</Label>
+              <Input type="text" id="email" name="email" />
+              <fieldset>
+                <legend>Age</legend>
+                <input type="radio" id="ageClass1" name="age" value="ageClass1" />
+                <Label htmlFor="ageClass1">Below 18</Label>
+                <input type="radio" id="ageClass2" name="age" value="ageClass2" />
+                <Label htmlFor="ageClass2">Between 18 and 30</Label>
+                <input type="radio" id="ageClass3" name="age" value="ageClass3" />
+                <Label htmlFor="ageClass3">Over 30</Label>
+              </fieldset>
+            </AccordionPanel>
+          </AccordionItem>
+          <AccordionItem value="residence">
+            <AccordionHeader as="h2">Residence</AccordionHeader>
+            <AccordionPanel>
+              <Label htmlFor="street">Street:</Label>
+              <Input type="text" id="street" name="street" />
+              <Label htmlFor="city">City:</Label>
+              <Input type="text" id="city" name="city" />
+              <Label htmlFor="country">Country:</Label>
+              <Input type="text" id="country" name="country" />
+            </AccordionPanel>
+          </AccordionItem>
+          <AccordionItem value="hobbies">
+            <AccordionHeader as="h2">Hobbies</AccordionHeader>
+            <AccordionPanel>
+              <div role="group" aria-label="Hobbies">
+                <input type="checkbox" id="books" name="hobbies" value="books" />
+                <Label htmlFor="books">books</Label>
+                <input type="checkbox" id="sports" name="hobbies" value="sports" />
+                <Label htmlFor="sports">sports</Label>
+                <input type="checkbox" id="music" name="hobbies" value="music" />
+                <Label htmlFor="music">music</Label>
+                <input type="checkbox" id="travelling" name="hobbies" value="travelling" />
+                <Label htmlFor="travelling">travelling</Label>
+              </div>
+            </AccordionPanel>
+          </AccordionItem>
+        </Accordion>
+        <Button>Submit</Button>
+      </form>
+    </Scenario>
+  );
+};
+
+export default {
+  title: 'Accessibility Scenarios / Personal form accordion',
+  id: 'accordion-accessibility-scenario',
+};

packages/react-components/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx → 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',
 };

packages/react-components/react-components/src/AccessibilityScenarios/Button.stories.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { Button } from '@fluentui/react-button';
+
 import { Scenario } from './utils';
 
 export const MessengerButtonsAccessibilityScenario: React.FunctionComponent = () => {