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

Tables cannot be explored with keyboard navigation #37

Open
parseccentric opened this issue Aug 31, 2021 · 6 comments
Open

Tables cannot be explored with keyboard navigation #37

parseccentric opened this issue Aug 31, 2021 · 6 comments

Comments

@parseccentric
Copy link
Contributor

parseccentric commented Aug 31, 2021

Expected behavior
Table rows and table rows' buttons are navigable by pressing tab on a keyboard.

Actual behavior
Inconsistent:

  • In "Admin > Users" and "Admin > Courses", action buttons and table pagination controls are focusable, but not checkboxes
  • In "Dashboard > Assets" and the "Assets" page itself, only the search box and table pagination controls are focusable. Importantly, the rows themselves are clickable, but not focusable by the keyboard
  • In "[Course] > [Lab] > Edit Lab Details > Assets" and "[Course] > Schedule New Lab", only the search box and table pagination controls are focusable

How to reproduce
On any page with a table, try to navigate the table with a keyboard only.

Thank you @ho-yi-shiuan for bringing this up!

@parseccentric
Copy link
Contributor Author

parseccentric commented Aug 31, 2021

Limitations of the built-in component provided by Vue are revealed on the demo page: https://v2.vuetifyjs.com/en/components/data-tables/

You can see how checkboxes are not focusable at all. You can also see how action buttons are focusable by default.

As for clicking on a row, I recommendation is that we deprecate the ability to click on the row itself in favor of having an new action button that does the same thing. We have had several users attempt to click the checkbox or the action buttons instead of the row itself, so this could eliminate some confusion.

As for selecting a row (like in Edit Lab Details), I do not know the best way forward.

Shuan and I decided to deprecate the table on the Dashboard page with the goal of making the Dashboard page fully keyboard accessible.

@wallacerob
Copy link
Contributor

Yeah, I don't even remember why we have checkboxes for Labs in the first place! I like the idea of having action buttons for the various modes, "Edit", "View", "Delete", etc.

@wallacerob
Copy link
Contributor

Also, yeah the assets table has always seemed a little out of place on the dashboard.

@parseccentric
Copy link
Contributor Author

Haha, yeah. We probably should have removed it when we took out the metrics summary. One day we'll have a cool AI dashboard B)

@parseccentric
Copy link
Contributor Author

Oh also, @ho-yi-shiuan, a couple things:

  1. Just a pre-emptive reminder that opening an issue is more to keep track of the conversation, and not necessarily to say "work on this right now" -- just so you don't feel like assignments are coming in left and right :)
  2. When you said that putting tabindex on a table would select the whole table, what would happen if you pressed enter on that table? Probably nothing, but part of me hopes that it magically would focus a row, somehow.

@ho-yi-shiuan
Copy link
Collaborator

For 2, actually the whole table isn't able to be selected, although it has a tabindex, I can't select it with tab.

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

No branches or pull requests

3 participants