From 9acd93e64d408c7d26f2addac7e63217677e1dc4 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 27 Feb 2026 09:51:30 +0100 Subject: [PATCH 1/2] docs: note about arrow-navigation in dropdown --- apps/www/app/content/components/dropdown/en/overview.mdx | 8 ++++++++ apps/www/app/content/components/dropdown/no/overview.mdx | 9 +++++++++ 2 files changed, 17 insertions(+) diff --git a/apps/www/app/content/components/dropdown/en/overview.mdx b/apps/www/app/content/components/dropdown/en/overview.mdx index 4e04cb270c..dc47ca38e1 100644 --- a/apps/www/app/content/components/dropdown/en/overview.mdx +++ b/apps/www/app/content/components/dropdown/en/overview.mdx @@ -28,3 +28,11 @@ You can use icons together with text in the dropdown items: - Keep the number of items manageable - Use headings to group related items - Avoid multiple levels of dropdowns (nested menus) + +## Notes + +### Arrow key navigation +Arrow key navigation in `Dropdown` is something we do not recommend; regular Tab navigation is sufficient. + +The reason is; if you implement arrow key navigation, you should also use `role="menu"` on the `Dropdown` and `role="menuitem"` on the options. This affects screen reader users as the navigation mode changes (for example "browse/scanning mode" in NVDA, "forms mode" in JAWS, and "quick nav" in VoiceOver). +While the specification and intention behind this pattern is good, it can feel unfamiliar and in some cases disruptive for end users. \ No newline at end of file diff --git a/apps/www/app/content/components/dropdown/no/overview.mdx b/apps/www/app/content/components/dropdown/no/overview.mdx index ec0588e846..8a0d290f4c 100644 --- a/apps/www/app/content/components/dropdown/no/overview.mdx +++ b/apps/www/app/content/components/dropdown/no/overview.mdx @@ -28,3 +28,12 @@ Du kan bruke ikoner sammen med tekst i dropdown-elementene: - Hold antall elementer på et overkommelig nivå - Bruk overskrifter for å gruppere relaterte elementer - Unngå flere nivåer av dropdowns (nøstede menyer) + +## Anmerkninger + +### Piltast-navigasjon + +Piltast-navigasjon i `Dropdown` er noe vi ikke anbefaler; helt vanlig Tab-navigasjon er innenfor. + +Årsaken er; dersom du implementerer piltast-navigasjon, bør du også bruke `role="menu"` på `Dropdown` og `role="menuitem"` på valgene. Dette påvirker skjermleserbrukere ved at navigasjonsmodus endres (for eksempel «browse/scanning mode» i NVDA, «forms mode» i JAWS og «quick nav» i VoiceOver). +Selv om spesifikasjonen og intensjonen bak dette mønsteret er god, kan det oppleves uvant og i noen tilfeller forstyrrende for sluttbrukere. \ No newline at end of file From 984f0bc80bf04b3f31da5485e69f984767e58455 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 27 Feb 2026 09:58:02 +0100 Subject: [PATCH 2/2] roving focus --- .../content/components-docs/en/utilities/roving-focus.mdx | 6 ++++++ .../content/components-docs/no/utilities/roving-focus.mdx | 5 +++++ 2 files changed, 11 insertions(+) diff --git a/apps/www/app/content/components-docs/en/utilities/roving-focus.mdx b/apps/www/app/content/components-docs/en/utilities/roving-focus.mdx index dadded5976..15449240a9 100644 --- a/apps/www/app/content/components-docs/en/utilities/roving-focus.mdx +++ b/apps/www/app/content/components-docs/en/utilities/roving-focus.mdx @@ -4,6 +4,12 @@ sidebar_title: RovingFocus order: 10 --- + + + This component is deprecated and will be removed in the future. + Read about [arrow navigation in Dropdown](en/components/docs/dropdown/overview#arrow-key-navigation) for more information. + + To create a list of items that will use arrow keys to move focus. This component is used internally in `Tabs` and `ToggleGroup`. diff --git a/apps/www/app/content/components-docs/no/utilities/roving-focus.mdx b/apps/www/app/content/components-docs/no/utilities/roving-focus.mdx index 96223cd7a9..5a9679e757 100644 --- a/apps/www/app/content/components-docs/no/utilities/roving-focus.mdx +++ b/apps/www/app/content/components-docs/no/utilities/roving-focus.mdx @@ -4,6 +4,11 @@ sidebar_title: RovingFocus order: 10 --- + + Denne komponenten er utdatert og vil bli fjernet i fremtiden. + Les om [piltast-navigasjon i Dropdown](en/components/docs/dropdown/overview#piltast-navigasjon) for mer informasjon. + + For å lage liste med elementer som skal bruke piltaster for å flytte fokus. Denne komponenten blir brukt internt i `Tabs` og `ToggleGroup`.