(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).
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-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).