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

feat(components): [select] accessibility enhancement #14503

Merged
merged 5 commits into from
Oct 12, 2023
Merged

Conversation

tolking
Copy link
Member

@tolking tolking commented Oct 10, 2023

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 ceea20a

This pull request enhances the accessibility and customization of the select and scrollbar components. It adds aria-* attributes and roles to the select component and its options, and uses the useId and useAttrs hooks to generate unique ids and forward inherited attributes. It also adds style and class props to the scrollbar component and refactors some of its template and logic. It updates the test cases accordingly.

Related Issue

Fixes #14437.

Explanation of Changes

🤖 Generated by Copilot at ceea20a

  • Add style and class props to scrollbar component to enable customization (link)
  • Bind style and class props to root element of scrollbar component and pass inherited attributes to child component (link, link, link, link, link)
  • Generate and bind accessible attributes for option and select components using useId hook (link, link, link, link, link, link, link, link, link, link, link, link, link, link)
  • Test accessibility of select component in packages/components/select/__tests__/select.test.ts (link)
  • Remove outdated comment in packages/components/select/src/select.vue (link)

@github-actions
Copy link

github-actions bot commented Oct 10, 2023

@tolking tolking changed the title feat: accessibility enhancement feat(components): [select] accessibility enhancement Oct 10, 2023
@github-actions github-actions bot added the CommitMessage::Qualified Qualified commit message label Oct 10, 2023
@github-actions
Copy link

github-actions bot commented Oct 10, 2023

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

Co-authored-by: btea <2356281422@qq.com>
packages/components/select/src/select.vue Outdated Show resolved Hide resolved
docs/en-US/component/scrollbar.md Outdated Show resolved Hide resolved
Copy link
Collaborator

@btea btea left a comment

Choose a reason for hiding this comment

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

LGTM

@tolking tolking merged commit ca8846c into dev Oct 12, 2023
10 checks passed
@tolking tolking deleted the feat/select-a11y branch October 12, 2023 14:29
@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
)

* feat: accessibility enhancement

* fix: adjusting the attributes of Scrollbar

* Update docs/en-US/component/scrollbar.md

Co-authored-by: btea <2356281422@qq.com>

* docs: updata

* fix(components): [select] aria-selected error

---------

Co-authored-by: btea <2356281422@qq.com>
consultation-applio pushed a commit to consultation-applio/element-plus that referenced this pull request Nov 10, 2023
)

* feat: accessibility enhancement

* fix: adjusting the attributes of Scrollbar

* Update docs/en-US/component/scrollbar.md

Co-authored-by: btea <2356281422@qq.com>

* docs: updata

* fix(components): [select] aria-selected error

---------

Co-authored-by: btea <2356281422@qq.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CommitMessage::Qualified Qualified commit message
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Component] [select, option] Voice over and windows narrator does not read options in el-select
2 participants