fix(tooltip): improve accessibility
To Check
-
Explain what has changed in the changelog -
For newly created web components only: Declare all new angular proxy components in the file angular/projects/wcs-angular/src/lib/wcs-angular.module.ts
-
For newly created web components only: Add the component name in Components-Overview.mdx
with its corresponding image inassets/images/components-overview
Resolved Problems Maj 03/06/2024
- Provide a role
tooltip
to describe the component in the accessibility tree - Hide the tooltip when the
Esc
key is pressed - Add documentation to the story in order to explain how to respect accessibility when using
wcs-tooltip
Problems I encouter
Describe the element which the tooltip is going to describe, like wcs-button
...
The issue is that there are no indications from screen readers (tested with NVDA). But we have the clear indications provided when using a native button
. Why ??
When we put an aria-describedby
on wcs-button
, the attribute is placed on the wcs-button
node. aria-describedby
only works with an element that has a role
attribute.
Solutions ??
Use aria-description directly on the node the tooltip refer to
Others potential problems
When the tooltip content has a complex semantic, we may used aria-details
instead of aria-description
. The problem is aria-details
accept only IDREF.
We retrieve the shadow root problem, we cannot refer ID across Shadow DOM Root
Sources
Edited by Mathis Poncet