Skip to content

[Bug] A11y: SelectPanel listbox does not have an aria label #2215

@mijpeterson

Description

@mijpeterson

Describe the bug
When using the SelectPanel component, it appears that we are unable to configure the listbox it renders with an aria label. This means that it does not have an accessible name.

Digging into the code, I've found that the SelectPanel does spread the rest of its props over to the FilteredActionList component, which then gets passed down to the ActionList component. So if we were able to supply an "aria-label" or "title" prop to SelectPanel, then we'd be able to solve this bug. However, the SelectPanel's type definition for its props does not accept List props.

To Reproduce
Steps to reproduce the behavior:

  1. Go to SelectPanel docs
  2. Expand one of the example SelectPanels
  3. Open developer tools
  4. See error

Expected behavior
"title" or "aria-label" is defined for the listbox.

Screenshots
A side by side view of the expanded SelectPanel and its HTML elements in the browser dev tools. The dev tools highlight that the element is missing an accessible name.

Desktop (please complete the following information):

  • OS: Windows 11
  • Browser: Edge
  • Version: 103.0.1264.77

Additional context
The easier way to solve this issue would be to expose one of "aria-label" or "title" through the SelectPanel's props type. However, given that the ActionList component that it uses under the hood is deprecated, this might be a good chance to switch over the internals.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions