bug(MatChipGrid): Focus order is not logical

[clamli]

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

No response

Description

Multiple labels are added in a custom grid. The order in which focusable elements receive focus in the grid is not logical. The RIGHT and LEFT ARROW keys move right and left, but the DOWN and UP ARROW keys also move right and left. This is acceptable for users who can see the structure, but for screen reader users it interferes with understanding the grid structure.

Ensure that the order in which elements receive keyboard focus follows a meaningful and logical sequence. DOWN ARROW and UP ARROW should only move between logical rows of the filter grid, as in the ARIA APG pattern.

Reproduction

StackBlitz link: https://stackblitz.com/run?file=package.json
Steps to reproduce:

1. Navigate through the chips with input example
2. Notice that RIGHT and LEFT ARROW keys have the same effect as the DOWN and UP ARROW keys

Expected Behavior

DOWN and UP ARROW keys should move the focus from

Lemon -> Lime -> Apple

Actual Behavior

DOWN and UP ARROW keys moves the focus from

Lemon -> Close icon (Lemon) -> Lime -> Close icon (Lime) -> Apple -> Close icon (Apple)

Environment

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