From 0b2dcabe8da7fce0958c1b4a0e90f0b33e312370 Mon Sep 17 00:00:00 2001 From: Thibaut Monier Date: Sun, 13 Sep 2026 20:41:26 +0200 Subject: [PATCH] fix(ui): focus visible sur Ui:Button (WCAG 2.4.7) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tailwind v4 (Preflight) supprime l'outline par défaut : le focus clavier était invisible sur les boutons. Ajoute `focus:outline-none focus:ring-2 focus:ring-brand-500/40` au baseClasses du composant (tous variants). Release v1.6.1. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01Pp2ANkdPP9LG5BdqoDSyNf --- CHANGELOG.md | 8 ++++++++ templates/components/Ui/Button.html.twig | 3 ++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5cc602a..58b3fb3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,14 @@ et le projet suit le [Semantic Versioning](https://semver.org/lang/fr/) 2.0.0. ## [Unreleased] +## [1.6.1] — 2026-09-13 + +### Fixed + +- **`tsf:Ui:Button`** : anneau de focus visible (`focus:ring-2 focus:ring-brand-500/40`) + sur tous les variants — WCAG 2.4.7 (Focus Visible). Tailwind v4 (Preflight) supprime + l'outline par défaut ; le focus clavier était donc invisible sur les boutons. + ## [1.6.0] — 2026-09-12 ### Added diff --git a/templates/components/Ui/Button.html.twig b/templates/components/Ui/Button.html.twig index 4f90a79..43cf522 100644 --- a/templates/components/Ui/Button.html.twig +++ b/templates/components/Ui/Button.html.twig @@ -25,7 +25,8 @@ {%- set sizeClasses = sizeConfig[size] ?? sizeConfig['sm'] -%} {%- set widthClass = block ? 'flex w-full' : 'inline-flex' -%} -{%- set baseClasses = widthClass ~ ' items-center justify-center gap-2 rounded-lg font-medium transition ' ~ variantClasses ~ ' ' ~ sizeClasses -%} +{# Focus visible (WCAG 2.4.7) : Tailwind v4 (Preflight) supprime l'outline par défaut → anneau explicite sur tous les variants. #} +{%- set baseClasses = widthClass ~ ' items-center justify-center gap-2 rounded-lg font-medium transition focus:outline-none focus:ring-2 focus:ring-brand-500/40 ' ~ variantClasses ~ ' ' ~ sizeClasses -%} {# Capture le slot (content block) une seule fois — évite la double définition #} {%- set slotContent %}{% block content %}{% endblock %}{% endset -%}