Skip to content

docs: note about arrow-navigation in dropdown #4555

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.

Sign up for GitHub

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

Draft
mimarz wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

docs: note about arrow-navigation in dropdown #4555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9acd93e
docs: note about arrow-navigation in dropdown
mimarz Feb 27, 2026
984f0bc
roving focus
mimarz Feb 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions apps/www/app/content/components-docs/en/utilities/roving-focus.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ sidebar_title: RovingFocus
order: 10
---


<Alert data-color="warning">
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.
</Alert>

To create a list of items that will use arrow keys to move focus.
This component is used internally in `Tabs` and `ToggleGroup`.

Expand Down
5 changes: 5 additions & 0 deletions apps/www/app/content/components-docs/no/utilities/roving-focus.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ sidebar_title: RovingFocus
order: 10
---

<Alert data-color="warning">
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.
</Alert>

For å lage liste med elementer som skal bruke piltaster for å flytte fokus.
Denne komponenten blir brukt internt i `Tabs` og `ToggleGroup`.

Expand Down
8 changes: 8 additions & 0 deletions apps/www/app/content/components/dropdown/en/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
9 changes: 9 additions & 0 deletions apps/www/app/content/components/dropdown/no/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.