A11Y: Amélioration de l'accessibilité des tooltip

[hellodeloo]

🤔 Pourquoi ?

Les tooltips ne sont pas toujours activables à la tabulation

🍰 Comment ?

• En remontant le data-bs-toggle="tooltip" sur les <a> qui enroberaient un <i data-bs-toggle="tooltip">
• En ajoutant sur un role="button" et tabindex="0" sur les <span>, <i> et <div> possédant un data-bs-toggle="tooltip"
• En remplacant les title="blabla..." par des data-bs-title="blabla..." afin que le js de BS puisse correctement associer (avec une aria-labelledby="") les data-bs-toggle="tooltip" avec le <div> contenant le texte du data-bs-title lors de l'activation du tooltip

💻 Captures d'écran

Avant

Apres

[francoisfreitag]

En ajoutant sur un role="button" et tabindex="0" sur les <span>, <i> et <div> possédant un data-bs-toggle="tooltip"

La doc de bootstrap dit:

Keep tooltips accessible to keyboard and assistive technology users by only adding them to HTML elements that are traditionally keyboard-focusable and interactive (such as links or form controls). While other HTML elements can be made focusable by adding tabindex="0", this can create annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive technologies currently do not announce tooltips in this situation.

Est-ce qu’on ne devrait pas changer le markup pour suivre ces recommendations ?

[hellodeloo]

Est-ce qu’on ne devrait pas changer le markup pour suivre ces recommendations ?

Pour les <span> et les <div>, oui, tu as raison, je vais remplacer par des <button> 👍
Pour les <i>, je vais voir si je peux en enrober certains dans un <button> mais ça ne sera surement pas possible pour tous