Skip to content

[Tooltip] Meet dismissable WCAG criterion#22376

Merged
eps1lon merged 1 commit into
mui:nextfrom
eps1lon:fix/Tooltip/dismissable
Aug 27, 2020
Merged

[Tooltip] Meet dismissable WCAG criterion#22376
eps1lon merged 1 commit into
mui:nextfrom
eps1lon:fix/Tooltip/dismissable

Conversation

@eps1lon

@eps1lon eps1lon commented Aug 27, 2020

Copy link
Copy Markdown
Member

Closes #17279

Meets "dismissable" in WCAG 2.1 1.4.13:

A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;

by listening to a global "Escape" keydown. This is similar to SCR39.

Follow-up:
To fully meet 1.4.13 we have to work on "hoverable" first which should also be explained in the docs.

@eps1lon eps1lon added accessibility a11y scope: tooltip Changes related to the tooltip. labels Aug 27, 2020
@mui-pr-bot

Copy link
Copy Markdown

@material-ui/core: parsed: +0.06% , gzip: +0.12%
@material-ui/lab: parsed: +0.09% , gzip: +0.16%

Details of bundle changes

Generated by 🚫 dangerJS against 7818302

Comment thread packages/material-ui/src/Tooltip/Tooltip.js
/**
* @param {KeyboardEvent} nativeEvent
*/
function handleKeyDown(nativeEvent) {

@oliviertassinari oliviertassinari Aug 27, 2020

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

arrow function as in the other places (for nested scopes)?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(for nested scopes)

What does this mean?

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought we were following named function for top-level scope and arrow function for nested levels, following pros and cons of https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-exchangeable

Suggested change
function handleKeyDown(nativeEvent) {
const handleKeyDown = (nativeEvent) =>

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it matter? They end up as function anyway.

@oliviertassinari

oliviertassinari commented Aug 27, 2020

Copy link
Copy Markdown
Member

I have just realized that a native <div title="foo" /> behaves like the proposed changes on macOS 👍.

@eps1lon

eps1lon commented Aug 27, 2020

Copy link
Copy Markdown
Member Author

I have just realized that a native <div title="foo" /> behaves like the proposed changes on macOS .

Fun fact: The native title not being dismissable wouldn't violate that success criterion 🤷‍♂️ I wonder which corporate representative got that in so that their page is not liable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility a11y scope: tooltip Changes related to the tooltip.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Tooltip] Trigger "Click" should support ESC key to close tooltip

3 participants