Knah-Tsaeb/MyShaarli
Knah-Tsaeb/MyShaarli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

a11y fix: label and tabindex

Browse source 
Don't use tabindex values other than -1, 0. (see https://webaim.org/techniques/keyboard/tabindex).

Fix inputs without labels (the placeholder attribute is not a proper labelling method)
This commit is contained in:
Luce Carević 2019-07-12 23:54:42 +02:00 committed by GitHub
parent c03c90a13e
commit 852872930f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
tpl/default/loginform.html
View file

@ -9,7 +9,7 @@
<div class="pure-g pure-alert pure-alert-error pure-alert-closable center"> <div class="pure-g pure-alert pure-alert-error pure-alert-closable center">
<div class="pure-u-2-24"></div> <div class="pure-u-2-24"></div>
<div class="pure-u-20-24"> <div class="pure-u-20-24">
{'You have been banned after too many failed login attempts. Try again later.'|t} <p>{'You have been banned after too many failed login attempts. Try again later.'|t}</p>
</div> </div>
<div class="pure-u-2-24"> <div class="pure-u-2-24">
<i class="fa fa-times pure-alert-close"></i> <i class="fa fa-times pure-alert-close"></i>
@ -22,20 +22,19 @@
<form method="post" name="loginform"> <form method="post" name="loginform">
<h2 class="window-title">{'Login'|t}</h2> <h2 class="window-title">{'Login'|t}</h2>
<div> <div>
<input type="text" name="login" placeholder="{'Username'|t}" <input type="text" name="login" aria-label="{'Username'|t}" placeholder="{'Username'|t}"
{if="!empty($username)"}value="{$username}"{/if} class="autofocus" tabindex="20"> {if="!empty($username)"}value="{$username}"{/if} class="autofocus">
</div> </div>
<div> <div>
<input type="password" name="password" placeholder="{'Password'|t}" class="autofocus" tabindex="21"> <input type="password" name="password" aria-label="{'Password'|t}" placeholder="{'Password'|t}" class="autofocus">
</div> </div>
<div class="remember-me"> <div class="remember-me">
<input type="checkbox" name="longlastingsession" id="longlastingsessionform" <input type="checkbox" name="longlastingsession" id="longlastingsessionform"
{if="$remember_user_default"}checked="checked"{/if} {if="$remember_user_default"}checked="checked"{/if}>
tabindex="22">
<label for="longlastingsessionform">{'Remember me'|t}</label> <label for="longlastingsessionform">{'Remember me'|t}</label>
</div> </div>
<div> <div>
<input type="submit" value="{'Login'|t}" class="bigbutton" tabindex="23"> <input type="submit" value="{'Login'|t}" class="bigbutton">
</div> </div>
<input type="hidden" name="token" value="{$token}"> <input type="hidden" name="token" value="{$token}">
{if="$returnurl"}<input type="hidden" name="returnurl" value="{$returnurl}">{/if} {if="$returnurl"}<input type="hidden" name="returnurl" value="{$returnurl}">{/if}
@ -48,4 +47,3 @@ <h2 class="window-title">{'Login'|t}</h2>
{include="page.footer"} {include="page.footer"}
</body> </body>
</html> </html>