Carbon: [Inline notification] notification kind icon lacks hover over text customization

Created on 21 Oct 2019 · 5Comments · Source: carbon-design-system/carbon

Environment

Operating system

MacOS 10.14.6 (18G103)

Browser

Chrome Version 77.0.3865.120 (Official Build) (64-bit)

Automated testing tool and ruleset

Manual testing

Assistive technology used to verify

Manual testing

Detailed description

What version of the Carbon Design System are you using?

"carbon-components": "9.x"
"carbon-components-react": "6.x"

What did you expect to happen?

When setting the hover over text on the close button like so <InlineNotification kind='error' iconDescription='Close' ...>, I was not expecting the error icon to also get <title> of Close.

What happened instead?

<InlineNotification> should have the ability to to specify text for the error/success/warning icon

What WCAG 2.1 checkpoint does the issue violate?

Not sure.

Steps to reproduce the issue

Use mouse pointer to hover over the error/warning/success icon. See three pictures below for example. Note: Warning completely lacks a title

http://v6-react.carbondesignsystem.com/?selectedKind=Notifications&selectedStory=inline&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs

Note: This problem is also on the latest carbon react
http://react.carbondesignsystem.com/?path=/story/notifications--inline

notification low 4 help wanted 👐 a11y ♿ 9

Source

kinueng

All 5 comments

Hi 👋 if you go to KNOBS tab at the bottom or at the right and change the content of iconDescription, you'll see the text is changed. Hope this helps!

asudoh on 22 Oct 2019

Hello @asudoh,
The root problem is the close button (X icon) and the Error/Info/Warning icon are sharing the content of iconDescription. This causes the Error/Info/Warning icons to have the wrong aria-label and alt text.

Here is a screenshot of an example from here
http://v6-react.carbondesignsystem.com/?selectedKind=Notifications&selectedStory=inline&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel