Implement the member list with virtuoso #29869
Conversation
It's more performant and feels less glitchy than the button tooltip moving around when you scroll.
As we have for other icon based buttons in the right panel/app
- As well as stylng cells, set the tabIndex(roving) - Natively focus the div with .focus() so screen reader actually moves over the cells - improve labels and roles
There was a problem hiding this comment.
Screenshot from VoiceOver on macOS
Something is going horribly wrong here, its claiming there are 29 columns, it also doesn't state that the grid cell is interactive in any way which is confusing for SR users.
It is also very chatty, stating table, X columns, Y rows on every keyboard navigation.
Roving tabindex is also misbehaving, if I navigate down to a user in e.g. position ~N with name "Bob", I then filter the list such that Bob is still visible but the list is shorter than N then trying to get back to Bob my focus just gets dropped on the container rather than any of the roving elements whereas the roving selection should remain if the previously-selected item is still present (as it is in this case) or move to the nearest next item otherwise
| @@ -35,7 +35,7 @@ test.describe("Share dialog", () => { | |||
|
|
|||
| const rightPanel = await app.toggleRoomInfoPanel(); | |||
| await rightPanel.getByRole("menuitem", { name: "People" }).click(); | |||
| await rightPanel.getByRole("button", { name: `${user.userId} (power 100)` }).click(); | |||
| await rightPanel.getByRole("gridcell", { name: user.displayName }).click(); | |||
There was a problem hiding this comment.
Not sure this is great in terms of a11y semantics, a 1-col grid is definitely not the most appropriate role set to use
|
I'm seeing a weird issue where after I tab into a member list tile I am unable to Shift-Tab back out of the list, otherwise this is feeling better and less chatty. It does read out "group" on every line which is kind of confusing as there isn't any named group present |
… focused. Fixes the issue of not being able to shift+t
|
@t3chguy fixed the shift-tab issue and removed the additional "group" being read in the SR. |
Fixes #30020
Fixes #29249
Fixes #30267
What's in this PR?
What does it look like?
Screen.Recording.2025-05-02.at.10.20.05.mov
Checklist
public/exportedsymbols have accurate TSDoc documentation.