Skip to content

♿️(menu) add opensInNewWindow for external link aria-label#246

Open
Ovgodd wants to merge 2 commits into
mainfrom
feat/dropdown-menu-aria-label-new-window
Open

♿️(menu) add opensInNewWindow for external link aria-label#246
Ovgodd wants to merge 2 commits into
mainfrom
feat/dropdown-menu-aria-label-new-window

Conversation

@Ovgodd

@Ovgodd Ovgodd commented Jun 10, 2026

Copy link
Copy Markdown
Collaborator

Purpose

Improve dropdown and context menu accessibility for screen readers when items open external links
When a menu item opens a link in a new page or tab, screen readers must announce it:

  • announce “(new window)” without changing the visible menu label (DSFR / RGAA pattern)
  • keep label as the only visible text for menu items
  • provide an i18n-backed aria-label suffix for supported UI Kit locales

Proposal

  • Add opensInNewWindow?: boolean on MenuItemAction
  • Append an i18n suffix to aria-label when enabled
  • Add components.menu.newWindowLabelSuffix in en-US, fr-FR, and nl-NL

Dom example :

label sr

Usage (Docs)

{
  label: t('Documentation'),
  opensInNewWindow: true,
  callback: () => openExternalLink(documentationUrl),
}

Add opensInNewWindow to MenuItemAction; append i18n suffix to aria-label only
@Ovgodd Ovgodd requested a review from NathanVss June 10, 2026 11:35
@Ovgodd Ovgodd self-assigned this Jun 10, 2026
@Ovgodd Ovgodd added enhancement New feature or request Accessibility Accessibility Update labels Jun 10, 2026
@Ovgodd Ovgodd changed the title Feat/dropdown menu aria label new window ♿️(menu) add opensInNewWindow for external link aria-label Jun 10, 2026
Add OpensInNewWindow Storybook story to verify external link aria-label suffix
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Accessibility Accessibility Update enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant