added accessibility options to form components

dcblogdev · May 30, 2024 · f416114 · f416114
1 parent 30864e9
commit f416114
Show file tree

Hide file tree

Showing 15 changed files with 136 additions and 63 deletions.
diff --git a/resources/views/components/form/checkbox.blade.php b/resources/views/components/form/checkbox.blade.php
@@ -26,15 +26,15 @@
  @endphp
 @endif
 
-<label for='{{ $id }}' wire:key="{{ $id }}" class="{{ $class }}">
+<label aria-label="{{ $label }}" for='{{ $id }}' wire:key="{{ $id }}" class="{{ $class }}">
  <div class="flex gap-2">
- <input
- type="checkbox"
- name='{{ $name }}'
- id='{{ $id }}'
- value='{{ $value }}'
- @if ($selected === $value) checked='checked' @endif {{ $attributes }}
- >
+  <input
+  type="checkbox"
+  name='{{ $name }}'
+  id='{{ $id }}'
+  value='{{ $value }}'
+  @if ($selected === $value) checked='checked' @endif {{ $attributes }}
+  >
  {{ $label }}
  </div>
 </label>
diff --git a/resources/views/components/form/ckeditor.blade.php b/resources/views/components/form/ckeditor.blade.php
@@ -22,9 +22,10 @@
 @endif
 <div wire:ignore class="mt-5">
  @if ($label !='none')
- <label for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
+ <label aria-label="{{ $label }}" for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
  @endif
  <textarea
+ id="{{ $name }}"
  x-data
  x-init="
  editor = CKEDITOR.replace($refs.item);
@@ -34,10 +35,14 @@
  "
  x-ref="item"
  {{ $attributes }}
+ @error($name)
+ aria-invalid="true"
+ aria-description="{{ $message }}"
+ @enderror
  >
  {{ $slot }}
  </textarea>
 </div>
 @error($name)
- <p class="error">{{ $message }}</p>
+ <p class="error" aria-live="assertive">{{ $message }}</p>
 @enderror
diff --git a/resources/views/components/form/date.blade.php b/resources/views/components/form/date.blade.php
@@ -31,7 +31,7 @@
 
 <div class="mb-5">
  @if ($label !='none')
- <label for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
+ <label aria-label="{{ $label }}" for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
  @endif
  <div class="mt-1 rounded-md shadow-sm">
  <input
@@ -43,9 +43,14 @@
  name="{{ $name }}"
  value="{{ $slot }}"
  {{ $required }}
- {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}>
+ {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}
+ @error($name)
+ aria-invalid="true"
+ aria-description="{{ $message }}"
+ @enderror
+ >
  @error($name)
- <p class="error">{{ $message }}</p>
+ <p class="error" aria-live="assertive">{{ $message }}</p>
  @enderror
  </div>
-</div>
+</div>
diff --git a/resources/views/components/form/daterange.blade.php b/resources/views/components/form/daterange.blade.php
@@ -32,7 +32,7 @@
 
 <div class="mb-5">
  @if ($label !='none')
- <label for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
+ <label aria-label="{{ $label }}" for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
  @endif
  <div class="mt-1 rounded-md shadow-sm">
  <input
@@ -44,9 +44,14 @@
  name="{{ $name }}"
  value="{{ $slot }}"
  {{ $required }}
- {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}>
+ {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}
+ @error($name)
+ aria-invalid="true"
+ aria-description="{{ $message }}"
+ @enderror
+ >
  @error($name)
- <p class="error">{{ $message }}</p>
+ <p class="error" aria-live="assertive">{{ $message }}</p>
  @enderror
  </div>
-</div>
+</div>
diff --git a/resources/views/components/form/datetime.blade.php b/resources/views/components/form/datetime.blade.php
@@ -31,7 +31,7 @@
 
 <div class="mb-5">
  @if ($label !='none')
- <label for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
+ <label aria-label="{{ $label }}" for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
  @endif
  <div class="mt-1 rounded-md shadow-sm">
  <input
@@ -43,9 +43,14 @@
  name="{{ $name }}"
  value="{{ $slot }}"
  {{ $required }}
- {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}>
+ {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}
+ @error($name)
+ aria-invalid="true"
+ aria-description="{{ $message }}"
+ @enderror
+ >
  @error($name)
- <p class="error">{{ $message }}</p>
+ <p class="error" aria-live="assertive">{{ $message }}</p>
  @enderror
  </div>
-</div>
+</div>
diff --git a/resources/views/components/form/group.blade.php b/resources/views/components/form/group.blade.php
@@ -3,7 +3,7 @@
 ])
 
 <div>
- <label class="block text-sm font-medium leading-5 text-gray-700 dark:text-white">{{ $label }}</label>
+ <label aria-label="{{ $label }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-white">{{ $label }}</label>
  <div class="mt-2">
  {{ $slot }}
  </div>

diff --git a/resources/views/components/form/input.blade.php b/resources/views/components/form/input.blade.php
@@ -24,7 +24,7 @@
 
 <div class="mb-5">
  @if ($label !='none')
- <label for="{{ $name }}"
+ <label aria-label="{{ $label }}" for="{{ $name }}"
  class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200"
  >{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
  @endif
@@ -39,9 +39,14 @@ class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200"
  'block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm',
  'border-red-500' => $errors->has($name),
  ])
- {{ $attributes }}>
+ {{ $attributes }}
+ @error($name)
+ aria-invalid="true"
+ aria-description="{{ $message }}"
+ @enderror
+ >
  @error($name)
- <p class="error">{{ $message }}</p>
+ <p class="error" aria-live="assertive">{{ $message }}</p>
  @enderror
  </div>
 </div>

diff --git a/resources/views/components/form/radio.blade.php b/resources/views/components/form/radio.blade.php
@@ -2,7 +2,8 @@
  'name' => '',
  'id' => '',
  'label' => '',
- 'value' => ''
+ 'value' => '',
+ 'class' => 'block cursor-pointer',
 ])
 
 @if ($id === '')
@@ -24,7 +25,15 @@
  @endphp
 @endif
 
-<div>
- <input type='radio' name='{{ $name }}' id='{{ $id }}' value='{{ $value }}' @if ($slot != '') checked="checked" @endif {{ $attributes }}>
- <label for='{{ $id }}'>{{ $label }}</label>
-</div>
+<label aria-label="{{ $label }}" for='{{ $id }}' wire:key="{{ $id }}" class="{{ $class }}">
+ <div class="flex gap-2">
+ <input
+ type="radio"
+ name='{{ $name }}'
+ id='{{ $id }}'
+ value='{{ $value }}'
+ @if ($slot != '') checked="checked" @endif {{ $attributes }}
+ >
+ {{ $label }}
+ </div>
+</label>
diff --git a/resources/views/components/form/select.blade.php b/resources/views/components/form/select.blade.php
@@ -23,15 +23,24 @@
 
 <div class="mb-5">
  @if ($label !='none')
- <label for='{{ $name }}' class='block mb-2 font-bold text-sm text-gray-600 dark:text-gray-200'>{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
+ <label aria-label="{{ $label }}" for='{{ $name }}' class='block mb-2 font-bold text-sm text-gray-600 dark:text-gray-200'>{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
  @endif
- <select name='{{ $name }}' id='{{ $name }}' {{ $required }} {{ $attributes->merge(['class' => 'border border-gray-300 dark:bg-gray-500 dark:text-gray-200 p-1 w-full rounded']) }}>
- @if ($placeholder != '')
- <option value=''>{{ $placeholder }}</option>
- @endif
- {{ $slot }}
+ <select
+ name='{{ $name }}'
+ id='{{ $name }}'
+ {{ $required }}
+ {{ $attributes->merge(['class' => 'border border-gray-300 dark:bg-gray-500 dark:text-gray-200 p-1 w-full rounded']) }}
+ @error($name)
+ aria-invalid="true"
+ aria-description="{{ $message }}"
+ @enderror
+ >
+ @if ($placeholder != '')
+ <option value=''>{{ $placeholder }}</option>
+ @endif
+ {{ $slot }}
  </select>
  @error($name)
- <p class="error">{{ $message }}</p>
+ <p class="error" aria-live="assertive">{{ $message }}</p>
  @enderror
 </div>
diff --git a/resources/views/components/form/submit.blade.php b/resources/views/components/form/submit.blade.php
@@ -1,9 +1,14 @@
-<x-button
- type="submit"
- id="submit"
- {{ $attributes->merge([
- 'class' => 'btn btn-primary disabled:cursor-not-allowed disabled:opacity-75'
- ]) }}
->
+@props([
+ 'type' => 'submit',
+ 'class' => 'btn btn-primary disabled:cursor-not-allowed disabled:opacity-75',
+])
+
+<button type="{{ $type }}" {{ $attributes->merge(['class' => $class]) }}>
+ <div wire:loading.flex>
+ <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+ </svg>
+ </div>
  {{ $slot }}
-</x-button>
+</button>
diff --git a/resources/views/components/form/textarea.blade.php b/resources/views/components/form/textarea.blade.php
@@ -22,12 +22,22 @@
 
 <div class="mt-5 mb-5">
  @if ($label !='none')
- <label for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
+ <label aria-label="{{ $label }}" for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
  @endif
  <div class="mt-1 rounded-md shadow-sm">
- <textarea name='{{ $name }}' id='{{ $name }}' {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}>{{ $slot }}</textarea>
+ <textarea
+ name='{{ $name }}'
+ id='{{ $name }}'
+ {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}
+ @error($name)
+ aria-invalid="true"
+ aria-description="{{ $message }}"
+ @enderror
+ >
+ {{ $slot }}
+ </textarea>
  @error($name)
- <p class="error">{{ $message }}</p>
+ <p class="error" aria-live="assertive">{{ $message }}</p>
  @enderror
  </div>
 </div>
diff --git a/resources/views/components/form/time.blade.php b/resources/views/components/form/time.blade.php
@@ -32,7 +32,7 @@
 
 <div class="mb-5">
  @if ($label !='none')
- <label for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
+ <label aria-label="{{ $label }}" for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
  @endif
  <div class="mt-1 rounded-md shadow-sm">
  <input
@@ -44,9 +44,14 @@
  name="{{ $name }}"
  value="{{ $slot }}"
  {{ $required }}
- {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}>
+ {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}
+ @error($name)
+ aria-invalid="true"
+ aria-description="{{ $message }}"
+ @enderror
+ >
  @error($name)
- <p class="error">{{ $message }}</p>
+ <p class="error" aria-live="assertive">{{ $message }}</p>
  @enderror
  </div>
-</div>
+</div>
diff --git a/resources/views/components/form/timeday.blade.php b/resources/views/components/form/timeday.blade.php
@@ -34,7 +34,7 @@
 
 <div class="mb-5">
  @if ($label !='none')
- <label for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
+ <label aria-label="{{ $label }}" for="{{ $name }}" class="block text-sm font-medium leading-5 text-gray-700 dark:text-gray-200">{{ $label }} @if ($required != '') <span class="error">*</span>@endif</label>
  @endif
  <div class="mt-1 rounded-md shadow-sm">
  <input
@@ -46,9 +46,14 @@
  name="{{ $name }}"
  value="{{ $slot }}"
  {{ $required }}
- {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}>
+ {{ $attributes->merge(['class' => 'mt-1 block w-full dark:bg-gray-500 dark:text-gray-200 dark:placeholder-gray-200 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-light-blue-500 focus:border-light-blue-500 sm:text-sm']) }}
+ @error($name)
+ aria-invalid="true"
+ aria-description="{{ $message }}"
+ @enderror
+ >
  @error($name)
- <p class="error">{{ $message }}</p>
+ <p class="error" aria-live="assertive">{{ $message }}</p>
  @enderror
  </div>
-</div>
+</div>
diff --git a/resources/views/errors/messages.blade.php b/resources/views/errors/messages.blade.php
@@ -1,10 +1,10 @@
 @foreach (session('flash_notification', collect())->toArray() as $message)
  @if($message['level'] === 'danger' || $message['level'] === 'info')
- <div class="alert alert-{{ $message['level'] }}" role="alert">
+ <div aria-live="assertive" class="alert alert-{{ $message['level'] }}" role="alert">
  {!! $message['message'] !!}
  </div>
  @else
- <div x-data="{ show: true }"
+ <div aria-live="assertive" x-data="{ show: true }"
  x-show="show"
  x-transition
  x-init="setTimeout(() => show = false, 2000)"
@@ -19,19 +19,19 @@ class="alert alert-{{ $message['level'] }}"
 {{ session()->forget('flash_notification') }}
 
 @if (session('message'))
- <div>
+ <div aria-live="assertive">
  {{ session('message') }}
  </div>
 @endif
 
 @if (session('success'))
- <div class="alert alert-green">
+ <div aria-live="assertive" class="alert alert-green">
  {{ session('success') }}
  </div>
 @endif
 
 @if (session('status'))
- <div class="alert alert-primary">
+ <div aria-live="assertive" class="alert alert-primary">
  {{ session('status') }}
  </div>
-@endif
+@endif
diff --git a/resources/views/livewire/admin/dashboard.blade.php b/resources/views/livewire/admin/dashboard.blade.php
@@ -5,4 +5,9 @@
  {{ __("You're logged in!") }}
  </div>
 
+ <x-form.radio name="want" id="yes" label="Yes" />
+ <x-form.radio name="want" id="no" label="No" />
+ <x-form.checkbox name="hey" id="jey" label="Hey" />
+ <x-form.checkbox name="cool" id="cool" label="Cool" />
+
 </div>