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

fix(a11y): settings items without href #2767

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

userquin
Copy link
Member

@userquin userquin commented Apr 5, 2024

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)

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 2dc2c34
🔍 Latest deploy log https://app.netlify.com/sites/elk-docs/deploys/66105834a45155000810e5f7

Copy link

netlify bot commented Apr 5, 2024

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
Copy link
Member

shuuji3 commented Apr 6, 2024

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
Copy link
Member Author

userquin commented Apr 6, 2024

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

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