[a11y]: Contained list has two focus points, and overlap between the focus indicators

[mbgower]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

https://react.carbondesignsystem.com/?path=/story/components-containedlist--with-interactive-items-and-actions

React version

@carbon/react@1.33.2

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

The Interactive items and actions implementation on Storbyook takes two separate tab stops per row.

I'm concerned about this, since I don't understand what the two different outcomes are when activating the control at each of these tab stops (and of course in Storybook, there is no outcome I can test).

A very related but separate issue is that the first focus indicator encompasses both tab stops on the row both the list item, and its 'dismiss' icon:

Then the user can advanced the focus so that the 'dismiss' icon takes its own separate tabstop as well.

That is definitely wrong.

I'm unclear about how these two actions can co-exist, and what that means.

WCAG 2.1 Violation

No response

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-containedlist--with-interactive-items-and-actions

Steps to reproduce

1. Navigate to https://react.carbondesignsystem.com/?path=/story/components-containedlist--with-interactive-items-and-actions
2. Tab to the canvas
3. Tab through the component

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[janhassel]

The design intent for this is to allow for a primary action on a list item (most likely "go to action") and a secondary (like "dismiss" in this example, could also be something different though).

Here is one example mockup of the ContainedList used to list notifications: The user can either interact with the notification itself to go the relevant area of the product that is throwing a warning and they can dismiss this notification.

[tay1orjones]

At the very least we can update storybook to provide an alert() when activating the row vs the dismiss action to provide some distinction between these two actions. It would also be nice if we could log these events to the "Actions" pane in storybook.

[mbgower]

One obvious thing that needs to be addressed is the first focus indicator should NOT contain the 'action' button (typically, 'delete', I think)

IF this is ALWAYS a delete function, the user could just press Delete to delete, and there may not even be a need for the second tab stop, but in any case, it should not be included within the first focus indicator, IMO