-
|
I have a question about the sections within a combobox listbox. Today they are aria-hidden, but the corresponding group is aria-labelledby the section. When I navigate with a screen reader into the listbox, it is only announced that I am in a group inside a listbox. Only if I navigate to the end of the group, or navigate back from the first element, it is announced that I am currently in the "section name" group. In other words, one cannot really tell what section you are in before navigating all the way to the end, or back. Have you made any thoughts about the best way to announce the section you are currently navigating in? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 7 replies
-
|
So our thought behind this behavior was that it would be too noisy if the current section was announced every time you moved focus from item to item. As a compromise, we decided to only announce the current section if the user was entering it from another section since then the user would theoretically have enough context for subsequent item focus changes. Note that this is specifically if the user was navigating via keyboard arrow keys to move focus up/down through the list. If the user were to move the accessibility cursor via an alternative method (aka mobile screen reader left/right swipes, control + option + arrow keys in VO, etc) the idea was that they would have to swipe past the section header which would then get announced. Did the section/group not get announced the first time you moved focus into the listbox? Also the section headers themselves aren't aria-hidden I believe, mind sharing where you are seeing this? |
Beta Was this translation helpful? Give feedback.
-
|
Just a note, while aria-hidden is true on the span, the group role is labelledby it, so it can still be read. It just can't be visited by the virtual cursor. |
Beta Was this translation helpful? Give feedback.
-
|
I know that the group is labelledby it, the problem is that the section is not announced right away (as explained in the description). |
Beta Was this translation helpful? Give feedback.
-
|
Also its strange that the header there has |
Beta Was this translation helpful? Give feedback.
-
|
@heisand Ah, looks like that sandbox is using an out of date version of This was fixed via #4037, we should bump the package versions in those sandboxes, thanks for bringing this to our attention. Does that sandbox exhibit the correct behavior for you (aka the section headers are now focusable via the screen reader cursor?) |
Beta Was this translation helpful? Give feedback.
-
|
Oh, great, let me do a quick test here. |
Beta Was this translation helpful? Give feedback.
-
|
It looks better now, thanks. I might have other related questions later, but will ask them separately 👍 |
Beta Was this translation helpful? Give feedback.
@heisand Ah, looks like that sandbox is using an out of date version of
useListBoxSection, bumped the package versions to latest: https://codesandbox.io/s/blazing-fog-shhzwh?file=/src/SearchAutocomplete.tsx:2402-2408This was fixed via #4037, we should bump the package versions in those sandboxes, thanks for bringing this to our attention. Does that sandbox exhibit the correct behavior for you (aka the section headers are now focusable via the screen reader cursor?)