a11y

resources/js/components/Common/AuthButton.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
 const props = defineProps<{isLogin: boolean}>()
 const emit = defineEmits<(e: 'update:isLogin', value: boolean) => void>()
-
-const handleCheckboxChange = () => {
-  emit('update:isLogin', !props.isLogin)
-}
 </script>
 
 <template>
-  <label class="flex p-2 relative w-full cursor-pointer border-2 border-primary/30 rounded-xl  bg-white/30">
-    <input type="checkbox" class="sr-only" @change="handleCheckboxChange">
+  <button
+    class="flex p-2 relative w-full cursor-pointer border-2 border-primary/30 rounded-xl bg-white/30 outline-none focus:border-primary/60 duration-200 transition-colors"
+    aria-label="Przełącznik rejestracji i logowania"
+    @click="emit('update:isLogin', !props.isLogin)"
+  >
     <span
-      :class="{ 'translate-x-full' : props.isLogin}"
+      :class="{ 'translate-x-full' : props.isLogin }"
       class="left-2 w-[calc(50%-.5rem)] absolute h-[calc(100%-1rem)] rounded-md bg-primary duration-200"
     />
-    <span :class="{ 'text-white': !props.isLogin}" class="z-10 w-full text-center duration-200 py-3 text-primary font-bold">Rejestracja</span>
+    <span :class="{ 'text-white': !props.isLogin }" class="z-10 w-full text-center duration-200 py-3 text-primary font-bold">Rejestracja</span>
     <span :class="{ 'text-white': props.isLogin }" class="z-10 w-full text-center duration-200 py-3 text-primary font-bold">Logowanie</span>
-  </label>
+    <div aria-live="assertive" class="sr-only">
+      {{ props.isLogin ? 'Logowanie' : 'Rejestracja' }}
+    </div>
+  </button>
 </template>

resources/js/components/Common/CustomInput.vue

@@ -41,6 +41,7 @@ const model = defineModel<string>()
         :placeholder="placeholder"
         :autocomplete="autocomplete"
         @focus="isFocused=true"
+        @blur="isFocused=false"
       >
 
       <div v-if="slots.default" class="flex flex-1 items-center justify-center stroke-primary/100">

resources/js/components/Common/Searchbar.vue

@@ -1,20 +1,20 @@
 <script lang="ts" setup generic="T extends Option">
-
 import { ref, defineProps, computed} from 'vue'
 import {type Option} from '@/Types/Option'
 import { onClickOutside } from '@vueuse/core'
 import { nanoid } from 'nanoid'
 
 const id = ref(nanoid())
 const target = ref()
-onClickOutside(target,()=>isFocused.value=false)
+onClickOutside(target, () => isFocused.value = false)
 
 const isFocused = ref(false)
 const searchQuery = ref('')
 const props = defineProps<{
-  options: T[]
-  label : string
-  error?: string
+  options:T[]
+  label:string
+  ariaLabel?:string
+  error?:string
 }>()
 
 const selectedOption = ref<T>()
@@ -58,6 +58,7 @@ const onOptionClick = (option:T)=>{
           name="search"
           type="text"
           required
+          :aria-label="ariaLabel"
           :value="isFocused ? searchQuery : selectedOption?.text"
           :class="{'cursor-pointer' : !isFocused}"
           :placeholder="selectedOption?.text"
@@ -69,15 +70,16 @@ const onOptionClick = (option:T)=>{
       <Transition>
         <div v-show="true" class="m-0.5 mt-0 py-2 overflow-auto">
           <div v-if="optionsRef.length>0">
-            <div
+            <button
               v-for="obj in optionsRef"
               :key="obj.key"
-              class="cursor-pointer block px-4 py-2 hover:bg-primary/10 text-[0.9rem]"
-              @mousedown="onOptionClick(obj)"
+              class="cursor-pointer block px-4 py-2 hover:bg-primary/10 outline-none focus:bg-primary/10 text-[0.9rem] w-full text-left"
+              @click="onOptionClick(obj)"
+              @focus="isFocused=true"
             >
               <b v-if="obj.title">{{ obj.title.toUpperCase() }}</b>
               <p>{{ obj.text }}</p>
-            </div>
+            </button>
           </div>
           <span v-else class="block px-4 py-2 text-sm">
             Nie znaleziono szkoły

resources/js/components/Home/InformationButton.vue

@@ -7,7 +7,7 @@ const isInformationVisible = ref(false)
 
 <template>
   <div class="flex h-12 justify-center items-center">
-    <button class="text-primary text-2xl font-bold text-center hover:text-hovered-inf-btn duration-200" @click="isInformationVisible = true">
+    <button class="text-primary text-2xl font-bold duration-200 hover:text-primary-800 hover:scale-105" @click="isInformationVisible = true">
       INFORMACJE O KONKURSIE
     </button>
   </div>

resources/js/components/Home/InformationModalWindow.vue

@@ -14,9 +14,9 @@ function setHidden() {
          class="inset-0 h-screen w-full bg-black/15 backdrop-blur-md fixed z-20 p-5 flex justify-center items-center" @click="setHidden"
     >
       <div class="bg-white/85 backdrop-blur-md rounded-xl w-full flex flex-col max-w-2xl" @click.stop>
-        <h1 class="p-5 font-bold text-xl">Title</h1>
+        <h1 class="p-5 font-bold text-xl outline-none focus:shadow-md duration-200" tabindex="0">Title</h1>
         <hr>
-        <p class="p-5 text-[1.1rem]">
+        <p class="p-5 text-[1.1rem] outline-none focus:shadow-md duration-200" tabindex="0">
           Lorem ipsum dolor sit amet consectetur adipisicing elit.
           Esse corrupti provident voluptas ducimus neque libero reprehenderit eos voluptate quisquam minus.
           Dolorum quos animi fugit blanditiis repellendus voluptas sequi ex ea.

resources/js/components/Home/RegisterForm.vue

@@ -45,9 +45,16 @@ function submit() {
       <CustomInput v-model="form.surname" label="Nazwisko" :error="errors.surname" name="surname" type="surname" />
     </div>
 
-    <Searchbar :options="filteredSchoolOptions" label="Szkoła" :error="errors.school_id" @change="school => form.school_id = school.id.toString()" />
+    <Searchbar
+      label="Szkoła"
+      aria-label="Poszukiwanie szkół. Otwiera listę szkół"
+      :options="filteredSchoolOptions"
+      :error="errors.school_id"
+      @change="school => form.school_id = school.id.toString()"
+    />
 
     <CustomInput v-model="form.email" label="E-mail" :error="errors.email" name="email" type="email" />
+
     <PasswordInput v-model="form.password" :error="errors.password" />
 
     <label class="mx-2 mt-4 flex flex-row items-center gap-4">
@@ -72,27 +79,3 @@ function submit() {
     </div>
   </form>
 </template>
-
-<style scoped>
-::-webkit-scrollbar {
-  width: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background: #ffffff4c;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: #262c8926;
-  border-radius: 1rem;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #262c894c;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-</style>