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

Dropdown is missing critical accessibility attributes #48132

Open
tomekregulski opened this issue Mar 27, 2024 · 4 comments · May be fixed by #48499
Open

Dropdown is missing critical accessibility attributes #48132

tomekregulski opened this issue Mar 27, 2024 · 4 comments · May be fixed by #48499
Labels
⌨️ Accessibility help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request.

Comments

@tomekregulski
Copy link

What problem does this feature solve?

Currently the Dropdown component does not meet WAI-ARIA standards for Menu Button Pattern (https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/):

Specifically:

  • The element with role button has aria-haspopup set to either menu or true.
  • When the menu is displayed, the element with role button has aria-expanded set to true. When the menu is hidden, aria-expanded is set to false.
  • The element that contains the menu items displayed by activating the button has role menu.
    Optionally, the element with role button has a value specified for aria-controls that refers to the element with role menu.

And furthermore from the Menu and MenuBar Pattern (https://www.w3.org/WAI/ARIA/apg/patterns/menubar/), though neither of these roles are used in Dropdown, it can be reasonably deduced that in Dropdown, the element with role=button should accept an aria-label prop to assist those with screen readers properly identifying it.

The Dropdown component currently does accept an aria-label prop, but it does not seem to actually get applied anywhere in the DOM structure.

What does the proposed API look like?

Most of the above is satisfied by internal definitions, but the Dropdown component must expose an aria-label prop that maps to the aria-label attribute on the element that has role=button.

@afc163 afc163 added ⌨️ Accessibility help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. and removed unconfirmed labels Mar 28, 2024
Copy link
Contributor

Hello @tomekregulski. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @tomekregulski,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

giphy

@KirilCycle
Copy link

KirilCycle commented Apr 15, 2024

@afc163 Hello can i try this ?

@afc163
Copy link
Member

afc163 commented Apr 15, 2024

@KirilCycle Sure.

@KirilCycle KirilCycle linked a pull request Apr 16, 2024 that will close this issue
5 tasks
@KirilCycle
Copy link

KirilCycle commented Apr 17, 2024

@afc163 Hello! The focus doesn't land on the first menu item. It requires an additional tab press to activate it. This behavior is not recommended, but it's not a dealbreaker either. I'm finding it a bit tricky to set focus on the first element because the menu ref is null before the menu is mounted. Can you offer any hints, please ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
⌨️ Accessibility help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants