feat: Add accessibility scenarios for Fluent UI v9 components #3

apps/public-docsite-v9/.storybook/manager-head.html

@@ -148,7 +148,7 @@
   Usign suggested temporary workaround until storybook gets proper support
   See https://github.com/microsoft/fluentui/blob/master/rfcs/convergence/authoring-stories.md#10-internal-stories-for-testing
   */
-  [id*='accessibility-scenario'] {
+  [id*='accessibility-stories'] {
     display: none !important;
   }
 </style>

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

packages/react-components/react-components/.storybook/manager-head.html

@@ -115,7 +115,7 @@
   Usign suggested temporary workaround until storybook gets proper support
   See https://github.com/microsoft/fluentui/blob/master/rfcs/convergence/authoring-stories.md#10-internal-stories-for-testing
   */
-  [id*='accessibility-scenario'] {
+  [id*='accessibility-stories'] {
     display: none !important;
   }
 </style>

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

@@ -8,68 +8,79 @@ import {
   Button,
   Input,
   Label,
+  Radio,
+  RadioGroup,
+  Checkbox,
 } from '@fluentui/react-components';
 
 import { Scenario } from './utils';
 
-export const PersonalFormAccordionAccessibilityScenario: React.FunctionComponent = () => {
+export const PersonalFormAccordion = () => {
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  React.useEffect(() => {
+    if (isSubmitted) {
+      document.getElementById('formSubmittedText')?.focus();
+    }
+  }, [isSubmitted]);
+
+  const onSubmit = (event: React.BaseSyntheticEvent) => {
+    event.preventDefault();
+    setIsSubmitted(true);
+  };
+
   return (
     <Scenario pageTitle="Personal form accordion">
       <h1>Personal form</h1>
-      <form>
-        <Accordion defaultOpenItems="basicInfo">
-          <AccordionItem value="basicInfo">
-            <AccordionHeader as="h2">Basic information</AccordionHeader>
-            <AccordionPanel>
-              <Label htmlFor="name">Name:</Label>
-              <Input type="text" id="name" name="name" />
-              <Label htmlFor="email">Email:</Label>
-              <Input type="text" id="email" name="email" />
-              <fieldset>
-                <legend>Age</legend>
-                <input type="radio" id="ageClass1" name="age" value="ageClass1" />
-                <Label htmlFor="ageClass1">Below 18</Label>
-                <input type="radio" id="ageClass2" name="age" value="ageClass2" />
-                <Label htmlFor="ageClass2">Between 18 and 30</Label>
-                <input type="radio" id="ageClass3" name="age" value="ageClass3" />
-                <Label htmlFor="ageClass3">Over 30</Label>
-              </fieldset>
-            </AccordionPanel>
-          </AccordionItem>
-          <AccordionItem value="residence">
-            <AccordionHeader as="h2">Residence</AccordionHeader>
-            <AccordionPanel>
-              <Label htmlFor="street">Street:</Label>
-              <Input type="text" id="street" name="street" />
-              <Label htmlFor="city">City:</Label>
-              <Input type="text" id="city" name="city" />
-              <Label htmlFor="country">Country:</Label>
-              <Input type="text" id="country" name="country" />
-            </AccordionPanel>
-          </AccordionItem>
-          <AccordionItem value="hobbies">
-            <AccordionHeader as="h2">Hobbies</AccordionHeader>
-            <AccordionPanel>
-              <div role="group" aria-label="Hobbies">
-                <input type="checkbox" id="books" name="hobbies" value="books" />
-                <Label htmlFor="books">books</Label>
-                <input type="checkbox" id="sports" name="hobbies" value="sports" />
-                <Label htmlFor="sports">sports</Label>
-                <input type="checkbox" id="music" name="hobbies" value="music" />
-                <Label htmlFor="music">music</Label>
-                <input type="checkbox" id="travelling" name="hobbies" value="travelling" />
-                <Label htmlFor="travelling">travelling</Label>
-              </div>
-            </AccordionPanel>
-          </AccordionItem>
-        </Accordion>
-        <Button>Submit</Button>
-      </form>
+      {!isSubmitted ? (
+        <form onSubmit={onSubmit}>
+          <Accordion defaultOpenItems="basicInfo">
+            <AccordionItem value="basicInfo">
+              <AccordionHeader as="h2">Basic information</AccordionHeader>
+              <AccordionPanel>
+                <Label htmlFor="name">Name:</Label>
+                <Input type="text" id="name" name="name" />
+                <Label htmlFor="email">Email:</Label>
+                <Input type="email" id="email" name="email" />
+                <Label id="ageLabel">Your age:</Label>
+                <RadioGroup defaultValue="ageClass1" aria-labelledby="ageLabel">
+                  <Radio value="ageClass1" label="Under 16" />
+                  <Radio value="ageClass2" label="Between 16 and 50" />
+                  <Radio value="ageClass3" label="Over 50" />
+                </RadioGroup>
+              </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem value="residence">
+              <AccordionHeader as="h2">Residence</AccordionHeader>
+              <AccordionPanel>
+                <Label htmlFor="street">Street:</Label>
+                <Input type="text" id="street" name="street" />
+                <Label htmlFor="city">City:</Label>
+                <Input type="text" id="city" name="city" />
+                <Label htmlFor="country">Country:</Label>
+                <Input type="text" id="country" name="country" />
+              </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem value="hobbies">
+              <AccordionHeader as="h2">Hobbies</AccordionHeader>
+              <AccordionPanel>
+                <div role="group" aria-labelledby="hobbiesLabel">
+                  <Label id="hobbiesLabel">Please select your hobbies:</Label>
+                  <Checkbox label="Books" />
+                  <Checkbox label="Sports" />
+                  <Checkbox label="Music" />
+                  <Checkbox label="Travelling" />
+                </div>
+              </AccordionPanel>
+            </AccordionItem>
+          </Accordion>
+          <Button type="submit">Submit</Button>
+        </form>
+      ) : (
+        <p id="formSubmittedText" tabIndex={-1}>
+          The form would have been submitted.
+        </p>
+      )}
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios / Personal form accordion',
-  id: 'accordion-accessibility-scenario',
-};

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

@@ -4,7 +4,7 @@ import { Accordion, AccordionHeader, AccordionItem, AccordionPanel } from '@flue
 
 import { Scenario } from './utils';
 
-export const FAQAccordionAccessibilityScenario: React.FunctionComponent = () => {
+export const FAQAccordion: React.FunctionComponent = () => {
   return (
     <Scenario pageTitle="FAQ accordion">
       <h1>Frequently asked questions about Windows</h1>
@@ -53,8 +53,3 @@ export const FAQAccordionAccessibilityScenario: React.FunctionComponent = () =>
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios / FAQ accordion',
-  id: 'accordion-faq-accessibility-scenario',
-};

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

@@ -4,8 +4,7 @@ import { Button } from '@fluentui/react-components';
 
 import { Scenario } from './utils';
 
-export const MessengerButtonsAccessibilityScenario: React.FunctionComponent = () => {
-  const [sendButtonDisabled, setSendButtonDisabled] = React.useState<boolean | undefined>(true);
+export const MessengerButtons: React.FunctionComponent = () => {
   const [deleteButtonDisabled, setDeleteButtonDisabled] = React.useState<boolean | undefined>(true);
   const [increaseFontButtonDisabled, setIncreaseFontButtonDisabled] = React.useState<boolean | undefined>(undefined);
   const [decreaseFontButtonDisabled, setDecreaseFontButtonDisabled] = React.useState<boolean | undefined>(true);
@@ -23,13 +22,16 @@ export const MessengerButtonsAccessibilityScenario: React.FunctionComponent = ()
 
   const resetMessage = () => {
     setMessage('');
-    setSendButtonDisabled(true);
     setDeleteButtonDisabled(true);
   };
 
   const onSendButtonClick = () => {
+    if (message.length > 0) {
+      setStatusText('Message has been sent.');
+    } else {
+      setStatusText('Please type a message.');
+    }
     resetMessage();
-    setStatusText('Message has been sent.');
   };
   const onDeleteButtonClick = () => {
     resetMessage();
@@ -59,50 +61,38 @@ export const MessengerButtonsAccessibilityScenario: React.FunctionComponent = ()
   const onMessageTextareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = event.target.value;
     if (value.length > 0) {
-      setSendButtonDisabled(undefined);
       setDeleteButtonDisabled(undefined);
       setStatusText('');
     } else {
-      setSendButtonDisabled(true);
       setDeleteButtonDisabled(true);
     }
     setMessage(value);
   };
 
   return (
     <Scenario pageTitle="Messenger buttons">
-      <Button disabledFocusable={sendButtonDisabled} onClick={onSendButtonClick}>
-        Send
-      </Button>
-      <Button disabledFocusable={deleteButtonDisabled} onClick={onDeleteButtonClick}>
-        Delete
-      </Button>
       <Button ref={increaseFontButtonRef} disabled={increaseFontButtonDisabled} onClick={onIncreaseFontButtonClick}>
         Increase font size
       </Button>
       <Button ref={decreaseFontButtonRef} disabled={decreaseFontButtonDisabled} onClick={onDecreaseFontButtonClick}>
         Decrease font size
       </Button>
-      <div>
-        <textarea
-          name="message"
-          rows={3}
-          cols={50}
-          placeholder="Enter message here...."
-          aria-label="Message"
-          onChange={onMessageTextareaChange}
-          value={message}
-          style={messageStyle}
-        />
-      </div>
-      <p>
-        <span aria-live="polite">{statusText}</span>
-      </p>
+      <textarea
+        name="message"
+        rows={3}
+        cols={50}
+        placeholder="Enter message here...."
+        aria-label="Message"
+        onChange={onMessageTextareaChange}
+        value={message}
+        style={messageStyle}
+      />
+      <Button onClick={onSendButtonClick}>Send</Button>
+      <Button disabledFocusable={deleteButtonDisabled} onClick={onDeleteButtonClick}>
+        Delete
+      </Button>
+
+      <p aria-live="polite">{statusText}</p>
     </Scenario>
   );
 };
-
-export default {
-  title: 'Accessibility Scenarios / Messenger buttons',
-  id: 'button-accessibility-scenario',
-};

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

@@ -0,0 +1,98 @@
+import * as React from 'react';
+
+import { Button, Checkbox, CheckboxOnChangeData, Label } from '@fluentui/react-components';
+
+import { Scenario } from './utils';
+
+export const QuestionnaireAboutFoodCheckboxes: React.FunctionComponent = () => {
+  const [isAppleSelected, setIsAppleSelected] = React.useState(false);
+  const [isBananaSelected, setIsBananaSelected] = React.useState(false);
+  const [isOrangeSelected, setIsOrangeSelected] = React.useState(false);
+  const [isSpecialDietSelected, setIsSpecialDietSelected] = React.useState(false);
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
+
+  const getSpecialDietDisabled = () => {
+    return isSpecialDietSelected ? false : true;
+  };
+
+  React.useEffect(() => {
+    if (isSubmitted) {
+      document.getElementById('formSubmittedText')?.focus();
+    }
+  }, [isSubmitted]);
+
+  const onSubmit = (event: React.BaseSyntheticEvent) => {
+    event.preventDefault();
+    setIsSubmitted(true);
+  };
+
+  return (
+    <Scenario pageTitle="Checkboxes in questionnaire about food">
+      <h1>Questionnaire about food</h1>
+      {!isSubmitted ? (
+        <form onSubmit={onSubmit}>
+          <div role="group" aria-labelledby="foodLabel">
+            <Label id="foodLabel">Select food that you like:</Label>
+
+            <Checkbox
+              checked={
+                isAppleSelected && isBananaSelected && isOrangeSelected
+                  ? true
+                  : !(isAppleSelected || isBananaSelected || isOrangeSelected)
+                  ? false
+                  : 'mixed'
+              }
+              onChange={(event: React.ChangeEvent, data: CheckboxOnChangeData) => {
+                setIsAppleSelected(!!data.checked);
+                setIsBananaSelected(!!data.checked);
+                setIsOrangeSelected(!!data.checked);
+              }}
+              label="All fruits"
+            />
+            <Checkbox
+              checked={isAppleSelected}
+              onChange={() => setIsAppleSelected(checked => !checked)}
+              label="Apple"
+            />
+            <Checkbox
+              checked={isBananaSelected}
+              onChange={() => setIsBananaSelected(checked => !checked)}
+              label="Banana"
+            />
+            <Checkbox
+              checked={isOrangeSelected}
+              onChange={() => setIsOrangeSelected(checked => !checked)}
+              label="Orange"
+            />
+          </div>
+
+          <Checkbox
+            checked={isSpecialDietSelected}
+            onChange={() => setIsSpecialDietSelected(checked => !checked)}
+            label="I am on special diet"
+          />
+
+          <div role="group" aria-labelledby="cannotEatLabel">
+            <Label id="cannotEatLabel">I cannot eat the following:</Label>
+            <Checkbox disabled={getSpecialDietDisabled()} label="Sugar" />
+            <Checkbox disabled={getSpecialDietDisabled()} label="Meat" />
+            <Checkbox disabled={getSpecialDietDisabled()} label="Dairy products" />
+          </div>
+          <Checkbox
+            required
+            label={
+              <>
+                I accept the <a href="#">terms and conditions</a>.
+              </>
+            }
+          />
+          <Button type="submit">Submit</Button>
+        </form>
+      ) : (
+        <p id="formSubmittedText" tabIndex={-1}>
+          The form would have been submitted.
+        </p>
+      )}
+    </Scenario>
+  );
+};