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): [table] add table selection checkbox aria-labels #13908

Merged
merged 1 commit into from
Aug 12, 2023
Merged

fix(components): [table] add table selection checkbox aria-labels #13908

merged 1 commit into from
Aug 12, 2023

Conversation

Karolis-Stoncius
Copy link
Contributor

@Karolis-Stoncius Karolis-Stoncius commented Aug 8, 2023

When checkboxes have no label, it causes accessibility issues. This commit adds aria-labels to table's selection checkboxes

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 6b2bae3

Improved accessibility of selection column in table component. Added ariaLabel attributes to checkbox elements using column label as value.

Related Issue

Fixes #___.

Explanation of Changes

🤖 Generated by Copilot at 6b2bae3

  • Add ariaLabel attribute to header and body checkbox elements in selection column for accessibility (link, link, link)
  • Modify renderHeader function of selection column to accept column parameter with column information (link)

When checkboxes have no label, it causes accessibility issues. This commit adds aria-labels to
table's selection checkboxes
@pull-request-triage
Copy link

👋 @Karolis-Stoncius, seems like this is your first time contribution to element-plus.

  • Please make sure that you have read our guidelines and code of conduct before making a contribution.
  • 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.

@pull-request-triage pull-request-triage bot added 1st contribution Their very first contribution Needs Review labels Aug 8, 2023
@github-actions
Copy link

github-actions bot commented Aug 8, 2023

@github-actions
Copy link

github-actions bot commented Aug 8, 2023

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 Aug 9, 2023

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

Copy link
Member

@ryuhangyeong ryuhangyeong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Karolis-Stoncius

Can you provide example code using the Element Plus Play ground?

@Karolis-Stoncius
Copy link
Contributor Author

@Karolis-Stoncius

Can you provide example code using the Element Plus Play ground?

Here. Using axe devtool "Form elements must have labels" and "Table header text should not be empty" issues are raised.

@ryuhangyeong
Copy link
Member

@tolking can you take a look at this? 🙇

@tolking tolking merged commit b9a8879 into element-plus:dev Aug 12, 2023
13 checks passed
@element-bot element-bot mentioned this pull request Aug 25, 2023
3 tasks
laizuan pushed a commit to laizuan/element-plus that referenced this pull request Sep 5, 2023
…ement-plus#13908)

When checkboxes have no label, it causes accessibility issues. This commit adds aria-labels to
table's selection checkboxes
consultation-applio pushed a commit to consultation-applio/element-plus that referenced this pull request Nov 10, 2023
…ement-plus#13908)

When checkboxes have no label, it causes accessibility issues. This commit adds aria-labels to
table's selection checkboxes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants