Angular selectable Structured list not keyboard operable

[mbgower]

Package

carbon-components

Browser

Chrome

Operating System

MacOS

Package version

https://angular.carbondesignsystem.com/?path=/story/components-structured-list--with-selection

React version

angular

Automated testing tool and ruleset

n/a

Assistive technology

keyboard

Description

The angular version of the the selectable structured list does not support keyboard operation. The user is able navigate to the rows in the list (each of them is in the tab order) but cannot select a row with any common key (Space or Enter). Even if a row is selected with the mouse, there does not seem to be a way of selecting another.

This compares unfavourably with the react implementation, where the user is able to:

1. navigate to the first row by pressing Tab
2. press Up and Down arrow keys to move between the rows (which on first change selects the row which receives focus, after which selection and focus are synchronized
3. pressing Tab again leaves the component (a single tab stop for the construct)

WCAG 2.1 Violation

2.1.1 Keyboard

Reproduction/example

https://angular.carbondesignsystem.com/?path=/story/components-structured-list--with-selection

Steps to reproduce

The steps provided in the description constitute expected behaviour. Here is what happens in angular:

1. user presses Tab, focus lands on first row (expected)
2. user presses Down Arrow to move to next row. (Fails)
3. user presses Space or Enter to select row. (Fails)
4. user presses Tab to leave selectable structure list. Focus moves to next row (unexpected, but not necessarily a failure)

[nickdark]

Hello, I would like to be assigned to this issue.