Added Scroll to View on 1st error

lianmaymesi · Mar 21, 2024 · 2eaaadc · 2eaaadc
1 parent f85d3ff
commit 2eaaadc
Show file tree

Hide file tree

Showing 12 changed files with 18 additions and 12 deletions.
diff --git a/resources/views/components/error.blade.php b/resources/views/components/error.blade.php
@@ -1,3 +1,3 @@
-<div class="text-sm text-red-500" aria-live="assertive" x-init="$el.closest('form').querySelector('[aria-invalid=\'true\']').closest('label').scrollIntoView()">
+<div class="text-sm text-red-500" aria-live="assertive" x-init="$el.closest('form').querySelector('[aria-invalid=true]').closest('div').scrollIntoView()">
     {{ $slot }}
 </div>
diff --git a/resources/views/components/form/checkbox.blade.php b/resources/views/components/form/checkbox.blade.php
@@ -9,7 +9,7 @@
         'inline-flex items-center' => !$labelOff,
         'leading-none flex' => $labelOff,
     ])>
-        <input type="checkbox" {{ $attributes }}
+        <input type="checkbox" {{ $attributes }} aria-invalid="{{ $error ? 'true' : 'false' }}"
             class="w-4 h-4 text-indigo-600 border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring-0 focus:ring-indigo-200 focus:ring-opacity-50 focus:ring-offset-0" />
         @if (!$labelOff)
             <span class="ml-2 text-sm">{{ $slot }}</span>

diff --git a/resources/views/components/form/choice.blade.php b/resources/views/components/form/choice.blade.php
@@ -10,7 +10,8 @@
 <div class="grid gap-y-1.5" {{ $attributes->whereStartsWith('x-ref') }} wire:ignore-self>
     @if (!$labelOff)
         <div class="flex items-center justify-between">
-            <label class="text-sm font-medium tracking-wide text-slate-950">
+            <label class="text-sm font-medium tracking-wide text-slate-950"
+                aria-invalid="{{ $error ? 'true' : 'false' }}">
                 {{ $label }}
                 @if ($required)
                     <span class="text-red-600">*</span>

diff --git a/resources/views/components/form/file.blade.php b/resources/views/components/form/file.blade.php
@@ -10,7 +10,7 @@
         'flex items-center gap-x-4' => !$attributes->has('multiple'),
     ])>
         {{ $slot }}
-        <input {{ $attributes }} type="file"
+        <input {{ $attributes }} type="file" aria-invalid="{{ $error ? 'true' : 'false' }}"
             class="block w-full text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-indigo-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-indigo-700 hover:file:bg-indigo-100" />
     </div>
     @if ($helpText)

diff --git a/resources/views/components/form/flatpickr.blade.php b/resources/views/components/form/flatpickr.blade.php
@@ -9,7 +9,8 @@
 <div class="grid gap-y-1.5">
     @if (!$labelOff)
         <div class="flex items-center justify-between">
-            <label for="{{ str_slug($label) }}" class="text-sm font-medium tracking-wide text-slate-950">
+            <label for="{{ str_slug($label) }}" class="text-sm font-medium tracking-wide text-slate-950"
+                aria-invalid="{{ $error ? 'true' : 'false' }}">
                 {{ $label }}
                 @if ($required)
                     <span class="text-red-600">*</span>

diff --git a/resources/views/components/form/input.blade.php b/resources/views/components/form/input.blade.php
@@ -9,7 +9,7 @@
 <div class="grid gap-y-1.5">
     @if (!$labelOff)
         <div class="flex items-center justify-between">
-            <label for="{{ str_slug($label) }}" class="text-sm font-medium tracking-wide text-slate-950">
+            <label class="text-sm font-medium tracking-wide text-slate-950">
                 {{ $label }}
                 @if ($required)
                     <span class="text-red-600">*</span>
@@ -21,6 +21,7 @@
         class="flex overflow-hidden rounded-lg bg-slate-50 ring-1 ring-slate-950/10 focus-within:ring-2 focus-within:ring-indigo-600">
         <div class="flex-1 min-w-0">
             <input {{ $attributes }} @if ($readonly) readonly @endif
+                aria-invalid="{{ $error ? 'true' : 'false' }}" id="{{ str_slug($label) }}"
                 class="block w-full border-none bg-transparent py-1.5 pe-3 ps-3 text-sm leading-6 text-slate-950 outline-none transition duration-75 placeholder:text-slate-500 focus:ring-0 disabled:text-slate-500 disabled:placeholder:text-slate-400" />
         </div>
     </div>

diff --git a/resources/views/components/form/radio.blade.php b/resources/views/components/form/radio.blade.php
@@ -6,7 +6,7 @@
 ])
 <div @class(['grid', 'gap-y-1.5' => $helpText || $error])>
     <label class="inline-flex items-center">
-        <input type="radio" {{ $attributes }}
+        <input type="radio" {{ $attributes }} aria-invalid="{{ $error ? 'true' : 'false' }}"
             class="text-indigo-600 border-gray-300 rounded-full shadow-sm focus:border-indigo-300 focus:ring-0 focus:ring-indigo-200 focus:ring-opacity-50 focus:ring-offset-0" />
         @if (!$labelOff)
             <span class="ml-2 text-sm">{{ $slot }}</span>

diff --git a/resources/views/components/form/select-js.blade.php b/resources/views/components/form/select-js.blade.php
@@ -9,7 +9,8 @@
 <div class="grid gap-y-1.5" {{ $attributes->whereStartsWith('x-ref') }} wire:ignore>
     @if (!$labelOff)
         <div class="flex items-center justify-between">
-            <label class="text-sm font-medium tracking-wide text-slate-950">
+            <label class="text-sm font-medium tracking-wide text-slate-950"
+                aria-invalid="{{ $error ? 'true' : 'false' }}">
                 {{ $label }}
                 @if ($required)
                     <span class="text-red-600">*</span>

diff --git a/resources/views/components/form/select.blade.php b/resources/views/components/form/select.blade.php
@@ -19,7 +19,7 @@
     <div
         class="flex overflow-hidden rounded-lg bg-slate-50 ring-1 ring-slate-950/10 focus-within:ring-2 focus-within:ring-indigo-600">
         <div class="flex-1 min-w-0">
-            <select {{ $attributes }}
+            <select {{ $attributes }} aria-invalid="{{ $error ? 'true' : 'false' }}"
                 class="block w-full border-none bg-transparent py-1.5 pe-3 ps-3 text-sm leading-6 text-slate-950 outline-none transition duration-75 placeholder:text-slate-500 focus:ring-0 disabled:text-slate-500 disabled:placeholder:text-slate-400">
                 {{ $slot }}
             </select>

diff --git a/resources/views/components/form/tag.blade.php b/resources/views/components/form/tag.blade.php
@@ -48,7 +48,8 @@
     <div>
         @if (!$labelOff)
             <div class="flex items-center justify-between">
-                <label class="text-sm font-medium tracking-wide text-slate-950">
+                <label class="text-sm font-medium tracking-wide text-slate-950"
+                    aria-invalid="{{ $error ? 'true' : 'false' }}">
                     {{ $label }}
                     @if ($required)
                         <span class="text-red-600">*</span>

diff --git a/resources/views/components/form/textarea.blade.php b/resources/views/components/form/textarea.blade.php
@@ -19,7 +19,7 @@
     <div
         class="flex overflow-hidden rounded-lg bg-slate-50 ring-1 ring-slate-950/10 focus-within:ring-2 focus-within:ring-indigo-600">
         <div class="flex-1 min-w-0">
-            <textarea {{ $attributes }}
+            <textarea {{ $attributes }} aria-invalid="{{ $error ? 'true' : 'false' }}"
                 class="block w-full border-none bg-transparent py-1.5 pe-3 ps-3 text-sm leading-6 text-slate-950 outline-none transition duration-75 placeholder:text-slate-500 focus:ring-0 disabled:text-slate-500 disabled:placeholder:text-slate-400">{{ $slot }}</textarea>
         </div>
     </div>

diff --git a/resources/views/components/form/trix.blade.php b/resources/views/components/form/trix.blade.php
@@ -12,7 +12,8 @@
 <div class="grid gap-y-1.5">
     @if (!$labelOff)
         <div class="flex items-center justify-between">
-            <label for="" class="text-sm font-medium tracking-wide text-slate-950">
+            <label for="" class="text-sm font-medium tracking-wide text-slate-950"
+                aria-invalid="{{ $error ? 'true' : 'false' }}">
                 {{ $label }}
                 @if ($required)
                     <span class="text-red-600">*</span>