[a11y]: Notification - inline - close button not tabbable

[annawen1]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

latest

React version

No response

Automated testing tool and ruleset

manual testing

Assistive technology

No response

Description

1. The close button on the inline variation of Notification doesn't seem to be tabbable.
2. Ran into this while doing our v11 syncing work with Carbon Web Components - @oliviaflory pointed out the fill for the warning icons are not consistent and they have to have a black fill to pass color contrast.

WCAG 2.1 Violation

No response

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-notifications-inline--playground

Steps to reproduce

Go to storybook and try tabbing into the inline notification to the close button

https://react.carbondesignsystem.com/?path=/story/components-notifications-inline--playground

For the icon fill issue, go to the storybook

1. Select inline notification variation
2. Set 'low-contrast' prop to true
3. select between the different warning "kind" variations (warning-alt and warning) and compare the icon fill colors

Code of Conduct

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

[tay1orjones]

inline variation of Notification doesn't seem to be tabbable

I know this feels goofy, but it's actually intentional. InlineNotification and ToastNotification only have limited role options:

carbon/packages/react/src/components/Notification/Notification.js

Line 390 in c6c83ce

role: PropTypes.oneOf(['alert', 'log', 'status']),

Due to this they cannot contain interactive elements and do not receive focus. For this reason, the Close button is removed from the accessibility tree and is basically just an affordance for sighted users only.

ActionableNotification on the other hand gets role=alertdialog, allowing interactive elements within and the close button is tabbable there. It can also be configured as inline, mimicking the styling of InlineNotification

[tay1orjones]

the fill for the warning icons are not consistent and they have to have a black fill to pass color contrast

Wild, looks like this was the case back in v10 as well link

@oliviaflory @laurenmrice could you confirm if it's just the warning alt icon, or also the other icons as well - success, info, etc? Also this is isolated to just the lowContrast variants, correct?

[laurenmrice]

@tay1orjones All of the icons in the notifications for the high contrast and low contrast styles should have inner fills of either black or white for a11y color contrast reasons. I can audit those to see what needs to be updated in code.

[tay1orjones]

@laurenmrice Awesome! For lack of a better label, I put the status: needs design spec label on here.

[annawen1]

inline variation of Notification doesn't seem to be tabbable

I know this feels goofy, but it's actually intentional. InlineNotification and ToastNotification only have limited role options:

carbon/packages/react/src/components/Notification/Notification.js

Line 390 in c6c83ce

role: PropTypes.oneOf(['alert', 'log', 'status']),

Due to this they cannot contain interactive elements and do not receive focus. For this reason, the Close button is removed from the accessibility tree and is basically just an affordance for sighted users only.

ActionableNotification on the other hand gets role=alertdialog, allowing interactive elements within and the close button is tabbable there. It can also be configured as inline, mimicking the styling of InlineNotification

Gotcha! Good to know it's not a bug! I'll adjust in our web components to match, thanks!

[laurenmrice]

These are what the inner fill colors should be for high and low contrast styles for the different themes.