Accessibility enhancements

[Jackleberry]

I'm trying to add a couple of accessibility features to a fork of react-infinite. What I'm aiming for is the following structure:

<div role="feed" aria-setsize="-1" aria-busy={true/false}>
  <div role="article"></div>
  <div role="article"></div>
  <div role="article"></div>
</div>

The important pieces here are that the role="feed" is the outer div and it directly contains the article divs (which are the children that I would pass in to react-infinite).

At the moment this is not possible because there is a nested div that sits directly inside the outer div and that nested div contains the children. This is from the react-infinite.jsx code:

<div
        className={this.computedProps.className}
        ref={c => {
          this.scrollable = c;
        }}
        style={this.utils.buildScrollableStyle()}
        onScroll={this.utils.nodeScrollListener}
      >
        <div
          ref={c => {
            this.smoothScrollingWrapper = c;
          }}
          style={infiniteScrollStyles}
        >

I would like to remove this nested div and apply infiniteScrollStyles to the outer div and then I would be able to implement the structure as above.

My question is, do you see any issue in removing that nested div? From what I can tell and from testing it locally, it should be fine.

[garetht]

It should be fine in your fork if it works. The smooth scrolling wrapper no longer seems to be used.

[Jackleberry]

@garetht Would you be interested in a PR into the main repo for this stuff? This would be the PR if you're interested: https://github.com/seatgeek/react-infinite/pull/245