search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.75k stars 1.79k forks source link

[a11y]: dismissible tab has focus handling issue after activation; also last two items should not be dismissible #15919

Open mbgower opened 6 months ago

mbgower commented 6 months ago

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

https://react.carbondesignsystem.com/?path=/story/components-tabs--dismissable-with-icons#storybook-preview-wrapper

React version

No response

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

When pressing Delete to dismiss a tab item from the Dismissible tab (with or without icons) https://react.carbondesignsystem.com/?path=/story/components-tabs--dismissable-with-icons#storybook-preview-wrapper, the focus is lost from all items. Expectation is that focus should be place on the prior item in the list or somewhere else on the page, but there is nothing that takes focus.

WCAG 2.1 Violation

Focs Visible

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-tabs--dismissable-with-icons#storybook-preview-wrapper

Steps to reproduce

  1. Open https://react.carbondesignsystem.com/?path=/story/components-tabs--dismissable-with-icons#storybook-preview-wrapper or https://react.carbondesignsystem.com/?path=/story/components-tabs--dismissable
  2. Navigate to the main area by keyboard (I suggest you tab once, Enter on Skip to canvas and tab a couple more times)
  3. Once focus is on the tab list, use the arrow key to move to an item other than the first one
  4. Press delete; the item disappears, and focus also disappears (the focus being placed elsewhere is expected behaviour).
  5. Press Tab once. The Reset button now has focus

The focus handling has a few considerations: if I delete the first item in the list, where should the focus go? If I delete the final item? I believe the interactions decided on is that the focus will always be placed on the preceding item, and when there is not a preceding tab item, the focus would be placed on the next tab item. A second issue in this implementation is that there should never be a case where the final item is deleted. IMO, the dismiss mechanism should cease to exist (or get disabled) once there are only 2 tab items left, as according to the documentation, tabs "always contain at least two items".

Code of Conduct

alisonjoseph commented 5 months ago

The focus issues should be resolved with https://github.com/carbon-design-system/carbon/pull/16033

A second issue in this implementation is that there should never be a case where the final item is deleted. IMO, the dismiss mechanism should cease to exist (or get disabled) once there are only 2 tab items left, as according to the documentation, tabs "always contain at least two items".

@carbon-design-system/developers @carbon-design-system/design Is this something we want to control, or leave it up to the user when implementing the dismissable tab?

kingtraceyj commented 5 months ago

we should probably update the number of tabs guidelines. i think that 2 tab guideline was before we had dismissible tabs and was never updated.

there are use cases i've seen when there is only one dismissible tab—mostly around saved searches but it's a common interaction in browsers when there is only 1 tab open.

i can't think of any use cases to have only 1 tab for non-dismissible tabs though.