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

feat(a11y): add access keys shortcuts #2768

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

userquin
Copy link
Member

@userquin userquin commented Apr 5, 2024

This PR includes:

  • link for skip navigation in layout: SkipContent.ts component (cannot use anchor in vue SFC, NuxtLink doesn't support hash only) => check if we can get the full path and use it in the skip content link (using hash, nuxt is navigating, the aria announcer changes)
  • link for jump to content anchor to be included in all pages via skip-content attribute in MainContent SFC: SkipContentLink.vue SFC
  • access keys module in constants to define them: key + access key
  • new i18n json entry: a11y.skip_navigation
  • add accesskey to aside (WIP)
  • include accesskeys in shortcuts and maybe include a page (I need to review a11y in the dialog) (WIP)

NOTE: to activate accesskeys you need to check your browser documentation, on my Windows laptop and using Chrome I can activate Skip navigation using Alt + 1. Once Alt + 1 pressed you can press Tab, should focus the next focusable element in the main content of the page, rn only settings pages with Skip navigation links included.

EDIT: I need to change the styles in SkipContent.ts and SkipCintentLink.vue, there is layout shift when activating the link and getting the focus the link in SkipContentLink.vue , @patak-dev maybe you can check it, I have a lot of work changing all pages.

/cc @danielroe @antfu for nuxt-a11y https://www.nomisweb.co.uk/home/accesskeys.asp#content-anchor

Copy link

stackblitz bot commented Apr 5, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link

netlify bot commented Apr 5, 2024

Deploy Preview for elk-docs canceled.

Name Link
🔨 Latest commit c0915af
🔍 Latest deploy log https://app.netlify.com/sites/elk-docs/deploys/66108c9ec778e80008cdc26c

Copy link

netlify bot commented Apr 5, 2024

Deploy Preview for elk-zone ready!

Name Link
🔨 Latest commit c0915af
🔍 Latest deploy log https://app.netlify.com/sites/elk-zone/deploys/66108c9d7e29980008558850
😎 Deploy Preview https://deploy-preview-2768--elk-zone.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant