Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

make scrollbody focusable #297

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

Lexachoc
Copy link
Contributor

@Lexachoc Lexachoc commented Oct 21, 2024

If there is a scrollable table, it would be nice to focus on the scrollbody so that we can use the keyboard to scroll.

This PR adds the tab index to the scrollbody according to the value:

Result:
recording

Note: It seems to be redundant if KeyTable Plugin is used, as keyboard navigation is already available for cells.
Example: https://datatables.net/extensions/keytable/examples/initialisation/scrolling.html

When there's a scrollable table, it would be nice to focus to the scrollbody so that we can use keyboard to scroll
@AllanJard
Copy link
Contributor

Thanks for the suggestion! I rather like this - it is however the first time I've encountered this request, so I'm not going to immediately pull it in, but let's see if there is any other feedback from others who would like this.

@pczarn2
Copy link

pczarn2 commented Oct 22, 2024

It looks like this example already has the focus on the tbody during tabbing: https://datatables.net/extensions/responsive/examples/styling/scrolling.html
However, the behavior changes once I click to sort by one of the columns. I can still use keyboard arrows to scroll up/down even when the tabbing behavior is different.

@Lexachoc
Copy link
Contributor Author

Lexachoc commented Oct 22, 2024

@pczarn2 Hi, this is because the Responsive plugin is used, which has tabindex in the first column.
Similar to how the Select plugin is used in this exmaple, which has a checkbox in the first column that can be focused.

But when using only scrollY, there is no focusable cell in the tbody.

@pczarn2
Copy link

pczarn2 commented Oct 22, 2024

Here is a comment from our QA/Accessibility team member.

Hmm, not 100% sure if I understand the question and situation, though I know enough to make one comment.

As long as just a keyboard can be used to navigate/scroll through a table where only some of it visible at a time, that seems fine.

If someone using just a keyboard cannot see part of the data table, then that’s where the issue comes up.

Giving the scroll body keyboard focus does introduce an unpleasant interaction with screen readers, though. NVDA starts to read the contents of the ENTIRE table while JAWS still stuck and reads little/nothing, which is confusing for the user.

@Lexachoc
Copy link
Contributor Author

@pczarn2 Thank you! I completely overlooked the usecase of screen reader. (Sorry I have no experience with it). So it would be better not to focus the scroll body, but focus to the cells instead (as in the examples that have focusable cells). If someone want to do that, then they can manually use the render function (example) to do that.

This PR should then not be merged and developers should manually ensure the accessibility.

@pczarn2
Copy link

pczarn2 commented Oct 22, 2024

I think so too. The first example you gave (https://datatables.net/extensions/keytable/examples/initialisation/simple.html) seems to be best use for this particular case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants