Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Juraj Kapsiar (jurokapsiar) merged 93 commits into from
May 6, 2022
Merged

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

Show file tree
Hide file tree
Changes from 79 commits
Commits
Show all changes
93 commits
Select commit Hold shift + click to select a range
074ae28
Add accessibility scenarios for the Accordion, Button and Popover com…
adamsamec Nov 9, 2021
3352e77
Change scenario titles
adamsamec Nov 10, 2021
5e45bbd
Use string directly as component prop value
adamsamec Nov 11, 2021
cd895a1
Merge remote-tracking branch 'origin' into accessibility-scenarios
adamsamec Nov 11, 2021
f126e6d
Merge branch 'accessibility-scenarios' of https://github.com/adamsame…
adamsamec Nov 11, 2021
0e82680
replace alert with status text and fix warnings
adamsamec Nov 11, 2021
f9c34fc
Replace useCallback with ordinary function
adamsamec Nov 11, 2021
930148b
Revert the title for the scenarios list page
adamsamec Nov 11, 2021
49691d4
Removed unnecessary fragment
adamsamec Nov 11, 2021
8bdd2c0
Use <Label> components
adamsamec Nov 11, 2021
cfe3331
Remove not used exports
adamsamec Nov 15, 2021
7cf5b9c
Merge master
adamsamec Nov 19, 2021
f4ea222
Change files
Nov 22, 2021
562db7c
Replace Calendar buttons scenario with Messenger buttons scenario, ad…
adamsamec Nov 25, 2021
d1a35ad
Merge branch 'accessibility-scenarios' of https://github.com/adamsame…
adamsamec Nov 25, 2021
c0676e7
Add ToggleButton component scenario and replace button element with B…
adamsamec Nov 25, 2021
adca036
Merge branch 'master' into accessibility-scenarios
adamsamec Nov 30, 2021
b8f0d1d
Merge branch 'master' into accessibility-scenarios
adamsamec Dec 1, 2021
8ad4bca
Replace calendar scenario link with messenger scenario link and gramm…
adamsamec Dec 2, 2021
2ef8dd4
Add Link component scenario, and small changes in Accordion
adamsamec Dec 2, 2021
5858cc2
Add beta version of SplitButton scenario
adamsamec Dec 2, 2021
1192d34
Make SplitButton scenario working
adamsamec Dec 4, 2021
a4861c3
Change label for menu button within SplitButton
adamsamec Dec 4, 2021
9ef8fdc
Replace Button with MenuButton in Menu scenario
adamsamec Dec 8, 2021
39a2008
Merge branch 'master' into accessibility-scenarios
adamsamec Dec 8, 2021
98b93cb
Fix error in Menu scenario
adamsamec Dec 8, 2021
19f3ecd
Merge branch 'master' into accessibility-scenarios
adamsamec Dec 16, 2021
d7e8650
Refactor aria-label for menu button within split button
adamsamec Dec 16, 2021
97dba3f
Extract Postpone menu item into separate button
adamsamec Dec 16, 2021
6e4f0b6
Add tooltip button without triggerAriaAttribute prop
adamsamec Dec 16, 2021
b9495c7
Merge branch 'master' into accessibility-scenarios
adamsamec Dec 21, 2021
71d6349
Add other gender radio option
adamsamec Dec 21, 2021
b2cee2c
Rename disabled links and add nav region
adamsamec Dec 21, 2021
bff21cf
Add heading and description for toggle buttons
adamsamec Dec 21, 2021
d7a5eea
Add FAQ accordion scenario and change radios in personal form accordi…
adamsamec Dec 22, 2021
d731e75
Add h1 for accordion scenarios
adamsamec Dec 22, 2021
cbcf7bd
Fix lint errors and change Tooltip scenario for more real life examples
adamsamec Dec 22, 2021
54aef09
Add icon buttons for Tooltip scenario
adamsamec Dec 23, 2021
1cf3536
Merge branch 'master' into accessibility-scenarios
adamsamec Jan 13, 2022
9d95202
Add x of Y and Submit button to simple form accordion scenario
adamsamec Jan 13, 2022
0ac2a8f
Add menu with split item scenario
adamsamec Jan 13, 2022
c68c2f5
Change menu items in menu with split item scenario
adamsamec Jan 13, 2022
15b1fed
Merge branch 'master' into accessibility-scenarios
adamsamec Jan 18, 2022
c41c0ba
Fix visible label in split button in menu secondary action
adamsamec Jan 18, 2022
4e10fe2
Remove X of Y in Accordion scenario
adamsamec Jan 18, 2022
589d404
Enable dismiss of tooltip with Escape
adamsamec Jan 18, 2022
b552a69
Move password hint button between password label and input field
adamsamec Jan 19, 2022
9a78db1
Reintroduce X of Y for personal form accordion scenario
adamsamec Jan 21, 2022
2750d26
Add as='h2' for accordion headers
adamsamec Feb 3, 2022
fd65b42
Remove X of Y in personal form accordion scenario
adamsamec Feb 3, 2022
2a10532
Merge branch 'master' into accessibility-scenarios
adamsamec Feb 3, 2022
8128639
Merge branch 'master' into accessibility-scenarios
adamsamec Feb 4, 2022
1c55025
Fix Tooltip error regarding relationship attribute
adamsamec Feb 4, 2022
06cc182
Merge branch 'master' into accessibility-scenarios
adamsamec Feb 8, 2022
d371644
Add uncomplete Input scenario
adamsamec Feb 8, 2022
576e8ec
Add slider component scenario and fix TS error in Input scenario
adamsamec Feb 8, 2022
7153067
Change files
adamsamec Feb 8, 2022
e2caadf
Fix import errors
adamsamec Feb 9, 2022
effff28
Add screen reader supported validation to input scenario form
adamsamec Feb 10, 2022
9571be7
Add lint disable next line for complex object
adamsamec Feb 10, 2022
74f98df
Rename labels in slider scenario
adamsamec Feb 10, 2022
643ddf9
Remove errorneously inserted unused declaration and import
adamsamec Feb 10, 2022
41efa6c
Merge branch 'master' into accessibility-scenarios2
adamsamec Feb 15, 2022
0ad7cfa
Replace <input> with <Input> and add <form>
adamsamec Feb 16, 2022
0671176
Remove already not needed import error ignore comments
adamsamec Feb 16, 2022
703885e
Add onBlur validation for Input scenario and changed input requiremen…
adamsamec Feb 16, 2022
8b48678
Replace 'any' with new type
adamsamec Feb 17, 2022
f25e9d1
Fix error messages flickering
adamsamec Feb 19, 2022
395b297
Add aria=invalid in Input scenario
adamsamec Feb 21, 2022
fe3da60
Fix nickname typo
adamsamec Feb 21, 2022
76895f1
Replace h1 heading with h2
adamsamec Feb 21, 2022
54224b7
Implement form validation using React Hook Form
adamsamec Mar 2, 2022
3d26d6f
Ignore line max length lint error and add react-hook-form dependency
adamsamec Mar 3, 2022
aed87de
Focus error element upon form submission and narrate when already foc…
adamsamec Mar 3, 2022
3702466
Change form revalidate to onBlur
adamsamec Mar 3, 2022
cdc1c17
Replace custom validation with React Hook Form library, but narration…
Mar 16, 2022
2833476
toggle alert role to force re-reading of errors
Mar 21, 2022
cdb3f7f
Merge master
Mar 22, 2022
2670641
fix narration on submit
Mar 24, 2022
344def2
Merge master
adamsamec Apr 4, 2022
3a035e8
Merge branch 'master' into accessibility-scenarios2
adamsamec Apr 5, 2022
9bd51d5
Merge branch 'master' into accessibility-scenarios2
adamsamec Apr 6, 2022
e2c1013
Fix onblur error narration instead of first error narration on submit
adamsamec Apr 7, 2022
aac3bc5
Remove pubsub dependancy which was moved to root
adamsamec Apr 7, 2022
102ebca
Merge branch 'master' into accessibility-scenarios2
adamsamec Apr 11, 2022
e72718c
Remove the password hint scenario for Tooltip component
adamsamec Apr 11, 2022
03324c3
fix lint issues
Apr 13, 2022
140f833
fix package
Apr 14, 2022
6f825f8
fix
Apr 14, 2022
0efa089
Merge branch 'master' into accessibility-scenarios2
adamsamec Apr 19, 2022
a610f5f
Merge remote-tracking branch 'origin/master' into accessibility-scena…
May 6, 2022
9e71aed
cleanup
May 6, 2022
a836ad7
Merge remote-tracking branch 'upstream/master' into accessibility-sce…
May 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-components-ee7b5914-40cd-4950-b46d-d75c94ad4037.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Add uncomplete Input scenario",
"packageName": "@fluentui/react-components",
"email": "adam.samec@gmail.com",
"dependentChangeType": "patch"
}
4 changes: 3 additions & 1 deletion packages/react-components/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,11 @@
"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"
"@fluentui/scripts": "^1.0.0",
"react-hook-form": "^5.7.2"
},
"dependencies": {
"@fluentui/react-accordion": "9.0.0-rc.5",
Expand Down
108 changes: 50 additions & 58 deletions packages/react-components/src/AccessibilityScenarios/Accordion1.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +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';
import { Button } from '@fluentui/react-button';

import { Scenario } from './utils';
Expand All @@ -21,53 +11,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>
);
};
Expand Down
8 changes: 0 additions & 8 deletions packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
import * as React from 'react';
Comment thread
jurokapsiar marked this conversation as resolved.

// 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 = () => {
Expand Down
4 changes: 1 addition & 3 deletions packages/react-components/src/AccessibilityScenarios/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {
Expand Down
Loading