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

brichet · 2023-07-20T08:32:38Z

This PR follows #583 and #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 #581

brichet · 2023-07-20T12:13:34Z

Related issues:

Accessibility Issues Needing Addressing for WCAG 2.1 compliance (As of Version 7.0.0a15) jupyter/notebook#6800
Notebook 7 prerelease keyboard navigation review jupyter/notebook#6595
Accessibility Issues Needing Addressing for WCAG 2.1 compliance (As of Version 2.2.6) jupyterlab#9399
Make Side Bars completely accessible jupyterlab#9686

fcollonval

Thanks a lot @brichet; I have some questions:

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

I tested turning on titlesEditable and this leaves to a conflict. If the user is focused in the input field to edit the title, pressing the arrow actually move the focus to the surrounding tab instead of moving within the input field.
And it is not possible to click on the input field to place the cursor within the existing title string. It basically set the focus on the tab panel - I don't know if this is a consequence of this PR but if you could fix it 😉

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

I think the two later cases deserve unit tests.

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

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.

packages/widgets/src/tabbar.ts

fcollonval · 2023-07-20T12:44:01Z

packages/widgets/src/tabbar.ts

+      event.preventDefault();
+      event.stopPropagation();


Should the event being stopped even if there is only one element?

I thinks so, to avoid different behavior depending on the number of elements.

packages/widgets/src/tabbar.ts

fcollonval · 2023-07-20T12:54:35Z

packages/widgets/src/tabbar.ts

      };
+      if (data.tabIndex !== undefined) {
+        ariaAttributes.tabindex = `${data.tabIndex}`;


In case this it is undefined should it be set to some default value?

Having tabindex="-1" as default would probably make sense for a tab.

I'm not quite sure about the difference between tabindex="-1" and tabindex not set.
It seems that the behavior is not the same for input elements and other elements.
In the case of the tab, not setting the tabindex would make it not focusable with tabulation, nor 'programatically'. I'm not sure how useful it can be...

I'm not quite sure about the difference between tabindex="-1" and tabindex not set.
It seems that the behavior is not the same for input elements and other elements.

when tabindex is not defined, interactive elements automatically receive tab focus, while non-interactive elements don't. so if you wan't to avoid a tab on an interactive widget you'd use tabindex=-1. if you want to add a non-interactive dom element to the tab order then you'd use tabindex=0.

the ARIA authoring guide example for this pattern uses buttons for the tab element which means they need control what doesn't get tabbed to; the implementation needs to choose one tab element to have tabindex=0, or undefined, and the rest are tabindex=-1. if the tab elements are made of non-interactive elements then the task is to make elements appear in the dom order by adding tabindex=0 to one element.

In the case of the tab, not setting the tabindex would make it not focusable with tabulation, nor 'programatically'. I'm not sure how useful it can be...

hopefully folks don't mess with tab order. that should be private. most recommendations say to avoid tabindex>0.

fixed in 9d395d8

fcollonval · 2023-07-20T13:09:05Z

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

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

…abindex

brichet · 2023-07-20T15:52:03Z

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 2bb3466
I'll add tests on it. ✔️

brichet · 2023-07-20T15:55:20Z

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 ✔️

brichet · 2023-07-20T15:59:11Z

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 · 2023-07-20T16:06:58Z

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 · 2023-07-20T16:07:31Z

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 · 2023-07-20T16:09:43Z

this issue resolves some concerns i presented in jupyter/notebook#6935 (comment)

tonyfast · 2023-07-20T16:11:29Z

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 · 2023-07-20T16:15:34Z

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 · 2023-07-20T16:16:38Z

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 · 2023-07-20T16:18:27Z

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 · 2023-07-21T14:05:35Z

@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.

fcollonval

Thanks @brichet

I will leave it open to give Tony the time to test.

Would you mind opening a follow-up issue because in Firefox (version 114 on Debian 12) when editing a title, Home, End and click do not work for me? But they do on chromium (version 114).

tonyfast · 2023-07-22T02:01:32Z

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

the left/right arrows work and they cycle as expected in the APG example.
Enter and Spacebar manually activates the tabs
shift+tab returns to the active tab
tab navigation works after reordering the dock panels

i'm finding two issues:

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.
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 · 2023-07-23T09:37:23Z

Thanks @tonyfast for testing.

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

Tab andShift+Tab linked to the dockpanel
auto tab activation
issue with Firefox when editing

Uses the arrow keys for tab bar navigation

12a181b

github-actions bot assigned brichet Jul 20, 2023

brichet added accessibility Addresses accessibility needs enhancement New feature or request labels Jul 20, 2023

Add tests

306e71a

brichet marked this pull request as ready for review July 20, 2023 10:34

brichet added 2 commits July 20, 2023 12:44

Add tests on vertical tab bar

37810b6

Update api

ddcad85

brichet requested review from tonyfast and fcollonval July 20, 2023 12:08

fcollonval requested changes Jul 20, 2023

View reviewed changes

brichet and others added 6 commits July 20, 2023 16:05

typo

6033487

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Update packages/widgets/src/tabbar.ts

8ab2fa5

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Update packages/widgets/src/tabbar.ts

49796cd

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Update packages/widgets/src/tabbar.ts

6571ef1

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Set a default tabindex for tabs and avoid looping on tabs to update t…

9d395d8

…abindex

Fix arrow keys and click on editable title input

2bb3466

Manage 'Home' and 'End' keys

705b918

Add tests on titles editable

ce2b280

fcollonval approved these changes Jul 21, 2023

View reviewed changes

fcollonval merged commit 5e0b90a into jupyterlab:main Jul 27, 2023
18 checks passed

brichet deleted the tabbar_navigation branch August 14, 2023 09:06

krassowski mentioned this pull request Aug 31, 2023

Add global keyboard shortcuts for all sidebar widgets jupyterlab/jupyterlab#14799

Merged

SylvainCorlay mentioned this pull request Dec 4, 2023

Blog post on the recent improvements to the keyboard navigation in JupyterLab jupyter/accessibility#142

Closed

brichet mentioned this pull request Dec 6, 2023

Accessibility Issues Needing Addressing for WCAG 2.1 compliance (As of Version 2.2.6) jupyterlab/jupyterlab#9399

Open

24 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

brichet commented Jul 20, 2023 •

edited by fcollonval

brichet commented Jul 20, 2023

fcollonval left a comment

fcollonval Jul 20, 2023

brichet Jul 20, 2023

fcollonval Jul 20, 2023

brichet Jul 20, 2023

tonyfast Jul 20, 2023

brichet Jul 20, 2023

fcollonval commented Jul 20, 2023

brichet commented Jul 20, 2023 •

edited

brichet commented Jul 20, 2023 •

edited

brichet commented Jul 20, 2023

brichet commented Jul 20, 2023

tonyfast commented Jul 20, 2023

tonyfast commented Jul 20, 2023

tonyfast commented Jul 20, 2023

brichet commented Jul 20, 2023

brichet commented Jul 20, 2023

tonyfast commented Jul 20, 2023

fcollonval commented Jul 21, 2023

fcollonval left a comment

tonyfast commented Jul 22, 2023

fcollonval commented Jul 23, 2023

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

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

Conversation

brichet commented Jul 20, 2023 • edited by fcollonval

brichet commented Jul 20, 2023

fcollonval left a comment

Choose a reason for hiding this comment

fcollonval Jul 20, 2023

Choose a reason for hiding this comment

brichet Jul 20, 2023

Choose a reason for hiding this comment

fcollonval Jul 20, 2023

Choose a reason for hiding this comment

brichet Jul 20, 2023

Choose a reason for hiding this comment

tonyfast Jul 20, 2023

Choose a reason for hiding this comment

brichet Jul 20, 2023

Choose a reason for hiding this comment

fcollonval commented Jul 20, 2023

brichet commented Jul 20, 2023 • edited

brichet commented Jul 20, 2023 • edited

brichet commented Jul 20, 2023

brichet commented Jul 20, 2023

tonyfast commented Jul 20, 2023

tonyfast commented Jul 20, 2023

tonyfast commented Jul 20, 2023

brichet commented Jul 20, 2023

brichet commented Jul 20, 2023

tonyfast commented Jul 20, 2023

fcollonval commented Jul 21, 2023

fcollonval left a comment

Choose a reason for hiding this comment

tonyfast commented Jul 22, 2023

fcollonval commented Jul 23, 2023

brichet commented Jul 20, 2023 •

edited by fcollonval

brichet commented Jul 20, 2023 •

edited

brichet commented Jul 20, 2023 •

edited