🐛 Bug Report
Currently the ListView screen reader announcement of rows is weird. Since focus is always on the grid cell rather than the row, the contents of cell is always read out. This means things like the drag handle and the selection check box labels are announced resulting in something like: "Drag item d, select item d, item d". Ideally it would only announce "item d" and then announce the other element when focused.
Things tried:
- aria-label/labelledby/describedby on the cell itself. (doesn't prevent the announcement)
- LiveAnnouncer to overwrite the standard announcement (doesn't work very well)
I feel like we may have to refactor ListView so that focus lands on the row rather than the cell. Some initial work has been done in refactor_listview_row_focus.
Initial issues and possible changes to behavior:
- Possible refactor of the css now that we are focusing the row instead of the cell
- A new option added to the GridKeyboardDelegate so that ArrowUp/Down will move focus to the row above and below even if the user focus is within the row?
- Review this proposed behavior with team
- Additional logic in GridKeyboardDelegate/useGridCell so that the ListView row's cell is always skipped. Since this is a single column list, it doesn't make a lot of sense to focus the cell if focus lands on the row (it would take two ArrowRight operations just to make it to the child contents of the cell). We will probably always want to either be focusing the row or the cell's focusable children if any.
- Fixes to PageUp/Down (doesn't work at all). This may also be partially pre-existing, see other issue filed.
- An aria-label on the row to announce the row's textValue
Maybe a ListViewKeyboard delegate instead of changes to GridKeyboardDelegate?
There very well may be other broken parts, these are just some that I noticed right off the bat
🤔 Expected Behavior
Ideally screen readers would only announce the row name upon focusing the row/cell and then announce the other child elements (like drag handle/etc) when they are focused.
😯 Current Behavior
Screen readers read out all of the ListView's cell contents when focused.
💁 Possible Solution
Refactor ListView so that focus lands on row instead of the cell. May not be the only solution, but haven't been able to find a better one
🌍 Your Environment
| Software |
Version(s) |
| react-spectrum |
. 3.16.4 |
| Browser |
|
| Operating System |
|
🧢 Your Company/Team
RSP
🐛 Bug Report
Currently the ListView screen reader announcement of rows is weird. Since focus is always on the grid cell rather than the row, the contents of cell is always read out. This means things like the drag handle and the selection check box labels are announced resulting in something like: "Drag item d, select item d, item d". Ideally it would only announce "item d" and then announce the other element when focused.
Things tried:
I feel like we may have to refactor ListView so that focus lands on the row rather than the cell. Some initial work has been done in refactor_listview_row_focus.
Initial issues and possible changes to behavior:
Maybe a ListViewKeyboard delegate instead of changes to GridKeyboardDelegate?
There very well may be other broken parts, these are just some that I noticed right off the bat
🤔 Expected Behavior
Ideally screen readers would only announce the row name upon focusing the row/cell and then announce the other child elements (like drag handle/etc) when they are focused.
😯 Current Behavior
Screen readers read out all of the ListView's cell contents when focused.
💁 Possible Solution
Refactor ListView so that focus lands on row instead of the cell. May not be the only solution, but haven't been able to find a better one
🌍 Your Environment
🧢 Your Company/Team
RSP