Skip to content
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

Jump to bottom

ComboBox error message has incorrect role for ARIA #20012

Closed
GeoffCoxMSFT opened this issue Sep 28, 2021 · 17 comments · Fixed by #20013
Closed

ComboBox error message has incorrect role for ARIA #20012

GeoffCoxMSFT opened this issue Sep 28, 2021 · 17 comments · Fixed by #20013
Assignees
@GeoffCoxMSFT
Labels
A11yUsable Component: Combobox Fluent UI react (v8) Issues about @fluentui/react (v8) Priority 1: High Status: Fixed Fixed in some PR Type: Bug 🐛
Milestone
September Project...

Comments

@GeoffCoxMSFT
Copy link
Member

Environment Information

  • Package version(s): v8 (master 2021-09-28)
  • Browser and OS versions: N/A

Please provide a reproduction of the bug in a codepen:

The DOM for combobox shows role="region" which is incorrect as it isn't a landmark.
image
image

The error message div remains rather than being conditionally added to the DOM like Dropdown (which causes the alert to be read).
image
image

Actual behavior:

role="region"
error message div is always present even when no error

Expected behavior:

role="alert" (most widely supported on screen readers)
error message div is added/removed (supports announcing the error better)

Priorities and help requested:

Requested priority: High: developer moving from v7 to v8
image

Related bug that might be partially fixed with this bug fix: #13245
@GeoffCoxMSFT GeoffCoxMSFT self-assigned this Sep 28, 2021
@GeoffCoxMSFT GeoffCoxMSFT mentioned this issue Sep 28, 2021
Merged
2 tasks
@msft-fluent-ui-bot msft-fluent-ui-bot added Status: Fixed Fixed in some PR and removed Status: In PR labels Sep 29, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/web-components@v1.5.4.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/theme-samples@v8.2.18.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/react@v8.35.2.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/react-tabs@v1.0.0-beta.164.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/react-monaco-editor@v1.2.18.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/react-experiments@v8.3.18.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/react-docsite-components@v8.3.36.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/react-date-time@v8.1.75.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/react-charting@v5.3.49.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/react-cards@v0.200.37.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/cra-template@v8.0.9.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20013, which has now been successfully released as @fluentui/azure-themes@v8.1.77.:tada:

Handy links:

@GeoffCoxMSFT GeoffCoxMSFT mentioned this issue Sep 29, 2021
Merged
1 task
@msft-fluent-ui-bot msft-fluent-ui-bot added the Status: Fixed Fixed in some PR label Sep 29, 2021
@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20032, which has now been successfully released as office-ui-fabric-react@v7.177.1.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20032, which has now been successfully released as @uifabric/fabric-website@v7.17.10.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20032, which has now been successfully released as @uifabric/fabric-website-resources@v7.10.10.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20032, which has now been successfully released as @uifabric/experiments@v7.40.9.:tada:

Handy links:

@msft-fluent-ui-bot
Copy link
Collaborator

🎉This issue was addressed in #20032, which has now been successfully released as @fluentui/react-examples@v0.15.10.:tada:

Handy links:

@microsoft microsoft locked as resolved and limited conversation to collaborators Oct 30, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@GeoffCoxMSFT GeoffCoxMSFT

Labels
A11yUsable Component: Combobox Fluent UI react (v8) Issues about @fluentui/react (v8) Priority 1: High Status: Fixed Fixed in some PR Type: Bug 🐛
Projects
None yet
Milestone
September Project Cycle Q3 2021
Development

Successfully merging a pull request may close this issue.

Updated ComboBox error to have role="alert" microsoft/fluentui
2 participants
@GeoffCoxMSFT @msft-fluent-ui-bot