Skip to content

fix(a11y): settings items without href#2767

Open
userquin wants to merge 1 commit into
mainfrom
userquin/fix-a11y-links-and-accesskeys
Open

fix(a11y): settings items without href#2767
userquin wants to merge 1 commit into
mainfrom
userquin/fix-a11y-links-and-accesskeys

Conversation

@userquin

@userquin userquin commented Apr 5, 2024

Copy link
Copy Markdown
Member

Any anchor without href cannot be traversed with the keyboard.

This PR uses custom nuxt link and vue component for button when button attr configured: the Show intro "link" cannot be activated using the keyboard (maybe there is a shorcut)

@bolt-new-by-stackblitz

Copy link
Copy Markdown

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

@netlify

netlify Bot commented Apr 5, 2024

Copy link
Copy Markdown

Deploy Preview for elk-docs canceled.

Name Link
🔨 Latest commit 2dc2c34
🔍 Latest deploy log https://app.netlify.com/sites/elk-docs/deploys/66105834a45155000810e5f7

@netlify

netlify Bot commented Apr 5, 2024

Copy link
Copy Markdown

Deploy Preview for elk-zone ready!

Name Link
🔨 Latest commit 2dc2c34
🔍 Latest deploy log https://app.netlify.com/sites/elk-zone/deploys/661058349f8ef20008a5e03c
😎 Deploy Preview https://deploy-preview-2767--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.

@shuuji3

shuuji3 commented Apr 6, 2024

Copy link
Copy Markdown
Member

Any anchor without href cannot be traversed with the keyboard.

This is actually the correct behavior in browsers:

Some focusable HTML elements have a default tabindex value of 0 set under the hood by the user agent. These elements are an or with href attribute, (...)

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#:~:text=a%20logical%20sequence.-,Some%20focusable%20HTML%20elements,-have%20a%20default

So maybe setting tabindex="0" or changing <a> to <button> can be a simpler way instead of handling focus event by JavaScript.

I also noticed that some <SettingsItem> are rendered as <a disabled="false" ...>. This false is an invalid value for the disabled property and has the same effect as disabled="true" (ref. Explicitly set disabled="false" in the HTML does not work - Stack Overflow - https://stackoverflow.com/questions/32745276/explicitly-set-disabled-false-in-the-html-does-not-work/32745315#32745315). This may affect the focusable property because the disabled element is skipped to be focused. I'm going to make a PR to fix this attribute.

@userquin

userquin commented Apr 6, 2024

Copy link
Copy Markdown
Member Author

The html markup is wrong, we're using an anchor when it is a button, check other pages, we dont use anchor for render theme color buttons

@ayo-run ayo-run closed this Feb 9, 2025
@ayo-run
ayo-run deleted the userquin/fix-a11y-links-and-accesskeys branch February 9, 2025 14:24
@ayo-run
ayo-run restored the userquin/fix-a11y-links-and-accesskeys branch February 9, 2025 14:45
@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.

3 participants