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

Add Skip Link to Notebook #6844

Merged
merged 7 commits into from
May 4, 2023
Merged

Add Skip Link to Notebook #6844

merged 7 commits into from
May 4, 2023

Conversation

seirani
Copy link
Contributor

@seirani seirani commented Apr 19, 2023

Closes one of the tasks on #6800

Problem: "No skip link found (keyboard-only users have to tab 20 times every time to get to main region to do work)."
Changes to Code: Added a SkipLink widget

To Fix: Fails test case checking that all areas are empty by default. Skip to Link is only functional for Notebook page, not for Tree header page (where I wasn't sure what the desired "main" content to skip to should be)

Without using the skip link: User has to click through every single tab in the menu before reaching the edit feature of the first cell.

without-skip-link.mov

With the functional skip link: User tabs to "Skip to Main" first, then can click enter to go directly to the first cell edit.

with-skiplink.mov

@github-actions
Copy link
Contributor

Binder 👈 Launch a Binder on branch seirani/notebook/skip-link

@jtpio jtpio added this to the 7.0 milestone Apr 20, 2023
@jtpio
Copy link
Member

jtpio commented Apr 20, 2023

Thanks @seirani!

Looks like there are a few lint issues that should be fixed when running jlpm run prettier normally.

@jtpio
Copy link
Member

jtpio commented Apr 27, 2023

To Fix: Fails test case checking that all areas are empty by default. Skip to Link is only functional for Notebook page, not for Tree header page (where I wasn't sure what the desired "main" content to skip to should be)

Likely we could update the tests to remove the top area from this list:

['main', 'top', 'left', 'right', 'menu'].forEach((area) => {
const widgets = Array.from(shell.widgets(area as Shell.Area));
expect(widgets.length).toEqual(0);
});

And maybe check the top area has the skip link widget by default?

Copy link
Member

@jtpio jtpio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@jtpio jtpio changed the title [WIP] Add Skip Link to Notebook Add Skip Link to Notebook May 4, 2023
@jtpio jtpio merged commit f4d2286 into jupyter:main May 4, 2023
@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 4, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants