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 #10126

Merged
merged 13 commits into from
May 5, 2021
Merged

Add Skip Link #10126

merged 13 commits into from
May 5, 2021

Conversation

0618
Copy link
Contributor

@0618 0618 commented Apr 21, 2021

References

#9688

Code changes

  • Add SkipLink Widget

User-facing changes

  • Add SkipLink UI. When user tab through the page, the first think they focus is the SkipLink.
  • Hit enter on the SkipLink "Skip to Filter Files", the focus moves to the "Filter Files Input".
Screen.Recording.2021-04-27.at.11.01.05.PM.mov

Backwards-incompatible changes

@jupyterlab-dev-mode
Copy link

Thanks for making a pull request to JupyterLab!

To try out this branch on binder, follow this link: Binder

@github-actions github-actions bot added Design System CSS pkg:application tag:CSS For general CSS related issues and pecadilloes labels Apr 21, 2021
@blink1073 blink1073 added this to the 3.1 milestone Apr 21, 2021
@0618 0618 marked this pull request as ready for review April 28, 2021 16:48
@isabela-pf
Copy link
Contributor

This looks done from my perspective! I think this is a good place to fulfill skiplink needs and for us to build off of in having a more robust set of skiplinks by region (as discussed in accessibility meetings) once we know this is working.

Wonderful work on and bravely diving into a new topic and asking thoughtful questions (while teaching us all more about skiplink in the process)!

@marthacryan
Copy link
Member

Side note: JupyterLab uses a yarn.lock instead of a package-lock.json, could you remove that file from the PR?

@0618
Copy link
Contributor Author

0618 commented May 5, 2021

Side note: JupyterLab uses a yarn.lock instead of a package-lock.json, could you remove that file from the PR?

🤦 Removed.

Copy link
Member

@telamonian telamonian left a comment

Choose a reason for hiding this comment

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

LGTM! From a basic coding and layout perspective, this looks good. I'd like to get confirmation from @manfromjupyter that this skip link does what it's supposed to do before we pull it in

packages/application-extension/src/index.tsx Outdated Show resolved Hide resolved

private _focusFileSearch() {
const input = document.querySelector(
'#filename-searcher .bp3-input'
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
'#filename-searcher .bp3-input'
'#filename-searcher input'

.bp3-input is a styling class that may change in the future. Searching for just the input tag will make this less fragile

@telamonian telamonian self-requested a review May 5, 2021 17:04
Copy link
Member

@telamonian telamonian left a comment

Choose a reason for hiding this comment

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

Trying this PR out on binder, it seems like in fact it's currently not quite doing everything a skip link needs to be doing. We should discuss this more at the upcoming accessibility meeting.

Copy link
Member

@telamonian telamonian left a comment

Choose a reason for hiding this comment

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

LGTM (for real this time)! I tested this out on my own machine. There are still some issues (eg pressing tab multiple times when a notebook is open will end up indenting the first cell of the notebook and never reach the skip link), but basic functionality is there and we can iterate and improve on this

@telamonian telamonian merged commit b0fcb66 into jupyterlab:master May 5, 2021
@0618
Copy link
Contributor Author

0618 commented May 6, 2021

LGTM (for real this time)! I tested this out on my own machine. There are still some issues (eg pressing tab multiple times when a notebook is open will end up indenting the first cell of the notebook and never reach the skip link), but basic functionality is there and we can iterate and improve on this

Thanks!
Yea. I noticed that too today. I'll fix it next time.

@jasongrout jasongrout mentioned this pull request May 19, 2021
@github-actions github-actions bot added the status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. label Jan 19, 2022
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 19, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Design System CSS enhancement pkg:application pkg:filebrowser status:resolved-locked Closed issues are locked after 30 days inactivity. Please open a new issue for related discussion. tag:CSS For general CSS related issues and pecadilloes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants