New room list: improve list accessibility

[florianduros]

Task #29368
#29368 introduced a new room list with accessibility drawbacks. The list was using accessibility roles related to grid instead of listbox.

bvaughn/react-virtualized#1657 gives a good summary of the situation some years ago. The missing roles in the issues have been fixed since but react-virtualized sticks with grid role instead of listbox.

This PR aims to replace the a11y roles. Sadly, we need to mutate one node rendered by react-virtualized in order to fully migrate to listbox.

NB: the aria-selected attribute is always set to false because the view model of the room list doesn't return yet the current selected room. It will change in the following week/days.

Before	After

[dbkr]

This is a bit grim - what's our route out of this? Is there a bug for react-virtualized to use the right roles? It not setting aria-setsize seems like a fairly uncontroversial bug?

[florianduros]

@dbkr

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-setsize aria-setsize is not for grid and react-virtualized uses grid role. BUT I made an error on putting in on the list instead of each item (will fix it and add aria-posinset too).

With the current role of react-virtualized, it's kind of accessible but not in the best way. It seems that accessibility is not their primary concern (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/gridcell_role#gridcells_with_dynamically_added_hidden_or_removed_rows_and_columns not using aria-colindex for example).

[MidhunSureshR]

Looking at https://www.w3.org/WAI/ARIA/apg/patterns/listbox/:

In addition, the interaction model conveyed by the listbox role to assistive technologies does not support interacting with elements inside of an option. Because of these traits of the listbox widget, it does not provide an accessible way to present a list of interactive elements, such as links, buttons, or checkboxes. To present a list of interactive elements, see the Grid Pattern.

Does this mean that we shouldn't have buttons inside a listbox?

Also https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/ sounds like it does what we want? I think whatsapp web is using this exact role.

[florianduros]

Oh interesting @MidhunSureshR thanks.

It means that the list with its current grid role is already following the best practice. We have a similar implementation of the example 1 https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/layout-grids/

Closing the PR then.