GlennRicaud/data-toolbox-app

Keyboard navigability

Closed this issue · 8 comments

Hi! Thanks for your work on this application ☺️

While working today, I realized that most of the app seems to be unreachable by keyboard alone. As someone who primarily uses the keyboard for navigation and interaction with web pages, that makes the app less delightful than it could be.

I don't know how highly this will be prioritized, but I thought I'd report what I found, anyway:

Landing page

On a narrow screen (when the left-hand menu) is hidden, there are no tabbable elements on the landing page:

image

I checked the source and found that they icons on the grid seem to be divs with click handlers. If they instead were anchor elements (as in the side menu), they'd be reachable.

Other pages

On most other pages, the only things I seem to be able to reach and interact with via the keyboard are the breadcrumbs and input elements. The tables (with all their buttons and checkboxes) have no focusable elements. This goes for all table rows, checkbox icons, button icons etc.

It seems most of this would be solved by using button elements for buttons, input elements for checkboxes and by wrapping the content within rows them in anchor tags or similar.


Do you have any thoughts on this?

Cheers!

Hei @thomasheartman

Thanks a lot for the suggestion.

It is true that I started with the naive idea of having divs with click listeners.
I changed after some time the breadcrumbs and navigation items to anchors as you mentioned.
The other components (buttons, fields, ...) should also be reworked the way you mentioned.

I will focus on this next then.

I will push a beta version and copy the link in this issue for you to try if you have the time. I would like to have your feedback.

Yeah, that's great! And I'd be happy to help you out on this, so just keep me posted and I'll do what I can 😄

I split this issue into 2 issues:
Navigability - Anchors in tables & view summaries - Done and released in DT 5.0.12
Navigability - Actions as anchors & buttons - To do

That’s great! I’ll take a look at the first issue later today 😁

Hey, @GlennRicaud! Sorry I didn't get around to it yesterday, but I just downloaded and tested it a bit now, and it immediately works much better for me. Thanks! 😄

Looking forward to seeing the results for the action items too!

Hei,
I released DT 5.0.13 with actions as buttons.
There are still some improvements necessary but it should now be usable with a keyboard I think.

Nice 🥳 I had a little play around just now and yeah, it seems to work for my purposes at least! Mind you, I haven't used it for anything advanced just yet, so I may well be missing some use cases, but from what I can tell, at least, everything's much better. Nice work! 🎉

You say there's still some necessary improvements: what are you thinking of? And would you like to keep this issue open for now? If not, feel free to close it: my issue has been resolved, at least 😄

Some things could be links instead of buttons, we could still improve the usage for keyboard with shortcuts, ...
But yes I also think that about keyboard it is much more usable now and we can close this issue at least