Skip to content

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

Merged
hellodeloo merged 1 commit into
masterfrom
deloo/fix-tooltip-a11y
Feb 11, 2025
Merged

A11Y: Amélioration de l'accessibilité des tooltip#5380
hellodeloo merged 1 commit into
masterfrom
deloo/fix-tooltip-a11y

Conversation

@hellodeloo

@hellodeloo hellodeloo commented Jan 13, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor

🤔 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 remplaçant les <span> ou <div> possédant un data-bs-toggle="tooltip" par des quand c'était possible et en ajoutant sur un role="button" et tabindex="0"quand ça ne l'était pas

💻 Captures d'écran

Avant

capture 2025-01-13 à 10 48 41
capture 2025-01-09 à 17 12 33

Apres

capture 2025-01-13 à 10 48 50
capture 2025-01-13 à 15 20 52

@hellodeloo hellodeloo added the modifié Modifié dans le changelog. label Jan 13, 2025
@hellodeloo hellodeloo self-assigned this Jan 13, 2025
@francoisfreitag

francoisfreitag commented Jan 13, 2025 •
edited
Loading

Copy link
Copy Markdown
Member

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 hellodeloo force-pushed the deloo/fix-tooltip-a11y branch from 26100be to e20826a Compare January 13, 2025 15:29
@hellodeloo

hellodeloo commented Jan 13, 2025

Copy link
Copy Markdown
Contributor Author

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

xavfernandez
xavfernandez reviewed Jan 13, 2025
View reviewed changes
Comment thread tests/www/job_seekers_views/test_list.py Outdated
@hellodeloo hellodeloo force-pushed the deloo/fix-tooltip-a11y branch from 29b2a62 to 3d03510 Compare January 14, 2025 09:53
xavfernandez
xavfernandez reviewed Jan 16, 2025
View reviewed changes
Comment thread itou/templates/admin/job_applications/jobapplication_change_form.html Outdated
@hellodeloo hellodeloo force-pushed the deloo/fix-tooltip-a11y branch 3 times, most recently from 62d9f78 to a9781e7 Compare January 16, 2025 14:11
@hellodeloo hellodeloo marked this pull request as draft January 20, 2025 13:22
@hellodeloo hellodeloo force-pushed the deloo/fix-tooltip-a11y branch 2 times, most recently from 4454f80 to 2ccf1c8 Compare January 21, 2025 14:07
@hellodeloo hellodeloo added the 1-recette-jetable [Payé à l’heure] Crée une recette jetable sur CC label Jan 21, 2025
@github-actions

github-actions Bot commented Jan 21, 2025

Copy link
Copy Markdown

🥁 La recette jetable est prête ! 👉 Je veux tester cette PR !

@hellodeloo hellodeloo marked this pull request as ready for review January 21, 2025 14:30
@hellodeloo hellodeloo force-pushed the deloo/fix-tooltip-a11y branch from 2ccf1c8 to 068bfbb Compare January 29, 2025 08:33
@hellodeloo hellodeloo removed the 1-recette-jetable [Payé à l’heure] Crée une recette jetable sur CC label Jan 29, 2025
@hellodeloo hellodeloo force-pushed the deloo/fix-tooltip-a11y branch from 068bfbb to f8bd32c Compare January 29, 2025 10:02
francoisfreitag
francoisfreitag reviewed Jan 30, 2025
View reviewed changes

@francoisfreitag francoisfreitag left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

La meilleure accessibilité pour les tooltips est de les retirer...
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role

À discuter avec les UX, mais j’ai l’impression qu’on continue d’en ajouter.

Comment thread itou/templates/apply/includes/buttons/rdv_insertion_invite.html
Comment thread itou/templates/apply/includes/transfer_job_application.html
Comment thread itou/templates/apply/list_of_available_exports.html
Comment thread itou/templates/apply/process_refuse.html
Comment thread itou/templates/approvals/includes/box.html
Comment thread itou/templates/dashboard/includes/dashboard_title_content.html Outdated
Comment thread itou/templates/includes/members.html Outdated
Comment thread itou/templates/includes/members.html Outdated
@hellodeloo

hellodeloo commented Feb 4, 2025 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

La meilleure accessibilité pour les tooltips est de les retirer... https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role

À discuter avec les UX, mais j’ai l’impression qu’on continue d’en ajouter.

Why not, mais c'est un autre débat. Niveau code, un title est plus propre, niveau UI je trouve que les title sont moins lisible que les tooltip bs5 (même si on pourrait embellir en css), mais surtout, ça ajoute le positionnement auto en js selon les espaces disponibles et ça, c'est un gros plus je trouve

@hellodeloo hellodeloo force-pushed the deloo/fix-tooltip-a11y branch 3 times, most recently from da7661a to 6681ac3 Compare February 4, 2025 14:42
@francoisfreitag

francoisfreitag commented Feb 6, 2025

Copy link
Copy Markdown
Member

Je n’ai pas d’avis sur title vs data-bs-title, mais j’ai plutôt un avis contre les deux 😇

@hellodeloo hellodeloo force-pushed the deloo/fix-tooltip-a11y branch 4 times, most recently from 5933ea6 to 7a44e3e Compare February 10, 2025 14:12
francoisfreitag
francoisfreitag reviewed Feb 10, 2025
View reviewed changes

@francoisfreitag francoisfreitag left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J’ai l’impression que pas mal de nos tooltips pourraient en fait être des footnotes ?

Comment thread itou/templates/apply/includes/buttons/rdv_insertion_invite.html Outdated
Comment thread itou/templates/apply/includes/appointments.html Outdated
Comment thread itou/templates/approvals/includes/box.html Outdated
Comment thread itou/templates/approvals/prolongation_requests/list.html Outdated
Comment thread itou/templates/companies/job_description_list.html Outdated
Comment thread itou/templates/dashboard/includes/dashboard_title_content.html Outdated
Comment thread itou/templates/dashboard/includes/employer_job_applications_card.html Outdated
Comment thread itou/templates/includes/members.html Outdated
Comment thread itou/templates/includes/members.html Outdated
Comment thread tests/www/apply/test_submit_from_job_seekers_list.py Outdated
@hellodeloo hellodeloo force-pushed the deloo/fix-tooltip-a11y branch from 7a44e3e to 0e4ee5c Compare February 10, 2025 15:29
@hellodeloo hellodeloo force-pushed the deloo/fix-tooltip-a11y branch from 0e4ee5c to 909eab5 Compare February 10, 2025 15:31
@hellodeloo hellodeloo force-pushed the deloo/fix-tooltip-a11y branch from 909eab5 to 98c9c25 Compare February 11, 2025 13:03
francoisfreitag
francoisfreitag approved these changes Feb 11, 2025
View reviewed changes

@francoisfreitag francoisfreitag left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merci d’avoir amélioré l’accessibilité, en espérant pouvoir défaire ces tooltips un jour 🤞

@hellodeloo hellodeloo added this pull request to the merge queue Feb 11, 2025
Merged via the queue into master with commit 6acc8d8 Feb 11, 2025
@hellodeloo hellodeloo deleted the deloo/fix-tooltip-a11y branch February 11, 2025 14:36
@leo-naeka leo-naeka mentioned this pull request Mar 26, 2025
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@francoisfreitag francoisfreitag francoisfreitag approved these changes
@xavfernandez xavfernandez Awaiting requested review from xavfernandez

Assignees

@hellodeloo hellodeloo

Labels

modifié Modifié dans le changelog.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@hellodeloo @francoisfreitag @xavfernandez