Skip to content

Bug - Menu/Dropdown - external link and focus management a11y issues #8878

@thatblindgeye

Description

@thatblindgeye

Describe the problem
For Menu, the isExternalLink prop only renders an icon on hover/focus. Based on the design guidelines (+ possible typical expectation of the icon), the anchor element under the hood should also have target="_blank" to open the link in a new tab/window.

For Dropdown (the newly promoted implementation, formerly Next), if an anchor is the first item it does not receive focus when the dropdown is opened (you can navigate to it via arrow keys just fine after you're in the menu, though). This is problematic for updating the version switcher as you cannot enter the menu at all.

How do you reproduce the problem?
For menu:

  1. Go to Menu with links example
  2. Click the first link (it should have the icon render on hover) and notice it does not open in a new tab/window

For dropdown:

  1. Go to basic dropdown example
  2. Move the second item ("Action") to be the first item in the code
  3. Open the dropdown via keyboard and notice the first item does not receive initial focus despite not being disabled (press arrow up and notice you can navigate to it once in the menu)

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions