Skip to content

Modal: explore a way to not show the close button tooltip on initial focus #9410

Closed

Description

When the Modal component opens, by default if moves focus on the first focusable element within the modal. This is required for accessibility.

In most of the cases, the first focusable element will be the default "X" close button on the top right. Since it's an IconButton component, it will display its tooltip (required for accessibility):

44328602-44092380-a462-11e8-943c-cb96983ff20c

However, the tooltip suddenly appearing when the modal opens could be confusing for users. In a custom modal in development for a well known plugin, we've had a few users thinking that it was a "bug".

I wouldn't be opposed to explore a way to not display the tooltip on initial focus, e.g.:

  • when the initial focus is set on the default close button, the tooltip prop should be false (however the button should keep its aria-label)
  • after initial focus, when users hover or focus the button the tooltip should appear normally (the tooltip prop should be restored to the label value)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Labels

[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Type] EnhancementA suggestion for improvement.

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions