[Autocomplete] VoiceOver doesn't read index for options when using optgroup #19798
Labels
Accessibility
This issue is related to accessibility (a11y)
area: material/autocomplete
P3
An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Comments
Splaktar
added
Accessibility
|
VoiceOver reads out " (X of 4)" for me so it seems to be working. Are you seeing it on a specific example or on all of them? |
crisbeto
added
area: material/autocomplete
needs: clarification
Hi crisbeto, |
wagnermaciel
added
needs triage
|
When I was testing this I was still on an older version of MacOS. I recently updated to Catalina and it doesn't seem to be announcing it anymore. |
crisbeto
added
P3
jelbourn
changed the title
|
I just tested this with the latest version of everything and the index is always read except when using optgroup. I can see the index appearing the VoiceOver's text pop-up for a fraction of a second, then it disappears. |
Hello folks, I'm getting the same behavior as reported by Jeremy in Nov 2020. I turned on captions for my screenreader so we can read what it's narrating. At first it flashes saying three things: the name of the option, position in set, and that it's selected. Then it quickly changes to saying only the name option. It happens really fast, but here is a video recording of the reproduction. 210131.MAO.Ooption.groups.autocomplete.movEnvironment
There is a node in the a11y that is child of each option. My best guess of what's happening is that something is confusing voiceover and causing it to move focus from the -Zach |
zarend
added a commit
to zarend/components
that referenced
this issue
Mar 29, 2023
For Select component, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Also fix the same issues for Autocomplete component. Implement fix by doing two things. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Mar 30, 2023
For Select component, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Also fix the same issues for Autocomplete component. Implement fix by doing two things. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Mar 30, 2023
For Select component, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Also fix the same issues for Autocomplete component. Implement fix by doing two things. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Mar 30, 2023
For Select component, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Also fix the same issues for Autocomplete component. Implement fix by doing two things. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Mar 30, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 3, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 3, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 4, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 4, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 4, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 4, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 14, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 14, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 18, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 18, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 19, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202, angular#19798
zarend
added a commit
to zarend/components
that referenced
this issue
Apr 19, 2023
…emantics For Select and Autcomplete components, fix issues where VoiceOver was confused by the ARIA semantics of the combobox. Fix multiple behaviors: - Fix VoiceOver focus ring stuck on the combobox while navigating options. - Fix VoiceOver would sometimes reading option as a TextNode and not communicating the selected state and position in set. - Fix VoiceOver "flickering" behavior where VoiceOver would display one announcement then quickly change to another annoucement. Fix the same issues for both Select and Autocomplete component. Implement fix by correcting the combobox element and also invidual options. First, move the aria-owns reference to the overlay from the child of the combobox to the parent modal of the comobobx. Having an aria-owns reference inside the combobox element seemed to confuse VoiceOver. Second, apply `aria-hidden="true"` to the ripple element and pseudo checkboxes on mat-option. These DOM nodes are only used for visual purposes, so it is most appropriate to remove them from the accessibility tree. This seemed to make VoiceOver's behavior more consistent. Fix angular#23202 Fix angular#19798
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Bug
Demo URL (required)*:
Angular Material demos for mat autocomplete.
https://material.angular.io/components/autocomplete/examples
Detailed Reproduction Steps
Explain the expected behavior
The VoiceOver screen reader should announce the index of each option.
Explain the current behavior
The VoiceOver screen reader only announces the option label + "clickable" without index.
Discuss the use-case or motivation for changing the existing behavior
This feature to impacts user accessibility experience.
List the affected versions of AngularJS, Material, OS, and browsers
Add anything else we should know
Adding roles described in
https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html does not fix the issue.
The text was updated successfully, but these errors were encountered: