question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

  1. 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

image image

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
joshblackcommented, Nov 22, 2019

cc @dakahn labelling this as v9 and moving out of v10 milestone

1reaction
asudohcommented, Oct 22, 2019

Thank you for explaining the problem. A PR is welcome to introduce another prop for assistive text for the status icon.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Displaying a Notification - web.dev
The Notification spec is exploring a way to define multiple sizes of icons, but it looks like it'll be some time before anything...
Read more >
Tooltip – Carbon Design System
Icon button tooltip anatomy · Icon button: Button that triggers a tooltip on hover or focus · Caret tip: Closely associates container to...
Read more >
Have describing text appear in specific location on icon/image ...
I know how to get the text to appear on hover but I want the text to appear in a specific location (location...
Read more >
How to create a custom toast component with React
The button will be used to close a particular toast notification. An image icon will display depending on the type of toast.
Read more >
Customize the taskbar notification area - Microsoft Support
To change how icons and notifications appear. Press and hold or right-click any empty space on the taskbar and select Taskbar settings. Under...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found