Improve form a11y

studio1902 · Oct 26, 2024 · eb6987b · eb6987b
1 parent 9f6cc2d
commit eb6987b
Show file tree

Hide file tree

Showing 12 changed files with 23 additions and 19 deletions.
diff --git a/lang/en/strings.php b/lang/en/strings.php
@@ -17,6 +17,7 @@
     'form_subject_received' => 'Contact form received',
     'form_subject_sent' => 'Contact form sent',
     'form_success' => 'Thank you, we received your message and will contact you as soon as possible.',
+    'form_required' => 'Required',
 
     // Consent banner
     'consent_accept_all' => 'Accept all',

diff --git a/lang/nl/strings.php b/lang/nl/strings.php
@@ -29,6 +29,7 @@
     'form_mail_from' => 'Statamic Peak Development',
     'form_mail_greeting' => 'Beste',
     'form_mail_logo' => 'http://statamic-peak.test/visuals/statamic-peak-logo.png',
+    'form_required' => 'Verplicht',
     'form_mail_submitted' => 'Verzonden',
     'form_mail_title' => 'Contactformulier',
     'form_mail_url' => 'http://statamic-peak.test',

diff --git a/public/build/assets/site-DU7OtWCi.css → public/build/assets/site-yiYUX_rW.css b/public/build/assets/site-DU7OtWCi.css → public/build/assets/site-yiYUX_rW.css
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -32,7 +32,7 @@
     "name": "lodash-es"
   },
   "resources/css/site.css": {
-    "file": "assets/site-DU7OtWCi.css",
+    "file": "assets/site-yiYUX_rW.css",
     "src": "resources/css/site.css",
     "isEntry": true
   },

diff --git a/resources/views/page_builder/_form.antlers.html b/resources/views/page_builder/_form.antlers.html
@@ -54,7 +54,7 @@ <h3 class="mb-2 leading-5 font-bold text-red-700">{{ trans:strings.form_error }}
                             {{ fields scope="field" }}
                                 <template x-if="{{ show_field }}">
                                     <div class="
-                                        flex flex-col
+                                        flex flex-col stack-1
                                         {{ input_type == 'hidden' ?= 'hidden' }}
                                         {{ switch(
                                             (width == '25') => 'md:col-span-3',
@@ -69,16 +69,18 @@ <h3 class="mb-2 leading-5 font-bold text-red-700">{{ trans:strings.form_error }}
                                             <label class="font-bold" for="{{ handle }}">
                                                 {{ trans :key="field:display" }}
                                                 {{ if validate | contains('required') || validate | contains('accepted') }}
-                                                    <sup class="text-red-700">*</sup>
-                                                {{ /if }}
-
-                                                {{ if field:instructions && instructions_position != 'below' }}
-                                                    {{ partial:typography/p class="mt-1 font-normal text-sm" content="{ trans :key="field:instructions" }" }}
+                                                    <sup aria-label="{{ trans:strings.form_required }}" class="text-red-700">*</sup>
                                                 {{ /if }}
                                             </label>
+
+                                            {{ if field:instructions && instructions_position != 'below' }}
+                                                <span id="{{ field:handle }}-instructions" class="text-sm">
+                                                    {{ trans :key="field:instructions" }}
+                                                </span>
+                                            {{ /if }}
                                         {{ /unless }}
 
-                                        <div class="mt-2 flex flex-col gap-y-2">
+                                        <div class="stack-space-2 flex flex-col stack-2">
                                             {{ field:field }}
 
                                             {{# Inline error. #}}
@@ -87,9 +89,9 @@ <h3 class="mb-2 leading-5 font-bold text-red-700">{{ trans:strings.form_error }}
                                             </template>
 
                                             {{ if field:instructions && instructions_position === 'below' }}
-                                                <p id="{{ field:handle }}-instructions">
-                                                    {{ partial:typography/p as="span" class="text-sm" content="{ trans :key="field:instructions" }" }}
-                                                </p>
+                                                <span id="{{ field:handle }}-instructions" class="text-sm">
+                                                    {{ trans :key="field:instructions" }}
+                                                </span>
                                             {{ /if }}
                                         </div>
                                     </div>

diff --git a/resources/views/vendor/statamic/forms/fields/assets.antlers.html b/resources/views/vendor/statamic/forms/fields/assets.antlers.html
@@ -10,6 +10,6 @@
         name="{{ handle }}[]"
         multiple
     {{ /if }}
-    {{ instructions_position == 'below' ?= 'aria-describedBy="{handle}-instructions"' }}
+    {{ instructions ?= 'aria-describedBy="{handle}-instructions"' }}
 >
 <!-- End: /vendor/statamic/forms/fields/assets.antlers.html -->
diff --git a/resources/views/vendor/statamic/forms/fields/checkboxes.antlers.html b/resources/views/vendor/statamic/forms/fields/checkboxes.antlers.html
@@ -3,7 +3,7 @@
     :aria-invalid="form.invalid('{{ handle }}')"
     class="flex {{ inline ? 'gap-x-4' : 'flex-col gap-y-2' }}"
     id="{{ handle }}"
-    {{ instructions_position == 'below' ?= 'aria-describedBy="{handle}-instructions"' }}
+    {{ instructions ?= 'aria-describedBy="{handle}-instructions"' }}
 >
     {{ foreach:options as="value|label" }}
         <label class="inline-flex items-baseline">

diff --git a/resources/views/vendor/statamic/forms/fields/default.antlers.html b/resources/views/vendor/statamic/forms/fields/default.antlers.html
@@ -12,7 +12,7 @@
     name="{{ handle }}"
     type="{{ input_type ?? 'text' }}"
     {{ placeholder ?= 'placeholder="{placeholder}"' }}
-    {{ instructions_position == 'below' ?= 'aria-describedBy="{handle}-instructions"' }}
+    {{ instructions ?= 'aria-describedBy="{handle}-instructions"' }}
     {{ character_limit ?= 'maxlength="{character_limit}"' }}
     {{ autocomplete ?= 'autocomplete="{autocomplete}"' }}
     {{ old ?= 'value="{old}"' }}

diff --git a/resources/views/vendor/statamic/forms/fields/radio.antlers.html b/resources/views/vendor/statamic/forms/fields/radio.antlers.html
@@ -3,7 +3,7 @@
     :aria-invalid="form.invalid('{{ handle }}')"
     class="flex {{ inline ? 'gap-x-4' : 'flex-col gap-y-2' }}"
     id="{{ handle }}"
-    {{ instructions_position == 'below' ?= 'aria-describedBy="{handle}-instructions"' }}
+    {{ instructions ?= 'aria-describedBy="{handle}-instructions"' }}
 >
     {{ foreach:options as="value|label" }}
         <label class="inline-flex items-baseline">

diff --git a/resources/views/vendor/statamic/forms/fields/select.antlers.html b/resources/views/vendor/statamic/forms/fields/select.antlers.html
@@ -10,7 +10,7 @@
     class="w-full rounded"
     id="{{ handle }}"
     name="{{ handle }}{{ multiple ?= "[]" }}"
-    {{ instructions_position == 'below' ?= 'aria-describedBy="{handle}-instructions"' }}
+    {{ instructions ?= 'aria-describedBy="{handle}-instructions"' }}
     {{ multiple ?= "multiple" }}
     {{ autocomplete ?= 'autocomplete="{autocomplete}"' }}
 >

diff --git a/resources/views/vendor/statamic/forms/fields/textarea.antlers.html b/resources/views/vendor/statamic/forms/fields/textarea.antlers.html
@@ -12,7 +12,7 @@
     name="{{ handle }}"
     rows="5"
     {{ placeholder ?= 'placeholder="{placeholder}"' }}
-    {{ instructions_position == 'below' ?= 'aria-describedBy="{handle}-instructions"' }}
+    {{ instructions ?= 'aria-describedBy="{handle}-instructions"' }}
     {{ character_limit ?= 'maxlength="{character_limit}"' }}
     {{ autocomplete ?= 'autocomplete="{autocomplete}"' }}
 >{{ old }}</textarea>

diff --git a/resources/views/vendor/statamic/forms/fields/toggle.antlers.html b/resources/views/vendor/statamic/forms/fields/toggle.antlers.html
@@ -2,7 +2,7 @@
 <label
     class="inline-flex items-baseline"
     :aria-invalid="form.invalid('{{ handle }}')"
-    {{ instructions_position == 'below' ?= 'aria-describedBy="{handle}-instructions"' }}
+    {{ instructions ?= 'aria-describedBy="{handle}-instructions"' }}
 >
     <input type="hidden" name="{{ handle }}" value="0">
     <input