[a11y]: Tabs component has low priority implementation bug

[mbgower]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

https://react.carbondesignsystem.com/?path=/story/components-tabs--contained

React version

No response

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

Overall the implementation of the tabs component is very nicely done. However there is one issue to do with exposing information on hover and focus which is inconsistently done.

There are two situations where it makes sense that a tooltip should expose additional information about a tab item:

• the tab uses only an icon
• the text of the tab is truncated

In both situations, the user needs to be able to understand the purpose of the tab. The normal way to do this is through a tooltip.

• The icon-only tab has exactly the same considerations as an icon-only button. On hover and focus, the text alternative for the image should be displayed. When we originally tested, this was not taking place, but it seems to be working consistently now.
• Carbon truncates long labels for tab items. In the implementatino for the Contained tablist, the mouse exposes the full name as a tooltip. However, this is not exposed on focus, so it fails Content on Hover and Focus.
  For both the icon-only tabs and the truncated text in the Line variant, neither hover nor focus reveals the text. This is not technically a failure of WCAG, since everyone experiences the same lack of a name. However, it can be considered a bug in Carbon since your variants behave difference.

SOLUTIONS:

1. Remove the tooltips from all truncated text. (Not optimal, but will not result in a WCAG failure) OR
2. Instead of using a browser tooltip exposing the title value of truncated text, use the Carbon tooltip to expose the full name on hover AND focus. All the normal behaviours for a Carbon tooltip (dismissal, duration, etc) should be achieved.

WCAG 2.1 Violation

Content on Hover or Focus

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-tabs--contained

Steps to reproduce

To see proper behaviour of the the icon-only version:

1. Open to https://react.carbondesignsystem.com/?path=/story/components-tabs--icon-20-only
2. navigate to the tablist and arrow between the icons. The tooltips will appear for the active tabs

For the bug involving the truncated text:

1. Open https://react.carbondesignsystem.com/?path=/story/components-tabs--contained
2. Hover over the third tab, the one with the truncated text. The full name will appear as a browser tooltip
3. Navigate to the tab with the keyboard and put focus on the third tab. No tooltip appears.

For a different behaviour with the same use case

1. Open https://react.carbondesignsystem.com/?path=/story/components-tabs--default
2. Hover over the third tab with the truncated text. No tooltip appears
3. Navigate to the tab by keyboard. No tooltip appears

Note: As mentioned, because the behaviour (no tip) is the same as everyone, this different behaviour is not a failure of On Hover or Focus.

Code of Conduct

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

[mbgower]

This is discussed as part of an exploration in the first 8 minutes of this video
https://ibm.webex.com/ibm/ldr.php?RCID=d7b25a2ff1ff0e414cc90d386a095f9f
Password: pKm9uCGi