1840989 - [meta] New 3pane message tree has wrong semantics for screen readers, and no controls to access cells

Status: NEW

(Thunderbird :: Folder and Message Lists, defect, P2)

Description

[Henry Wilkes (they/them) [:henry-x]]

I was looking back at bug 1752532 and thought I'd take a look at the new 3pane in beta since I remember the mail space has a lot of screen reader users.

Steps to reproduce

Tested with beta 115.0b6.

Open thunderbird with a screen reader on and navigate to the message list.

Result

1. The message list is read out as being a tree within a table.
2. The list has no accessible name.
3. Individual cells cannot be accessed with the keyboard, to be read or interacted with (e.g. to star the message).
4. There is no semantic association between the cells and their headers.
5. The headers are noisy: "Subject (column header). Subject (push button). Sort by subject".
6. The headers are missing an indication about whether they are sorting and in what direction.
7. The header row is its own tab stop and cannot be reached by pressing up arrow below it. Similarly cannot reach the list by pressing the down arrow on the keyboard.

Expect

1. The message list should be a single treegrid (AKA tree-table) widget.
2. The list should have an accessible name.
3. Pressing right and left arrows should allow you to focus individual cells.
4. Each cell should be associated with the header it is underneath.
5. The headers should be a single label, they should not semantically contain buttons.
6. The sorting header should be marked as such with aria-sort.
7. The header row and the list is a single tab stop that allowa for arrow key navigation from the header to the message items.

The first is a regression from the message list in 102. The others would be accessibility improvements over the old list.

Origin

In terms of the semantic structure, the current message list has the markup:

<table>
  <thead>
    <tr>
      <th>...</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <th><!--Empty--></th>
    <tr>
  </tbody>
  <tbody role="tree">
    <tr role="treeitem">
      <td>...</td>
      ...
  </tbody>
</table>

which results in the accessibility tree:

table
  - row
    - columnHeader
    - columnHeader
    ...
  - row
    - cell ""
  - tree
    - treeitem
      - cell
      - cell
      ...

I think this should be following the treegrid pattern instead:

• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role
• https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/
• https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/examples/treegrid-1/

Comment 1

[Elizabeth Mitchell]

Thank you for this feedback. I will bring this to the team to discuss.

(In reply to Henry Wilkes (they/them) [:henry-x] from comment #0)

2. The list has no accessible name.

When tabbing to the message list, the name of the folder is read. For example, "Inbox Tree View" or "Drafts Tree View." What behavior are you expecting instead? I'm testing this with Windows 11 and NVDA.

Comment 2

[Henry Wilkes (they/them) [:henry-x]]

(In reply to Elizabeth Mitchell from comment #1)

When tabbing to the message list, the name of the folder is read. For example, "Inbox Tree View" or "Drafts Tree View." What behavior are you expecting instead? I'm testing this with Windows 11 and NVDA.

You're right! I missed the aria-labelledby on the tbody because I was looking one level up at the table. I guess the issue is more that the table should have that label when it gains the treegrid role.

Comment 3

[Elizabeth Mitchell]

The items brought up here will need to be addressed individually. Some of the other bugs are addressing these. Fixing all of this will be a bigger effort.

Comment 4

[Elizabeth Mitchell]

Some of the recent bugs we are encountering with keyboard usage and screen readers are related to not addressing the semantic structure. Some of these changes we can make are easy fixes which are quick wins for accessibility.