lfk/selfservice
3
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

accessibility fixes for input borders

Browse Source
This commit is contained in:
Philipp Dormann 2021-02-27 18:28:20 +01:00
parent 2b303ac9b2
commit b7f15f4d68
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Register.vue
View File

@ -19,7 +19,7 @@
:placeholder="[[$t('vorname')]]" :placeholder="[[$t('vorname')]]"
type="text" type="text"
:class="{ 'border-red-500': (!userdetails.firstname.trim()), 'border-green-300': (userdetails.firstname.trim()) }" :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> <label for="middle_name" class="block font-medium">{{ $t('mittelname') }}</label>
@ -30,7 +30,7 @@
autocomplete="off" autocomplete="off"
:placeholder="[[$t('mittelname')]]" :placeholder="[[$t('mittelname')]]"
type="text" 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"> <label for="last_name" class="block font-medium">
@ -45,7 +45,7 @@
:placeholder="[[$t('nachname')]]" :placeholder="[[$t('nachname')]]"
type="text" type="text"
:class="{ 'border-red-500': (!userdetails.lastname.trim()), 'border-green-300': (userdetails.lastname.trim()) }" :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"> <label for="email_address" class="block font-medium">
@ -60,7 +60,7 @@
placeholder="E-Mail Adresse" placeholder="E-Mail Adresse"
type="email" type="email"
:class="{ 'border-red-500': (!isEmail(userdetails.mail)), 'border-green-300': (isEmail(userdetails.mail)) }" :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> <p v-if="!isEmail(userdetails.mail)" class="text-sm">{{ $t('please_provide_valid_mail') }}</p>
<!-- --> <!-- -->
@ -73,7 +73,7 @@
:placeholder="[[$t('phone_number')]]" :placeholder="[[$t('phone_number')]]"
type="tel" type="tel"
:class="{ 'border-red-500': (!phone_valid), 'border-green-300': (phone_valid) }" :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"> <div class="grid grid-cols-6 mt-6">
@ -85,7 +85,7 @@
id="address_activated" id="address_activated"
name="address_activated" name="address_activated"
type="checkbox" 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>
<div class="ml-3 text-sm"> <div class="ml-3 text-sm">
@ -104,7 +104,7 @@
:placeholder="[[$t('strasse')]]" :placeholder="[[$t('strasse')]]"
id="street" id="street"
autocomplete="street-address" 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>
<div class="col-span-6 sm:col-span-6 lg:col-span-2"> <div class="col-span-6 sm:col-span-6 lg:col-span-2">
@ -114,7 +114,7 @@
name="city" name="city"
:placeholder="[[$t('ort')]]" :placeholder="[[$t('ort')]]"
id="city" 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>
<div class="col-span-6 sm:col-span-3 lg:col-span-2"> <div class="col-span-6 sm:col-span-3 lg:col-span-2">
@ -125,7 +125,7 @@
:placeholder="[[$t('plz')]]" :placeholder="[[$t('plz')]]"
id="postal_code" id="postal_code"
autocomplete="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>
</div> </div>
@ -137,7 +137,7 @@
id="agb_accepted" id="agb_accepted"
name="agb_accepted" name="agb_accepted"
type="checkbox" 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>
<div class="ml-3 text-sm"> <div class="ml-3 text-sm">
@ -152,7 +152,7 @@
@click="login" @click="login"
:disabled="(agb_accepted === false)" :disabled="(agb_accepted === false)"
:class="{ 'opacity-50': (agb_accepted === false), 'cursor-not-allowed': (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> >{{ $t('registrieren') }}</button>
</div> </div>
</div> </div>
@ -168,7 +168,7 @@
<div class="mt-6"> <div class="mt-6">
<a <a
href="./login" 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> >{{ $t('go_to_login') }}</a>
</div> </div>
</div> </div>