Skip to content

feat(a11y): add access keys shortcuts#2768

Draft
userquin wants to merge 3 commits into
mainfrom
userquin/feat-add-accesskeys
Draft

feat(a11y): add access keys shortcuts#2768
userquin wants to merge 3 commits into
mainfrom
userquin/feat-add-accesskeys

Conversation

@userquin
Copy link
Copy Markdown
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

@bolt-new-by-stackblitz
Copy link
Copy Markdown

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

@netlify
Copy link
Copy Markdown

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

@netlify
Copy link
Copy Markdown

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.

@ayo-run ayo-run closed this Feb 9, 2025
@ayo-run ayo-run deleted the userquin/feat-add-accesskeys branch February 9, 2025 14:24
@ayo-run ayo-run restored the userquin/feat-add-accesskeys branch February 9, 2025 14:47
@ayo-run ayo-run reopened this Feb 9, 2025
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.

2 participants