From b7f15f4d6827c893aa1fc4d47996df2fb46602ff Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sat, 27 Feb 2021 18:28:20 +0100
Subject: [PATCH] accessibility fixes for input borders

---
 src/components/Register.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/Register.vue b/src/components/Register.vue
index eafd7ee..b8256e2 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -19,7 +19,7 @@
           :placeholder="[[$t('vorname')]]"
           type="text"
           :class="{ 'border-red-500': (!userdetails.firstname.trim()), 'border-green-300': (userdetails.firstname.trim()) }"
-          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
         />
         <!--  -->
         <label for="middle_name" class="block font-medium">{{ $t('mittelname') }}</label>
@@ -30,7 +30,7 @@
           autocomplete="off"
           :placeholder="[[$t('mittelname')]]"
           type="text"
-          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
         />
         <!--  -->
         <label for="last_name" class="block font-medium">
@@ -45,7 +45,7 @@
           :placeholder="[[$t('nachname')]]"
           type="text"
           :class="{ 'border-red-500': (!userdetails.lastname.trim()), 'border-green-300': (userdetails.lastname.trim()) }"
-          class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
         />
         <!--  -->
         <label for="email_address" class="block font-medium">
@@ -60,7 +60,7 @@
           placeholder="E-Mail Adresse"
           type="email"
           :class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-green-300': (isEmail(userdetails.mail)) }"
-          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2"
         />
         <p v-if="!isEmail(userdetails.mail)" class="text-sm">{{ $t('please_provide_valid_mail') }}</p>
         <!--  -->
@@ -73,7 +73,7 @@
           :placeholder="[[$t('phone_number')]]"
           type="tel"
           :class="{ 'border-red-500': (!phone_valid), 'border-green-300': (phone_valid) }"
-          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border bg-gray-50 text-gray-500 rounded-md p-2"
+          class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-2 bg-gray-50 text-gray-500 rounded-md p-2"
         />
         <!--  -->
         <div class="grid grid-cols-6 mt-6">
@@ -85,7 +85,7 @@
                 id="address_activated"
                 name="address_activated"
                 type="checkbox"
-                class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+                class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
               />
             </div>
             <div class="ml-3 text-sm">
@@ -104,7 +104,7 @@
                 :placeholder="[[$t('strasse')]]"
                 id="street"
                 autocomplete="street-address"
-                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
             <div class="col-span-6 sm:col-span-6 lg:col-span-2">
@@ -114,7 +114,7 @@
                 name="city"
                 :placeholder="[[$t('ort')]]"
                 id="city"
-                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
             <div class="col-span-6 sm:col-span-3 lg:col-span-2">
@@ -125,7 +125,7 @@
                 :placeholder="[[$t('plz')]]"
                 id="postal_code"
                 autocomplete="postal-code"
-                class="dark:bg-gray-800 mt-1 focus:ring-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
+                class="dark:bg-gray-800 mt-1 block w-full shadow-sm sm:text-sm border-gray-300 border-2 bg-gray-50 text-gray-500 rounded-md p-2"
               />
             </div>
           </div>
@@ -137,7 +137,7 @@
               id="agb_accepted"
               name="agb_accepted"
               type="checkbox"
-              class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+              class="h-4 w-4 text-indigo-600 border-gray-300 rounded"
             />
           </div>
           <div class="ml-3 text-sm">
@@ -152,7 +152,7 @@
             @click="login"
             :disabled="(agb_accepted === false)"
             :class="{ 'opacity-50': (agb_accepted === false), 'cursor-not-allowed': (agb_accepted === false) }"
-            class="text-white block w-full text-center py-2 px-3 border border-gray-300 rounded-md p-1 bg-blue-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
+            class="text-white block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 bg-blue-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
           >{{ $t('registrieren') }}</button>
         </div>
       </div>
@@ -168,7 +168,7 @@
         <div class="mt-6">
           <a
             href="./login"
-            class="block w-full text-center py-2 px-3 border border-gray-300 rounded-md p-1 dark:bg-gray-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
+            class="block w-full text-center py-2 px-3 border-2 border-gray-300 rounded-md p-1 dark:bg-gray-800 font-medium hover:border-gray-400 focus:outline-none focus:border-gray-400 sm:text-sm"
           >{{ $t('go_to_login') }}</a>
         </div>
       </div>