Skip to content

Conversation

Ovgodd
Copy link
Collaborator

@Ovgodd Ovgodd commented Sep 30, 2025

Purpose

Improve accessibility and usability of the dropdown menu and the language picker while keeping a fully custom trigger (no MenuTrigger), in order to maintain visual flexibility and design consistency.

issue : 1428 / lang : 898

Proposal

Improve keyboard interaction support (Enter, Space, ArrowDown) to open the menu.

Update menu items to use visible labels only (no aria-label), and apply the lang attribute directly on the text span to ensure correct pronunciation for each language.

Remove redundant or conflicting accessibility attributes (e.g. aria-label overriding visible text).

Maintain compatibility with the custom LanguagePicker, which now reuses this accessible DropdownMenu component.

  • Keep a custom accessible trigger instead of using MenuTrigger, allowing us to embed any custom design (icons, button, text, etc.) while keeping full ARIA compliance.
  • Improve keyboard interaction support (Enter, Space, ArrowDown) to open the menu.
  • Update menu items to use visible labels only (no aria-label), and apply the lang attribute directly on the text span to ensure correct pronunciation for each language.
  • Remove redundant or conflicting accessibility attributes (e.g. aria-label overriding visible text).
  • Maintain compatibility with the custom LanguagePicker, which now reuses this accessible DropdownMenu component.

Before → announced as

"Select language, bouton"
(generic button, no indication of menu or submenu)

After → announced as

"cliquable Français arrow down drop boutton , bouton de menu, réduit sous menu
(explicitly identified as a menu button with submenu, including current language labe

@Ovgodd Ovgodd self-assigned this Sep 30, 2025
@Ovgodd Ovgodd added the Accessibility Accessibility Update label Sep 30, 2025
@Ovgodd Ovgodd force-pushed the fix/a11y-dropdownmenu-languagepicker branch from 2802e59 to 045f4ae Compare September 30, 2025 13:06
Copy link
Contributor

@AntoLC AntoLC left a comment

Choose a reason for hiding this comment

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

I think I let the hand @PanchoutNathan for this one, seems a "big" refacto on a important component, I don't feel totally safe to review it without testcase.

@Ovgodd
Copy link
Collaborator Author

Ovgodd commented Oct 1, 2025

I think I let the hand @PanchoutNathan for this one, seems a "big" refacto on a important component, I don't feel totally safe to review it without testcase.

Of course, I will be glad to talk about it @PanchoutNathan if you need it !

@Ovgodd Ovgodd force-pushed the fix/a11y-dropdownmenu-languagepicker branch 3 times, most recently from 2a73b07 to dae5c69 Compare October 7, 2025 06:37
replace dropdownmenu div with MenuTrigger to improve accessibility

Signed-off-by: Cyril <c.gromoff@gmail.com>
@Ovgodd Ovgodd force-pushed the fix/a11y-dropdownmenu-languagepicker branch from dae5c69 to a176aca Compare October 13, 2025 06:40
@Ovgodd Ovgodd force-pushed the fix/a11y-dropdownmenu-languagepicker branch from a176aca to 1a97777 Compare October 13, 2025 06:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Accessibility Accessibility Update

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants