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.

Sign up for GitHub

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

Jump to bottom

Fix visibility of focused skip link on docs site #2405

Merged
merged 2 commits into from
Jan 19, 2022
Merged

Fix visibility of focused skip link on docs site #2405

merged 2 commits into from
Jan 19, 2022

Conversation

delucis
Copy link
Member

@delucis delucis commented Jan 16, 2022

Changes

  • This PR makes the “Skip to Content” link visible on focus on the docs site and in the docs example project.
Before (link is focused but not visible) After (link is focused and visible)
Screen Shot 2022-01-16 at 15 38 07 Screen Shot 2022-01-16 at 15 38 47

This pattern is recommended by the Institute for Disability Research, Policy, and Practice (and was also I think already the intended behaviour given that styling was included for the link when visible).

Testing

Tested by running yarn workspace docs dev and manually checking the skip link was visible when tabbing into the page.

Docs

Only this tweak in the styling of the skip link.

@delucis
Fix visibility of focused skip link on docs site
ac890b5 
The `sr-only` utility class used on the “Skip to Content” link at the top of each page in the docs is designed to be paired with the `focus:not-sr-only` class. `focus:not-sr-only` was missing on the skip link, meaning it was never shown even when focused.
@delucis
Fix visibility of focused skip link in docs example project
056e18d 
Apply the same fix as ac890b5 to the same component in the docs starter project.
@changeset-bot
Copy link

changeset-bot bot commented Jan 16, 2022

⚠️ No Changeset found

Latest commit: 056e18d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions github-actions bot added docs pkg: example Related to an example package (scope) labels Jan 16, 2022
@netlify
Copy link

netlify bot commented Jan 16, 2022

✔️ Deploy Preview for astro-docs-2 ready!

🔨 Explore the source changes: 056e18d

🔍 Inspect the deploy log: https://app.netlify.com/sites/astro-docs-2/deploys/61e42f9632890e0008e1be67

😎 Browse the preview: https://deploy-preview-2405--astro-docs-2.netlify.app

jonathantneal
jonathantneal approved these changes Jan 19, 2022
View reviewed changes
Copy link
Contributor

@jonathantneal jonathantneal left a comment

Choose a reason for hiding this comment

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

Oh wow this is great. I never caught that ours was missing the tab stop. Thank you so much, @delucis.

@jonathantneal jonathantneal merged commit 9deada6 into withastro:main Jan 19, 2022
@delucis delucis deleted the delucis/docs/fix-skiplink branch January 19, 2022 20:37
@ilovera-woolworthslimited ilovera-woolworthslimited mentioned this pull request Feb 18, 2024
Open
@ilovera-woolworthslimited ilovera-woolworthslimited mentioned this pull request Apr 5, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jonathantneal jonathantneal jonathantneal approved these changes

Assignees
No one assigned
Labels
pkg: example Related to an example package (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@delucis @jonathantneal