Tooltips are neither dismissible nor hoverable (WCAG 1.4.13)

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#15,411 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
74/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
javascript
Domaine
accessibility, frontend

Piste de recherche

Commencez par resources/js/bootstrap/statamic.js où les directives tooltip/dropdown de floating-vue sont enregistrées (ligne ~10), puis consultez la documentation de floating-vue pour les options globales concernant Escape dismissal, les poppers hoverables (pointer-events/délai de dispose) et l'attribut role="tooltip". L'issue inclut un chemin de reproduction exact : survoler le bouton Toggle Nav de la barre latérale sur /cp/dashboard et appuyer sur Escape. Pour être considéré comme terminé, les trois conditions de la WCAG 1.4.13 doivent passer sur cet tooltip et le popper doit porter role="tooltip", avec une nouvelle mesure effectuée via le check JSON donné dans l'issue.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

accessibility
Bug description

Tooltips in the CP are shown on hover but cannot be dismissed with Escape and cannot be hovered, which fails two of the three conditions in WCAG 2.1 SC 1.4.13 Content on Hover or Focus (Level AA).

Measured against the sidebar's "Toggle Nav" button on /cp/dashboard:

1.4.13 condition Result
Dismissible — can be removed without moving pointer or focus FAIL — Escape does nothing
Hoverable — pointer can move onto the tooltip without it disappearing FAIL — it vanishes
Persistent — stays until dismissed, focus moves, or it stops being valid PASS — still visible after 4s 
{ "tooltipShown": true, "role": null, "text": "Toggle Nav",
  "cls": "v-popper__popper v-popper--theme-tooltip v-popper__popper--shown",
  "dismissibleByEscape": false, "hoverable": false, "persistentAfter4s": true }

The tooltip also carries no role="tooltip", so it isn't announced as one.

Tooltips come from floating-vue (v-tooltip), registered in https://github.com/statamic/cms/blob/v6.31.0/resources/js/bootstrap/statamic.js#L10. Both failing conditions are configurable there rather than requiring per-call-site changes.

This matters more than usual in Statamic's CP because tooltips are sometimes the only text alternative for an icon-only control — see the status indicator issue I'm filing alongside this, where v-tooltip is the sole carrier of "Published" / "Draft" / "Scheduled" / "Expired".

How to reproduce
  1. composer create-project statamic/statamic, log in
  2. Hover the sidebar collapse button in the global header until the tooltip shows
  3. Press Escape — the tooltip stays
  4. Hover the tooltip itself — it disappears
Suggested fix

floating-vue supports both:

  • register a global hideOnTargetClick/Escape handler, or set instantMove plus an onKeydown that hides on Escape
  • set the tooltip theme's disposeTimeout / pointer-events so the popper is hoverable rather than pointer-events-none

Adding role="tooltip" on the popper would also let assistive technology announce it correctly.

Environment

Environment
Laravel Version: 13.30.1
PHP Version: 8.4.23
Composer Version: 2.10.2
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: log
Queue: sync
Session: file

Storage
public/storage: NOT LINKED

Statamic
Addons: 0
License Key: Not set
Sites: 1
Stache Watcher: Enabled (auto)
Static Caching: Disabled
Version: 6.31.0 PRO
Installation

Fresh statamic/statamic site via CLI

Additional details

Found during a WCAG 2.1 AA audit of a vanilla composer create-project statamic/statamic install with no addons and no custom code. Tested with axe-core 4.x on Chromium 153 at 1440x1000, plus manual keyboard traversal. Source references point at v6.31.0.

Langage dominant
PHP
Étoiles
4.9k
Forks
647
Merge moyen
1 j 1 h
PR mergées (30 j)
145

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de statamic/cms

Toutes les issues de statamic/cms

Issues similaires

Plus d'issues PHP

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.