Clay Dropdown Keyboard Accessibility Improvements

[ethib137]

Is there an example you can provide via codesandbox.com?

https://clayui.com/docs/components/drop-down.html

What are the steps to reproduce?

1. Navigate to https://clayui.com/docs/components/drop-down.html
2. Press Tab until the dropdown trigger is focused.
3. Press Enter or Space to open the dropdown.

What is the expected result?

When the Menu is open, Esc should exit the dropdown and focus the trigger.

• Actual Result: The focus is moving to the bottom of the page instead of focusing the correct element. When the Menu is closed and the trigger is focused, Esc should NOT open the dropdown.
• Actual Result: Esc will open the menu when it's closed. When the Menu is open, Tab should exit the dropdown and focus the trigger.
• Actual Result: The focus is moving to the bottom of the page instead of focusing the correct element.

https://www.w3.org/WAI/ARIA/apg/patterns/menu/

• Tab and Shift + Tab:
  • When focus is on a menuitem in a menu or menubar, move focus out of the menu or menubar, and close all menus and submenus.

[matuzalemsteles]

Thanks @ethib137 for reporting this bug, this is also very much related to #5041

[ethib137]

Oh yeah, that is very related. I'm not sure how I missed the overlap when I searched for issues.

Navigating using arrow keys should be looped

This would be a great addition as well. In the patterns doc, it is listed as optional, but it would be great to include.

Down Arrow: When focus is in a menu, moves focus to the next item, optionally wrapping from the last to the first.

[github-actions[bot]]

This issue has been merged and will be released in DXP at https://issues.liferay.com/browse/LPS-165856