Fix accessibility

[tperamaki-tt]

Current solution is not accessible. The role is on the wrong element, you can't set it as a list, since list should not have a div as a child.

Maybe make it support as property? Then user could set it to be <ul> and use <li> as child. Just ensure there are no divs in between.

[bvaughn]

The role attribute was removed and 2.0.1:
https://github.com/bvaughn/react-window/blob/master/CHANGELOG.md#201

It’s up to users to set their own role for the list/grid and cells. I guess you’re using 2.0? Just update and then you should be able to use whatever role you want.

[tperamaki-tt]

I used the latest version

Role does not work, since it would cause the dom to look like this

<div role="list">
  <div>
    <li>item</li>
  </div>
</div>

and div is not an allowed child of a list, li is.

[bvaughn]

No. The DOM would not look like that. It would look like this:

<div role="list">
  <div>
    <div role="listitem">…</div>
  </div>
</div>

To my knowledge, a listitem role does not have to be a direct child of a list role, though it usually is. Maybe adding a “group” role to the intermediate element would help though, if I’m wrong about that.

Then user could set it to be <ul> and use <li> as child. Just ensure there are no divs in between.

This would not be possible. An intermediate DOM element is needed for the virtualization to work.

(Sorry so brief; sent from my mobile)

[tperamaki-tt]

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role#description

A list can only contain zero or more listitem children.

[bvaughn]

I saw, but I also think it might be an oversimplification because the rold="listitem" docs seem to contradict:

Associated WAI-ARIA Roles, States, and Properties

list

A list of items. Elements with role list must have one or more elements with the role listitem as children, a one or more elements with the role of group that have one or more elements with the listitem role as children.

group

A collection of related objects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents.

Furthermore the role="group" docs say:

When a group is used in the context of list, limit the children of the group to listitem elements. In this case, it is recommended to use multiple ordered or unordered lists, <ol> or <ul>, with nested <li> children.

This suggests to me the following hierarchy is also valid:

<div role="list">
  <div role="group">
    <div role="listitem">Item 1</div>
    <div role="listitem">Item 2</div>
  </div>
</div>

The scrolling requirements needed to implement virtualization effectively requires 3 levels of DOM node, so I don't think a simple <ul><li/></ul> structure is possible to support. (Neither are HTML tables for that matter.) Perhaps you could do something like this but I have never seen this done:

<div> <!-- outer List DOM element with scrolling -->
  <div role="list">
    <div role="listitem">Item 1</div>
    <div role="listitem">Item 2</div>
  </div>
</div>

[bvaughn]

I'm considering updating the library to automatically pass through role and aria-setsize props to make it easier to integrate them correctly. The documentation I've drafted for this looks like this:

https://react-window-git-aria-roles-brian-vaughns-projects.vercel.app/list/aria-roles

Wondering what your thoughts are about this potential change?

[bvaughn]

Reopening this issue while we're discussing.

[bvaughn]

The scrolling requirements needed to implement virtualization effectively requires 3 levels of DOM node

As I think about this more, I realize it's not actually correct. I think I could accomplish the same basic thing with a hidden div at the bottom/right of the list/grid, aka

<div style="position: relative; height: 100px;">
  <!-- Virtualized rows -->

  <div style="position: absolute; top: 1000px; height: 1px;">
    &nbsp;
  </div>
 </div>

Or for that matter I could event do something like:

<div style="position: relative; height: 100px;">
  <!-- Virtualized rows -->

  <div style="height: 1000px; z-index: -1;">&nbsp;</div>
 </div>

Which maybe would also allow for things like <ul><li/></ul> (or at least easier ARIA roles).

I wonder if that would be a breaking change 🤔

[bvaughn]

I think it should be possible to do a much better job out of the box here. I've posted #836 with the direction I'm currently considering. Preview docs at https://react-window-git-aria-roles-brian-vaughns-projects.vercel.app/

[bvaughn]

This potential change has been published as react-window@2.0.2-alpha.0. Try it out and let me know what you think.

npm install  react-window@alpha

[tperamaki-tt]

https://react-window-git-aria-roles-brian-vaughns-projects.vercel.app/list/fixed-row-height

the tagName here did not work yet, but otherwise it looked now way better! 👍