Skip to content

fix(tooltip): improve accessibility

Mathis Poncet requested to merge fix-tooltip-accessibility into develop

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 in assets/images/components-overview

#137 (closed)

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

Merge request reports