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/droprdown accessibility #48499

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

KirilCycle
Copy link

@KirilCycle KirilCycle commented Apr 16, 2024

🤔 This is a ...

  • accessibility improvement

🔗 Related issue link

Fix #48132

📝 Changelog

Language Changelog
🇺🇸 English I added all needed attributes to dropdown components, and now dropdown menu can be opened by space or enter, keypress
🇨🇳 Chinese

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

Copy link

stackblitz bot commented Apr 16, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link
Contributor

github-actions bot commented Apr 16, 2024

👁 Visual Regression Report for PR #48499 Failed ❌

🎯 Target branch: master (d743ee3)
📖 View Full Report ↗︎

Expected (Branch master) Actual (Current PR) Diff
transfer-table-transfer.compact.png transfer-table-transfer.compact.png transfer-table-transfer.compact.png transfer-table-transfer.compact.png
transfer-table-transfer.compact.png transfer-table-transfer.compact.png transfer-table-transfer.compact.css-var.png transfer-table-transfer.compact.css-var.png
transfer-table-transfer.dark.png transfer-table-transfer.dark.png transfer-table-transfer.dark.png transfer-table-transfer.dark.png
transfer-table-transfer.dark.png transfer-table-transfer.dark.png transfer-table-transfer.dark.css-var.png transfer-table-transfer.dark.css-var.png
transfer-table-transfer.default.png transfer-table-transfer.default.png transfer-table-transfer.default.png transfer-table-transfer.default.png
transfer-table-transfer.default.png transfer-table-transfer.default.png transfer-table-transfer.default.css-var.png transfer-table-transfer.default.css-var.png

Check Full Report for details

Copy link
Contributor

github-actions bot commented Apr 16, 2024

Preview is ready

Copy link
Contributor

  • 🚨 Please fill changelog in the PR

    • Write with a developer-oriented perspective and narrative method, without describing the details of the repair
    • Describing the problem and the impact on the developer
    • describing the user-first site problem, not your solution
    • Refer: https://ant.design/changelog#501
  • 🚨 请填写 PR 中的 changelog

    • 请用面向开发者的角度叙述方式撰写,不描述修复细节
    • 描述问题和对开发者的影响
    • 描述用户第一现场的问题,而非你的解决方式
    • 参考:https://ant.design/changelog-cn#501

Copy link
Author

@KirilCycle KirilCycle left a comment

Choose a reason for hiding this comment

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

Is that okay that dropdown need additional tab press to focus on first menu element ?

@@ -43,7 +43,8 @@ export type DropdownArrowOptions = {
};

export interface DropdownProps {
menu?: MenuProps;
menu: MenuProps;
menuLabel?: string;
Copy link
Author

Choose a reason for hiding this comment

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

Can i make this prop as required ? Each menu must have unique label, as i use it to bound menu btn and menu itself

@@ -238,7 +263,9 @@ const Dropdown: CompoundedComponent = (props) => {

let overlayNode: React.ReactNode;
if (menu?.items) {
overlayNode = <Menu {...menu} />;
overlayNode = (
<Menu ref={menuRef} aria-labelledby={`${menuLabel}-button`} id={`${menuLabel}-menu`} {...menu} />
Copy link
Author

Choose a reason for hiding this comment

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

No need for ref

const handleKeyPress = (e: KeyboardEvent) => {
if (e.key === 'Enter' || e.code === 'Space') {
targetElement.removeEventListener('keypress', handleKeyPress);
onOpenChange?.(true, { source: 'menu' })
Copy link
Author

Choose a reason for hiding this comment

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

Is better to use onInnerOpenChange then this hardcode

@KirilCycle KirilCycle marked this pull request as ready for review April 21, 2024 15:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dropdown is missing critical accessibility attributes
1 participant