fix: a11y: add aria-posinset for virtualized
#4660
Closed
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
WofWca
force-pushed
the
wofwca/a11y-aria-posinset-react-window
branch
from
c693203 to
78d5b27
Compare
For `react-virtualized` lists. [From MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset): > The aria-posinset attribute defines an element's number or position > in the current set of listitems or treeitems > when not all items are present in the DOM. TODO: - Make sure screen readers actually announce these. See TODO comment. - Apply to the remaining `<li`s.
WofWca
force-pushed
the
wofwca/a11y-aria-posinset-react-window
branch
from
78d5b27 to
771376a
Compare
WofWca
added a commit
that referenced
this pull request
Apr 25, 2025
Due to the usage of a virtualized list, screen readers would announce an incorrect number of chats in the chat list, and the positions of individual chats in the list. Explicitly setting `aria-posinset` and `aria-setsize` should work. This only handles the chat list and not all the virtualized lists that we have. Related: - bvaughn/react-window#808. - #4660. - #5025.
2 tasks
|
After #4868, this will also need to be done for the gallery. |
WofWca
added a commit
that referenced
this pull request
Jul 15, 2025
Due to the usage of a virtualized list, screen readers would announce an incorrect number of chats in the chat list, and the positions of individual chats in the list. Explicitly setting `aria-posinset` and `aria-setsize` should work. This only handles the chat list and not all the virtualized lists that we have. Related: - bvaughn/react-window#808. - #4660. - #5025.
WofWca
added a commit
that referenced
this pull request
Sep 2, 2025
Due to the usage of a virtualized list, screen readers would announce an incorrect number of chats in the chat list, and the positions of individual chats in the list. Explicitly setting `aria-posinset` and `aria-setsize` should work. This only handles the chat list and not all the virtualized lists that we have. Related: - bvaughn/react-window#808. - #4660. - #5025.
WofWca
added a commit
that referenced
this pull request
Sep 2, 2025
Due to the usage of a virtualized list, screen readers would announce an incorrect number of chats in the chat list, and the positions of individual chats in the list. Explicitly setting `aria-posinset` and `aria-setsize` should work. This only handles the chat list and not all the virtualized lists that we have. Related: - bvaughn/react-window#808. - #4660. - #5025.
WofWca
added a commit
that referenced
this pull request
Sep 2, 2025
Due to the usage of a virtualized list, screen readers would announce an incorrect number of chats in the chat list, and the positions of individual chats in the list. Explicitly setting `aria-posinset` and `aria-setsize` should work. This only handles the chat list and not all the virtualized lists that we have. Related: - bvaughn/react-window#808. - #4660. - #5025.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
For
react-virtualizedlists.From MDN:
TODO:
See TODO comment.
Would applying
role="none"to<li>s androle="listitem"to buttons work? I tried it, and the announcer starts announcing "three of eleven" as I focus between the items. But I am not sure if this is the right way. Doesn't this take away the "button" role from the buttons then?There is this example of a "Menu Button Pattern" where they set
role="none"on<li>s, so this sounds close to truth.Another idea is to make these list items "tabs", as we do for "gallery" tabs.
I guess let's wait for the audit results.
<lis.