Bug 1752532 Comment 6 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

(In reply to Geoff Lankow (:darktrojan) from comment #5)
> A `TreeViewListbox` is structurally a flat list

I see, I didn't realise this. I think `aria-level` might help for this https://www.w3.org/TR/wai-aria-1.1/#aria-level.

Actually, after more research, using `role=treegrid` https://www.w3.org/TR/wai-aria-1.1/#treegrid might be better for the email list. This has the same role as the current xul:tree in the accessibility tree as well, so will probably work quite well. Note, this was prompted by the example for an email inbox https://w3c.github.io/aria-practices/examples/treegrid/treegrid-1.html

So to represent

```
v Subject 1               friend@server.org
|-  Re: Subject 1         me@server.org
|-v Um actually...        bad.actor@server.org
  |- Re: Um actually...   friend@server.org
````

this would be

```html
<tree-view-listbox role="treegrid">
  <tree-view-listrow role="row"
                     aria-level="1"
                     aria-posinset="&inbox.pos;"
                     aria-setsize="&inbox.size;"
                     aria-expanded="true">
    <div role="gridcell">Subject 1</div><div role="gridcell">friend@server.org</div>
  </tree-view-listrow>
  <tree-view-listrow role="row"
                     aria-level="2"
                     aria-posinset="1"
                     aria-setsize="2" >
    <div role="gridcell">Re: Subject 1</div><div role="gridcell">me@server.org</div>
  </tree-view-listrow>
  <tree-view-listrow role="row"
                     aria-level="2"
                     aria-posinset="2"
                     aria-setsize="2"
                     aria-expanded="true">
    <div role="gridcell">Um actually...</div><div role="gridcell">bad.actor@server.org</div>
  </tree-view-listrow>
  <tree-view-listrow role="row"
                     aria-level="3"
                     aria-posinset="1"
                     aria-setsize="1" >
    <div role="gridcell">Re: Um actually...</div><div role="gridcell">friend.actor@server.org</div>
  </tree-view-listrow>
</tree-view-listbox>
```

So it is mostly a matter of setting the right `aria-level`, `aria-setsize` and `aria-posinset` and giving each field a `role="gridcell"`.

So overall, it seems we need:

+ `<ul is="tree-list" role="tree">` for trees that are simple (no focusable children within the tree node), used for navigation and selectable. So the folder tree and the addressbook tree.
+ `<ol is="orderable-tree" role="tree">` for the same function, but also re-orderable. Used for the account manager tree.
+ `<ul is="selection-list" role="listbox">` for lists whose items can be selected. Basically a replacement for `xul:richlistbox`.
+ `<ol is="orderable-list" role="listbox">` for the same function, but also re-orderable. Used for the calendar list.
+ `<list-view role="listbox">` based off the current `tree-view-listbox` for long lists with selectable items. Used for the contact list.
+ `<tree-view role="tree-grid">` based off the current `tree-view-listbox`. Used for email list (threaded or not).
(In reply to Geoff Lankow (:darktrojan) from comment #5)
> A `TreeViewListbox` is structurally a flat list

I see, I didn't realise this. I think `aria-level` might help for this https://www.w3.org/TR/wai-aria-1.1/#aria-level.

Actually, after more research, using `role=treegrid` https://www.w3.org/TR/wai-aria-1.1/#treegrid might be better for the email list. This has the same role as the current xul:tree in the accessibility tree as well, so will probably work quite well. Note, this was prompted by the example for an email inbox https://w3c.github.io/aria-practices/examples/treegrid/treegrid-1.html

So to represent

```
v Subject 1               friend@server.org
|-  Re: Subject 1         me@server.org
|-v Um actually...        bad.actor@server.org
  |- Re: Um actually...   friend@server.org
````

this would be

```html
<tree-view-listbox role="treegrid">
  <tree-view-listrow role="row"
                     aria-level="1"
                     aria-posinset="&inbox.pos;"
                     aria-setsize="&inbox.size;"
                     aria-expanded="true">
    <div role="gridcell">Subject 1</div><div role="gridcell">friend@server.org</div>
  </tree-view-listrow>
  <tree-view-listrow role="row"
                     aria-level="2"
                     aria-posinset="1"
                     aria-setsize="2" >
    <div role="gridcell">Re: Subject 1</div><div role="gridcell">me@server.org</div>
  </tree-view-listrow>
  <tree-view-listrow role="row"
                     aria-level="2"
                     aria-posinset="2"
                     aria-setsize="2"
                     aria-expanded="true">
    <div role="gridcell">Um actually...</div><div role="gridcell">bad.actor@server.org</div>
  </tree-view-listrow>
  <tree-view-listrow role="row"
                     aria-level="3"
                     aria-posinset="1"
                     aria-setsize="1" >
    <div role="gridcell">Re: Um actually...</div><div role="gridcell">friend.actor@server.org</div>
  </tree-view-listrow>
</tree-view-listbox>
```

So it is mostly a matter of setting the right `aria-level`, `aria-expanded`, `aria-setsize` and `aria-posinset` and giving each field a `role="gridcell"`.

So overall, it seems we need:

+ `<ul is="tree-list" role="tree">` for trees that are simple (no focusable children within the tree node), used for navigation and selectable. So the folder tree and the addressbook tree.
+ `<ol is="orderable-tree" role="tree">` for the same function, but also re-orderable. Used for the account manager tree.
+ `<ul is="selection-list" role="listbox">` for lists whose items can be selected. Basically a replacement for `xul:richlistbox`.
+ `<ol is="orderable-list" role="listbox">` for the same function, but also re-orderable. Used for the calendar list.
+ `<list-view role="listbox">` based off the current `tree-view-listbox` for long lists with selectable items. Used for the contact list.
+ `<tree-view role="tree-grid">` based off the current `tree-view-listbox`. Used for email list (threaded or not).

Back to Bug 1752532 Comment 6