ant-design Dropdown is missing critical accessibility attributes

lmvvr0a8  于 4个月前  发布在  其他
关注(0)|答案(4)|浏览(52)

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.

guykilcj

guykilcj1#

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,提前感谢和期待您的贡献。

iqjalb3h

iqjalb3h2#

@afc163 Hello can i try this ?

qf9go6mv

qf9go6mv4#

@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 ?

相关问题