Carbon: Notification a11y issues

[elizabethsjudd]

Environment

Operating system

Mac OS X

Browser

Chrome, Safari, FF

Automated testing tool and ruleset

AAT July 2019 ruleset
WCAG 2.1

Assistive technology used to verify

keyboard, mouse

Detailed description

1. The closed button on notifications should use the icon tooltip to provide a textual label for sighted users
2. the close button does not have a focus state (see screen shot in comment)

What version of the Carbon Design System are you using?

v10.4.1

What did you expect to happen?

There is a textual label for sighted users on icon only buttons and for there to be a visual focus state on the close button

What happened instead?

the close button only has a label for screen reader users

What WCAG 2.1 checkpoint does the issue violate?

Steps to reproduce the issue

1. Interact (hover/focus) the notification close button

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

@carbon-design-system/developers you can assign this issue to me and I can take a look at it in the next couple of weeks

[elizabethsjudd]

Notifications also don't have a focus state for their close button

[dakahn]

Do you wanna rename this issue to something more broad a la "Notification a11y issues" or we can roll the hover state violation into another issue? Thanks for reporting Liz!

[elizabethsjudd]

Because of the high-contrast nature of the notifications, WH uses the inverse icon-tooltip coloring which can be seen here: https://pages.github.ibm.com/Watson-Health/whds-pr/4091/components/preview/notification--all.html

[dakahn]

Do we have hover styles specced out for the close button of notifications @laurenmrice ?

[laurenmrice]

We currently do not have a hover color change for the close icon in code for notification. I thought for sighted users specifically that a cursor change and/or aria label was enough to know you would be able to close, is it not? Is there any other way we could use something other than a tooltip to meet these requirements? It seems to be visually invasive if this is what is being proposed for a sighted user. I would rather us implement some kind of hover/focus as well as the cursor change.

[elizabethsjudd]

@laurenmrice my issues isn't the hover state, it's the focus state, where the users doesn't have a a "cursor" that changes. However based on the last a11y call earlier this month, subtle hover/focus state changes were a big pain point for low vision users and IMO only changing the cursor is pretty subtle.

[dakahn]

The notifications need to visually receive focus for sure. Thinking about keyboard navigation here @laurenmrice

[emyarod]

the close button focus outline should be present now (ref #4569) so all that is left is the tooltip. just to confirm, does adding the tooltip and/or changing the button background on focus fall in line with our design spec? cc @laurenmrice

[asudoh]

@laurenmrice Any thoughts on @emyarod's question above? Thanks!

[dakahn]

Moving this to an open proposal for an enhancement to the Tooltip component. 👍

[emyarod]

any updates regarding the proposed changes to notification close button (adding tooltip or background color change on focus)? if the focus outline from #4569 is enough we can close this cc @laurenmrice

[laurenmrice]

adding a tooltip is not required and something design does not want to add to the close button. the focus outline from the issue your referenced is enough.

[tw15egan]

Closing 👍