Modal: Tooltip is missing from the Close button on focus

[thefirstartist]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

V10, V11

React version

v. 1.40

Automated testing tool and ruleset

n/a

Assistive technology

No response

Description

When navigating with keyboard on a modal, tooltip is missing from the 'Close' button on focus. Tooltip is required for non-text content.

Here's Carbon's accessibility guidance on buttons:
Icon-only buttons have their labels exposed automatically on hover and focus.
https://carbondesignsystem.com/components/button/accessibility#behavior

Also, when using a mouse to hover the 'Close' button, the tooltip is incorrect. (This is also covered in issue #14323)

WCAG 2.1 Violation

Success Criterion 1.1.1: Non-text Content

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-modal--default&globals=theme:white

Steps to reproduce

The violation can be found in Carbon site or storybook.

Code of Conduct

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

[tw15egan]

Modal needs to be refactored to use IconButton so that it uses the correct Tooltip

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[github-actions]

The Carbon team has accepted this proposal! Our team doesn't have the capacity to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!

[thefirstartist]

Just found out that the tooltip on the close button on notification is also missing.