From 3d9177f97945a3b4a91a532d3222d6d2fad06d74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 27 Mar 2025 10:45:10 +0100
Subject: [PATCH] fix: improve a11y of checkbox with tooltip

---
 templates/forms.html.twig | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/templates/forms.html.twig b/templates/forms.html.twig
index 7695746..6dc76b0 100644
--- a/templates/forms.html.twig
+++ b/templates/forms.html.twig
@@ -94,15 +94,17 @@
     {%- if form.vars.attr.tooltip is defined -%}
         {%- set tooltip = form.vars.attr.tooltip -%}
     {%- endif -%}
-    <div class="{{ html_classes('relative flex items-start', { 'cursor-not-allowed': form.vars.attr.readonly is defined }) }}"{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
-        <div class="flex h-6 items-center">
-            {{ form_widget(form) }}
-        </div>
-        <div class="{{ html_classes('ml-1 leading-6', { 'text-red-500': errors|length }) }}">
-            <label for="{{ form.vars.id }}" class="{{ html_classes({ 'pointer-events-none': form.vars.attr.readonly is defined }) }}">
-                {{ form.vars.label | raw }}
-            </label>
-            {{- form_errors(form) -}}
+    <div>
+        <div class="{{ html_classes('relative flex items-start', { 'cursor-not-allowed': form.vars.attr.readonly is defined }) }}"{% if tooltip is not null %} {{ stimulus_controller('tooltip', { 'content': tooltip }) }}{% endif %}>
+            <div class="flex h-6 items-center">
+                {{ form_widget(form) }}
+            </div>
+            <div class="{{ html_classes('ml-1 leading-6', { 'text-red-500': errors|length }) }}">
+                <label for="{{ form.vars.id }}" class="{{ html_classes({ 'pointer-events-none': form.vars.attr.readonly is defined }) }}">
+                    {{ form.vars.label | raw }}
+                </label>
+                {{- form_errors(form) -}}
+            </div>
         </div>
     </div>
 {% endblock %}