Accessibility: Remove infinite scrolling from Discover table

[cjcenizal]

This table utilizes 'infinite scrolling' to add additional content as the user reaches the bottom of the page. Technically, it stops at 500 documents, but this is a very high number. This can make it difficult for keyboard users to navigate past this area. We should remove the infinite scroll and replace it with a "Load more items" link at the bottom of the page.

[eprothro]

Is there anyway to accomplish this accessibility need without losing the benefit of loading next pages without requiring a button click/selection?

This change, as described, will frustrate many users.

[weltenwort]

It's not like the infinite scrolling actually loads anything new from the server. All 500 documents are loaded from the start, but not all are displayed (probably for performance reasons). When the table has been refactored to React we might not need that trick.

In the meantime a "scroll to bottom" link, that is invisible to non-screen-readers might be able to serve as an accessible way to trigger "display more". @cjcenizal, what do you think?

[cjcenizal]

@weltenwort That's a really interesting suggestion. Considering it made me also reconsider the original problem we're trying to solve:

This can make it difficult for keyboard users to navigate past [the infinitely scrolling table].

I assume this is because as the user tabs through the table, they'll get to the bottom, causing the table to continue loading. So any content in the tab order after the table will become difficult to tab to.

So your solution could work if we rename it something like "Skip to content after table" and triggering it will set the focus on the first element immediately following the table. After thinking about it some more, I think this is a really good solution. The alternative would be to redesign the table so that content is accessible via arrow keys or something, which would be kind of weird. I like it, @weltenwort!

[cjcenizal]

For future reference, there's information about how to implement this under the "Skip to main content" section on http://webaim.org/techniques/css/invisiblecontent/.