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(components): [checkbox] indeterminate checkbox a11y fix #14322

Merged
merged 1 commit into from
Oct 12, 2023

Conversation

Karolis-Stoncius
Copy link
Contributor

@Karolis-Stoncius Karolis-Stoncius commented Sep 18, 2023

Fixes a bunch of a11y issues when a checkbox is indeterminate. Here's a playground , select one of the items and scan for a11y issues (I'm using axe DevTools). This PR fixes these a11y issues caused by an indeterminate checkbox:

https://dequeuniversity.com/rules/axe/4.7/aria-hidden-focus?application=AxeChrome
https://dequeuniversity.com/rules/axe/4.7/aria-toggle-field-name?application=AxeChrome
https://dequeuniversity.com/rules/axe/4.7/nested-interactive?application=AxeChrome

Please make sure these boxes are checked before submitting your PR, thank you!

  • Make sure you follow contributing guide English | (中文 | Español | Français).
  • Make sure you are merging your commits to dev branch.
  • Add some descriptions and refer to relative issues for your PR.

Description

🤖 Generated by Copilot at d7683ca

Improve checkbox component accessibility and functionality. Use native indeterminate attribute and remove unnecessary attributes from span and input elements in checkbox.vue.

Related Issue

Fixes #___.

Explanation of Changes

🤖 Generated by Copilot at d7683ca

  • Remove unnecessary attributes from span element wrapping input element (link)
  • Add indeterminate attribute to input element for partial selection state (link, link)
  • Remove aria-hidden attribute from input element to avoid accessibility issues (link, link)

@pull-request-triage
Copy link

👋 @Karolis-Stoncius, thank you for contributing element-plus.

  • You can comment with /label Components:[component_name] to add a label for which component you are working on.
  • You may join our Discord for staying tuned.

@github-actions
Copy link

Hello @Karolis-Stoncius, thank you for contributing to element-plus, please see our guideline to see how to make contribution

@github-actions
Copy link

github-actions bot commented Sep 18, 2023

@Karolis-Stoncius
Copy link
Contributor Author

This is the same PR as this, I had to delete my fork, so I created a new PR.

@github-actions github-actions bot added the CommitMessage::Qualified Qualified commit message label Sep 18, 2023
@github-actions
Copy link

🧪 Playground Preview: https://element-plus.run/?pr=14322
Please comment the example via this playground if needed.

@Karolis-Stoncius
Copy link
Contributor Author

@btea when will this be merged and released?

@btea
Copy link
Collaborator

btea commented Oct 11, 2023

Don't worry, it still needs to be reviewed and confirmed by others.

@tolking tolking merged commit 9e08fef into element-plus:dev Oct 12, 2023
13 checks passed
@element-bot element-bot mentioned this pull request Oct 13, 2023
3 tasks
cc-hearts pushed a commit to cc-hearts/element-plus that referenced this pull request Oct 15, 2023
consultation-applio pushed a commit to consultation-applio/element-plus that referenced this pull request Nov 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants