feat: Add accessibility scenariose for Fluent UI v9 components #2 #21651
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: Peter Varholak <[email protected]>
…c/fluentui into accessibility-scenarios
…d Tooltip scenario and correct some wording
…c/fluentui into accessibility-scenarios
…utton component in Tooltip scenario
Collaborator
Perf Analysis (
|
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| ButtonMinimalPerf.default | 141 | 112 | 1.26:1 |
| PortalMinimalPerf.default | 153 | 125 | 1.22:1 |
| FormMinimalPerf.default | 358 | 298 | 1.2:1 |
| ButtonSlotsPerf.default | 459 | 394 | 1.16:1 |
| TextMinimalPerf.default | 291 | 250 | 1.16:1 |
| AnimationMinimalPerf.default | 461 | 401 | 1.15:1 |
| AvatarMinimalPerf.default | 177 | 156 | 1.13:1 |
| ListMinimalPerf.default | 433 | 385 | 1.12:1 |
| AttachmentSlotsPerf.default | 929 | 835 | 1.11:1 |
| ListCommonPerf.default | 528 | 475 | 1.11:1 |
| CarouselMinimalPerf.default | 407 | 370 | 1.1:1 |
| SegmentMinimalPerf.default | 284 | 259 | 1.1:1 |
| TreeWith60ListItems.default | 159 | 144 | 1.1:1 |
| FlexMinimalPerf.default | 251 | 230 | 1.09:1 |
| TableMinimalPerf.default | 333 | 305 | 1.09:1 |
| CheckboxMinimalPerf.default | 2264 | 2141 | 1.06:1 |
| MenuMinimalPerf.default | 700 | 658 | 1.06:1 |
| MenuButtonMinimalPerf.default | 1424 | 1362 | 1.05:1 |
| TreeMinimalPerf.default | 689 | 657 | 1.05:1 |
| LabelMinimalPerf.default | 321 | 309 | 1.04:1 |
| DialogMinimalPerf.default | 639 | 621 | 1.03:1 |
| DropdownManyItemsPerf.default | 581 | 563 | 1.03:1 |
| GridMinimalPerf.default | 284 | 275 | 1.03:1 |
| RefMinimalPerf.default | 202 | 197 | 1.03:1 |
| DividerMinimalPerf.default | 296 | 291 | 1.02:1 |
| LoaderMinimalPerf.default | 575 | 566 | 1.02:1 |
| RadioGroupMinimalPerf.default | 376 | 369 | 1.02:1 |
| TableManyItemsPerf.default | 1612 | 1580 | 1.02:1 |
| AlertMinimalPerf.default | 225 | 223 | 1.01:1 |
| ButtonOverridesMissPerf.default | 1273 | 1258 | 1.01:1 |
| EmbedMinimalPerf.default | 3384 | 3348 | 1.01:1 |
| ImageMinimalPerf.default | 306 | 304 | 1.01:1 |
| LayoutMinimalPerf.default | 297 | 295 | 1.01:1 |
| ListNestedPerf.default | 470 | 465 | 1.01:1 |
| SplitButtonMinimalPerf.default | 3638 | 3600 | 1.01:1 |
| TooltipMinimalPerf.default | 913 | 905 | 1.01:1 |
| DatepickerMinimalPerf.default | 5018 | 5040 | 1:1 |
| HeaderSlotsPerf.default | 646 | 643 | 1:1 |
| SliderMinimalPerf.default | 1399 | 1395 | 1:1 |
| AttachmentMinimalPerf.default | 129 | 130 | 0.99:1 |
| ListWith60ListItems.default | 549 | 552 | 0.99:1 |
| SkeletonMinimalPerf.default | 282 | 285 | 0.99:1 |
| ToolbarMinimalPerf.default | 797 | 805 | 0.99:1 |
| ChatDuplicateMessagesPerf.default | 240 | 244 | 0.98:1 |
| DropdownMinimalPerf.default | 2514 | 2555 | 0.98:1 |
| ItemLayoutMinimalPerf.default | 963 | 979 | 0.98:1 |
| TextAreaMinimalPerf.default | 392 | 401 | 0.98:1 |
| VideoMinimalPerf.default | 537 | 548 | 0.98:1 |
| ChatMinimalPerf.default | 612 | 639 | 0.96:1 |
| IconMinimalPerf.default | 503 | 522 | 0.96:1 |
| RosterPerf.default | 884 | 934 | 0.95:1 |
| ProviderMinimalPerf.default | 319 | 340 | 0.94:1 |
| ReactionMinimalPerf.default | 294 | 314 | 0.94:1 |
| StatusMinimalPerf.default | 522 | 557 | 0.94:1 |
| CustomToolbarPrototype.default | 2220 | 2351 | 0.94:1 |
| ProviderMergeThemesPerf.default | 974 | 1070 | 0.91:1 |
| PopupMinimalPerf.default | 469 | 526 | 0.89:1 |
| AccordionMinimalPerf.default | 110 | 125 | 0.88:1 |
| CardMinimalPerf.default | 412 | 466 | 0.88:1 |
| ChatWithPopoverPerf.default | 282 | 321 | 0.88:1 |
| InputMinimalPerf.default | 972 | 1099 | 0.88:1 |
| HeaderMinimalPerf.default | 249 | 290 | 0.86:1 |
| BoxMinimalPerf.default | 240 | 283 | 0.85:1 |
Collaborator
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 1065 | 1110 | 5000 | |
| Button | mount | 668 | 657 | 5000 | |
| FluentProvider | mount | 2186 | 2235 | 5000 | |
| FluentProviderWithTheme | mount | 340 | 318 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 285 | 276 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 368 | 359 | 10 | |
| MakeStyles | mount | 1875 | 1859 | 50000 |
Contributor
|
Hi @adamsamec , thanks for you contribution ! May I ask you to change this PR to a DRAFT state (based on your PR description) ? This would help us to properly focus and address PR's ready for review.
thx! |
ling1726
reviewed
Mar 30, 2022
packages/react-components/src/AccessibilityScenarios/Accordion2.stories.tsx
Show resolved
Hide resolved
jurokapsiar
approved these changes
May 6, 2022
marwan38
pushed a commit
to marwan38/fluentui
that referenced
this pull request
Jun 13, 2022
…oft#2 (microsoft#21651) * Add accessibility scenarios for the Accordion, Button and Popover components * Change scenario titles * Use string directly as component prop value Co-authored-by: Peter Varholak <[email protected]> * replace alert with status text and fix warnings * Replace useCallback with ordinary function * Revert the title for the scenarios list page * Removed unnecessary fragment * Use <Label> components * Remove not used exports * Change files * Replace Calendar buttons scenario with Messenger buttons scenario, add Tooltip scenario and correct some wording * Add ToggleButton component scenario and replace button element with Button component in Tooltip scenario * Replace calendar scenario link with messenger scenario link and grammar changes * Add Link component scenario, and small changes in Accordion * Add beta version of SplitButton scenario * Make SplitButton scenario working * Change label for menu button within SplitButton * Replace Button with MenuButton in Menu scenario * Fix error in Menu scenario * Refactor aria-label for menu button within split button * Extract Postpone menu item into separate button * Add tooltip button without triggerAriaAttribute prop * Add other gender radio option * Rename disabled links and add nav region * Add heading and description for toggle buttons * Add FAQ accordion scenario and change radios in personal form accordion scenario * Add h1 for accordion scenarios * Fix lint errors and change Tooltip scenario for more real life examples * Add icon buttons for Tooltip scenario * Add x of Y and Submit button to simple form accordion scenario * Add menu with split item scenario * Change menu items in menu with split item scenario * Fix visible label in split button in menu secondary action * Remove X of Y in Accordion scenario * Enable dismiss of tooltip with Escape * Move password hint button between password label and input field * Reintroduce X of Y for personal form accordion scenario * Add as='h2' for accordion headers * Remove X of Y in personal form accordion scenario * Fix Tooltip error regarding relationship attribute * Add uncomplete Input scenario * Add slider component scenario and fix TS error in Input scenario * Change files * Fix import errors * Add screen reader supported validation to input scenario form * Add lint disable next line for complex object * Rename labels in slider scenario * Remove errorneously inserted unused declaration and import * Replace <input> with <Input> and add <form> * Remove already not needed import error ignore comments * Add onBlur validation for Input scenario and changed input requirements and hints * Replace 'any' with new type * Fix error messages flickering * Add aria=invalid in Input scenario * Fix nickname typo * Replace h1 heading with h2 * Implement form validation using React Hook Form * Ignore line max length lint error and add react-hook-form dependency * Focus error element upon form submission and narrate when already focused * Change form revalidate to onBlur * Replace custom validation with React Hook Form library, but narration is not working properly * toggle alert role to force re-reading of errors * fix narration on submit * Fix onblur error narration instead of first error narration on submit * Remove pubsub dependancy which was moved to root * Remove the password hint scenario for Tooltip component * fix lint issues * fix package * fix * cleanup Co-authored-by: Peter Varholak <[email protected]> Co-authored-by: Juraj Kapsiar <[email protected]> Co-authored-by: Adam Samec <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
9 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description of changes
This PR adds accessibility scenarios for testing of the Input and Slider Fluent UI v9 components, and modifies the scenario for the Tooltip component.
The list of scenarios for testing can be found here.
In the current state of this PR, the form validation errors narration via screen reader in the Registration form inputs scenario is not yet properly implemented. The PR is open for your suggestions how to best implement the following requirements using the React Hook Form v5 library: