Skip to content

bug(cdk/listbox): Keyboard focus is not follow ARIA doc #25833

Closed
@zizifn

Description

@zizifn

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

N/A

Description

@angular/cdk/listbox is not follow ARIA Keyboard Interaction. https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#listbox_kbd_interaction

If an option is selected before the listbox receives focus, focus is set on the selected option.

But cdk/listbox always go to last focus item. BTW, the <mat-list> is follow the ARIA doc,

Reproduction

Steps to reproduce:

  1. visit https://material.angular.io/cdk/listbox/examples#cdk-listbox-reactive-forms
  2. tab into list and select C++
  3. arrow down into JavaScript
  4. tab out to list
  5. shift+ tab into list

the example is single selection list box, but multiple selection list box also has some issue.

Expected Behavior

shift+ tab into list, should go to selected item C++

Actual Behavior

shift+ tab into list, go to last focus item which is JavaScript

Environment

  • Angular: 14.2.0
  • CDK/Material: 14.2.3
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows

Metadata

Metadata

Assignees

Labels

AccessibilityThis issue is related to accessibility (a11y)P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/listbox

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions