Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TECH] Gérer l'apparition du tooltip en CSS (PIX-12955). #673

Merged
merged 2 commits into from
Jun 20, 2024
Merged

[TECH] Gérer l'apparition du tooltip en CSS (PIX-12955). #673

merged 2 commits into from
Jun 20, 2024

Conversation

Jeyffrey
Copy link
Contributor

@Jeyffrey Jeyffrey commented Jun 13, 2024 •
edited
Loading

🎄 Problème

Il n'est pas nécessaire d'utiliser du JS pour gérer l'affichage d'un tooltip.

Aussi, il n'est pas souhaité de garder le tooltip affiché après un clic sur un bouton.

🎁 Proposition

1. Ce que l'on souhaite :

  • Afficher le tooltip au survol
  • Afficher le tooltip au focus si :
    • le focus vient d'une tabulation
    • l'élément focus est éditable

2. Techniquement :

  • Au focus : utiliser :focus-visible ou :focus-within en fonction du support de :has() par le navigateur
  • Pour le mouseover : utiliser :hover.

🎅 Pour tester

Tester les différents comportements en RA.

@Jeyffrey Jeyffrey self-assigned this Jun 13, 2024
@pix-bot-github
Copy link

Une fois l'application déployée, elle sera accessible à cette adresse https://ui-pr673.review.pix.fr
Les variables d'environnement seront accessibles sur scalingo https://dashboard.scalingo.com/apps/osc-fr1/pix-ui-review-pr673/environment

@Jeyffrey Jeyffrey changed the title [REFACTOR] Gérer l'apparition du tooltip en CSS (PIX-12955). [TECH] Gérer l'apparition du tooltip en CSS (PIX-12955). Jun 13, 2024
@Jeyffrey Jeyffrey closed this Jun 13, 2024
@Jeyffrey Jeyffrey reopened this Jun 13, 2024
@pix-bot-github
Copy link

Une fois l'application déployée, elle sera accessible à cette adresse https://ui-pr673.review.pix.fr
Les variables d'environnement seront accessibles sur scalingo https://dashboard.scalingo.com/apps/osc-fr1/pix-ui-review-pr673/environment

@Jeyffrey Jeyffrey force-pushed the pix-12955-tooltip-display-based-on-css branch 6 times, most recently from 55105da to 2587898 Compare June 13, 2024 15:49
@xav-car
Copy link
Contributor

xav-car commented Jun 14, 2024 •
edited
Loading

:has n'est pas supporté par les Firefox/Chrome/Edge ('last 4 years') que nous somme censé supporter.

@Jeyffrey
Copy link
Contributor Author

Jeyffrey commented Jun 14, 2024 •
edited
Loading

:has n'est pas supporté par les Firefox/Chrome/Edge ('last 4 years') que nous somme censé supporter.

Oui c'est pour ça que j'ai prévu le coup avec le @supports (assez supporté https://caniuse.com/mdn-css_at-rules_supports_selector).

Si le :has n'est pas supporté, alors on retrouve le comportement actuel (le tooltip reste affiché au clic sur un bouton)

@xav-car
Copy link
Contributor

xav-car commented Jun 14, 2024

(j'avais pas vu la 1ere remarque sinon j'aurai tout mis dans le 1er commentaire 😅)

Par rapport à https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ . il semblerait que pour être ISO avec la WAI . le ESC soit tout de même demandé.

@Jeyffrey
Copy link
Contributor Author

(j'avais pas vu la 1ere remarque sinon j'aurai tout mis dans le 1er commentaire 😅)

Par rapport à w3.org/WAI/ARIA/apg/patterns/tooltip . il semblerait que pour être ISO avec la WAI . le ESC soit tout de même demandé.

Ah ! J'avais pas du tout connaissance de ce comportement attendu.
Bon ben je vais ajouter ça :)

@Jeyffrey Jeyffrey force-pushed the pix-12955-tooltip-display-based-on-css branch 5 times, most recently from 4e0a352 to fed17ce Compare June 18, 2024 12:36
@pix-service-auto-merge pix-service-auto-merge force-pushed the pix-12955-tooltip-display-based-on-css branch from fed17ce to c37c077 Compare June 20, 2024 15:02
@pix-service-auto-merge pix-service-auto-merge force-pushed the pix-12955-tooltip-display-based-on-css branch from c37c077 to e078fda Compare June 20, 2024 15:02
@pix-service-auto-merge pix-service-auto-merge merged commit a42b7cb into dev Jun 20, 2024
5 of 6 checks passed
@pix-service-auto-merge pix-service-auto-merge deleted the pix-12955-tooltip-display-based-on-css branch June 20, 2024 15:06
pix-service-auto-merge pushed a commit that referenced this pull request Jun 20, 2024
@semantic-release-bot
chore(release): 46.10.5 [skip ci]
95d4bbc 
## [46.10.5](v46.10.4...v46.10.5) (2024-06-20)

### 🏗️ Tech

- [#673](#673) Gérer l'apparition du tooltip en CSS (PIX-12955).
@pix-service-auto-merge
Copy link
Contributor

🎉 This PR is included in version 46.10.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@xav-car xav-car xav-car approved these changes

Assignees

@Jeyffrey Jeyffrey

Labels
cross-team Toutes les équipes de dev Func Review OK released 🚀 Ready to Merge Tech review OK
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@Jeyffrey @pix-bot-github @xav-car @pix-service-auto-merge