search

jupyterlab / lumino

Lumino is a library for building interactive web applications
https://lumino.readthedocs.io/
Other
635 stars 126 forks source link

[accessibility] Uses the arrow keys for tab bar navigation #612

Closed brichet closed 1 year ago

brichet commented 1 year ago

This PR follows https://github.com/jupyterlab/lumino/pull/583 and https://github.com/jupyterlab/lumino/pull/590 to use the arrow keys for tab bar navigation.

After this PR: By default the tab bar elements have tabindex="-1", except for the current one (or the first one) which has tabindex="0". When a tab is focused, the arrow keys are used to change the focused tab (left/right for horizontal tab bars, up/down for vertical ones). Pressing the tabulation again moves the focus to an element other than the tab bar.

Closes https://github.com/jupyterlab/lumino/pull/581

brichet commented 1 year ago

Related issues:

fcollonval commented 1 year ago

To test the different options of the tab bar I used the dockpanel example changing the default value.

brichet commented 1 year ago

Thanks @fcollonval for reviewing it.

I guess it closes #581, isn't it?

I believe so

I tested turning on titlesEditable and this leaves to a conflict. And it is not possible to click on the input field

Fixed in https://github.com/jupyterlab/lumino/pull/612/commits/2bb346684edaf91ad0001ebaa268765c9cae981e I'll add tests on it. :heavy_check_mark:

brichet commented 1 year ago

Finally should we implement Home and End. That sounds like a simple and good addition.

Yes we can implement it easily I think. The End could led to the last tab or the add button. Do you have an opinion on it ?

Done :heavy_check_mark:

brichet commented 1 year ago

Delete could be a good addition in the future. But as the shortcut to close a Tab in JLab is not that one, this will be require more discussion.

I think it should be in a follow up PR. Also i wonder if it could be interesting to open the context menu with the ArrowDown (on horizontal tab bar), but I don't think there is a way without triggering the right click event (which shouldn't work, like triggering the Tabulation I guess)

brichet commented 1 year ago

I'm wondering how some part of the code behaves if the option allowDeselect (that actually does not make sense for me...) is true.

Seems to have no effect on the focus

tonyfast commented 1 year ago

Finally should we implement Home and End. That sounds like a simple and good addition.

APG tab pattern marks Home, End, and Delete as optional interactions; there expected behaviors are explained. there is no mention of Shift + Delete to restore a deleted tab, but i think that would be most consistent.

tonyfast commented 1 year ago

this issue resolves some concerns i presented in https://github.com/jupyter/notebook/issues/6935#issuecomment-1599012305

tonyfast commented 1 year ago

thanks for working on this @brichet it will save a lot of work for keyboard users!

is there a way i can test the actual experience from the pull request on github or do i have to build locally?

brichet commented 1 year ago

is there a way i can test the actual experience from the pull request on github or do i have to build locally?

The only way I know is to build locally (lumino), link the package in Jupyterlab (jlpm link path_to_lumino/packages/widgets) and build jupyterlab.

brichet commented 1 year ago

Finally should we implement Home and End. That sounds like a simple and good addition.

APG tab pattern marks Home, End, and Delete as optional interactions; there expected behaviors are explained. there is no mention of Shift + Delete to restore a deleted tab, but i think that would be most consistent.

Thanks for your feedback. The Delete should probably be implemented in another PR to discuss the restoration feature.

tonyfast commented 1 year ago

The only way I know is to build locally (lumino), link the package in Jupyterlab (jlpm link path_to_lumino/packages/widgets) and build jupyterlab.

i'll try to get a dev environment up to test this. don't know if i can give a thorough review with out testing locally. i'll do my best to find some time.

fcollonval commented 1 year ago

@tonyfast there is an indirect easy way to test this using the doc built on the PR: https://lumino--612.org.readthedocs.build/en/612/examples/dockpanel/index.html

It contains a dockpanel example that you can use for testing the changes of this PR.

tonyfast commented 1 year ago

thanks for dropping that test link. here are the things i tested:

i'm finding two issues:

  1. i don't always return to the last active tab when I press Shift+Tab after going passed a tab panel. i expect that Shift+Tab will always land me on the active tab.
  2. when i rearrange the tabs, Tab does not always find the most recently active tab in the component.

a personal preference would be automatic tab activation rather than manual activation. is this a switch the component could have? this way when i arrow to a tab i see the contents. automatic tab activation would reduce the work a keyboard user would have to do to explore their content.

fcollonval commented 1 year ago

Thanks @tonyfast for testing.

I'll merge this one as is as it matches the PR description and to open follow-up issues for