feat: Improve accessibility of html elements (#179)

* Feature: Improve accessibility of html elements * Accessibility: Use button instead of label or anchor * chore: Improve logging in TournamentCreator
axuno · Jul 20, 2024 · f47382e · f47382e
1 parent e39625b
commit f47382e
Show file tree

Hide file tree

Showing 13 changed files with 101 additions and 48 deletions.
diff --git a/League/Scripts/Site.TempusDominusFactory.js b/League/Scripts/Site.TempusDominusFactory.js
@@ -20,7 +20,7 @@ Site.TempusDominusFactory = class {
         this.tdLocale = tempusDominus.locales[locale] || tempusDominus.locales[fallbackLocale];
         // .NET always uses ante meridiem designator for hours 0:00:00 (midnight) to 11:59:59.999,
         // and post meridiem designator for later hours (after noon).
-        this.tdHourCycle = hourCycle == 12 ? 'h11' : 'h23';
+        this.tdHourCycle = hourCycle === 12 ? 'h11' : 'h23';
         this.useBiIcons = useBiIcons;
 
         this._setTdDefaults();

diff --git a/League/Scripts/Site.TempusDominusFactory.min.js b/League/Scripts/Site.TempusDominusFactory.min.js
diff --git a/League/Templates/Email/PasswordResetHtml.tpl b/League/Templates/Email/PasswordResetHtml.tpl
@@ -5,7 +5,7 @@
     <!--[if mso]>
         <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ model.CallbackUrl }}" style="height: 38px; v-text-anchor: middle; width: 200px;" arcsize="27%" strokecolor="#018dff" fillcolor="#018dff">
             <w:anchorlock/>
-            <center style="color: #ffffff; font-family: Arial, sans-serif; font-size: 13px; font-weight: bold;">@buttonText</center>
+            <center style="color: #ffffff; font-family: Arial, sans-serif; font-size: 13px; font-weight: bold;">{{ L "Change Password" }}</center>
         </v:roundrect>
     <![endif]-->
     <!--[if !mso]><!-- -->

diff --git a/League/Views/Account/CreateAccount.cshtml b/League/Views/Account/CreateAccount.cshtml
@@ -21,12 +21,12 @@
             var loginProviders = (await SignInManager.GetExternalAuthenticationSchemesAsync()).ToList();
             if (loginProviders.Count != 0)
             {
-                <h3 class="h3">@Localizer["Register with a social network account"]</h3>
-                <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.ExternalSignIn)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="" role="form" novalidate>
+                <h3 id="register-social-media" class="h3">@Localizer["Register with a social network account"]</h3>
+                <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.ExternalSignIn)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" aria-labelledby="register-social-media" novalidate>
                     <div class="flex-row">
-                        @foreach (var provider in loginProviders)
+                        @foreach (var providerName in loginProviders.Select(lp => lp.Name))
                         {
-                            <button type="submit" class="btn btn-lg btn-secondary mb-2 me-2" name="provider" value="@provider.Name">@provider.Name</button>
+                            <button type="submit" class="btn btn-lg btn-secondary mb-2 me-2" name="provider" value="@providerName">@providerName</button>
                         }
                     </div>
                 </form>
@@ -36,12 +36,12 @@
     }
 </div>
 <div>
-    <h3 class="h3">@Localizer["Register with your email address"]</h3>
+    <h3 id="register-email" class="h3">@Localizer["Register with your email address"]</h3>
     <p>
         @Localizer["We will send you a message containing the confirmation code to your email address."]<br />
         @Localizer["Once your email is confirmed, you can finalize the registration."]
     </p>
-    <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.CreateAccount)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="col-md-8 col-sm-10 col-12 ps-0" role="form" novalidate>
+    <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.CreateAccount)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="col-md-8 col-sm-10 col-12 ps-0" aria-labelledby="register-email" novalidate>
         <site-validation-summary show="All">
             <b>@Localizer["Input has some issues"]:</b>
         </site-validation-summary>
@@ -58,7 +58,12 @@
         <div class="mb-3">
             <div class="mt-2">
                 <img id="CaptchaImage" style="vertical-align: bottom; display:inline" src="@Url.Action(nameof(League.Controllers.Captcha.Index), nameof(League.Controllers.Captcha))@("?guid=" + Guid.NewGuid())" alt="Captcha" title="" />
-                <label class="d-inline" onclick="javascript:if (document.images) document.images.CaptchaImage.src = '@Url.Action(nameof(League.Controllers.Captcha.Index), nameof(League.Controllers.Captcha))?new=1&amp;time=' + new Date().getTime();" style="cursor: pointer"><i class="fa fa-sync-alt fa-2x" style="margin: 0 5px 0 5px;" title="@Localizer["Reload"]"></i></label><br />
+                <button type="button" tabindex="0" class="d-inline btn btn-link"
+                       onclick="javascript:if (document.images) document.images.CaptchaImage.src = '@Url.Action(nameof(Captcha.Index), nameof(Captcha))?new=1&amp;time=' + new Date().getTime(); return false;"
+                       onkeyup="javascript:if (document.images && event.keyCode !== 9) document.images.CaptchaImage.src = '@Url.Action(nameof(Captcha.Index), nameof(Captcha))?new=1&amp;time=' + new Date().getTime(); return false;"
+                       style="cursor: pointer">
+                    <i class="fa fa-sync-alt fa-2x" style="margin: 0 5px 0 5px;" title="@Localizer["Reload"]"></i>
+                </button><br />
             </div>
             <label asp-for="Captcha" class="form-label mt-2"></label>
             <div class="input-group">

diff --git a/League/Views/Account/Register.cshtml b/League/Views/Account/Register.cshtml
@@ -19,7 +19,7 @@
     <hr />
 </div>
 <div>
-    <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.Register)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="col-md-8 col-sm-10 col-12 ps-0" role="form" novalidate>
+    <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.Register)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="col-md-8 col-sm-10 col-12 ps-0" novalidate>
         <site-validation-summary show="All">
             <b>@Localizer["Input has some issues"]:</b>
         </site-validation-summary>
@@ -35,9 +35,14 @@
             <label asp-for="Password" class="form-label"></label>
             <div class="input-group">
                 <input asp-for="Password" class="form-control" required="required" type="text" aria-describedby="passwordHelpBlock" />
-                <span class="input-group-text" style="cursor: pointer" onclick="Site.ShowHidePassword(this)">
+                <button class="input-group-text" 
+                        type="button"
+                        tabindex="0"
+                        style="cursor: pointer"
+                        onclick="Site.ShowHidePassword(this)"
+                        onkeyup="if(event.keyCode !== 9) Site.ShowHidePassword(this);">
                     <i class="fas fa-eye"></i>
-                </span>
+                </button>
             </div>
             <span asp-validation-for="Password" class="text-danger"></span>
             <small id="passwordHelpBlock" class="form-text text-muted">
@@ -48,9 +53,14 @@
             <label asp-for="ConfirmPassword" class="form-label"></label>
             <div class="input-group">
                 <input asp-for="ConfirmPassword" required="required" type="text" class="form-control" />
-                <span class="input-group-text" style="cursor: pointer" onclick="Site.ShowHidePassword(this)">
+                <button class="input-group-text" 
+                        type="button"
+                        tabindex="0"
+                        style="cursor: pointer"
+                        onclick="Site.ShowHidePassword(this)"
+                        onkeyup="if(event.keyCode !== 9) Site.ShowHidePassword(this);">
                     <i class="fas fa-eye"></i>
-                </span>
+                </button>
             </div>
             <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
         </div>

diff --git a/League/Views/Account/ResetPassword.cshtml b/League/Views/Account/ResetPassword.cshtml
@@ -11,7 +11,7 @@
 <div>
     <h2 class="h2">@ViewData["Title"]</h2>
     <hr />
-    <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.ResetPassword)" asp-route-tenant="@tenantUrlSegment" method="post" class="col-md-8 col-sm-10 col-12 ps-0" role="form" novalidate>
+    <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.ResetPassword)" asp-route-tenant="@tenantUrlSegment" method="post" class="col-md-8 col-sm-10 col-12 ps-0" novalidate>
         <site-validation-summary show="All">
             <b>@Localizer["Input has some issues"]:</b>
         </site-validation-summary>
@@ -30,9 +30,14 @@
             <label asp-for="Password" class="form-label"></label>
             <div class="input-group">
                 <input asp-for="Password" class="form-control" required="required" type="text" aria-describedby="passwordHelpBlock" />
-                <span class="input-group-text" style="cursor: pointer" onclick="Site.ShowHidePassword(this)">
+                <button class="input-group-text"
+                        type="button"
+                        tabindex="0"
+                        style="cursor: pointer"
+                        onclick="Site.ShowHidePassword(this)"
+                        onkeyup="if(event.keyCode !== 9) Site.ShowHidePassword(this);">
                     <i class="fas fa-eye"></i>
-                </span>
+                </button>
             </div>
             <span asp-validation-for="Password" class="text-danger"></span>
             <small id="passwordHelpBlock" class="form-text text-muted">
@@ -43,9 +48,14 @@
             <label asp-for="ConfirmPassword" class="form-label"></label>
             <div class="input-group">
                 <input asp-for="ConfirmPassword" required="required" type="text" class="form-control" />
-                <span class="input-group-text" style="cursor: pointer" onclick="Site.ShowHidePassword(this)">
+                <button class="input-group-text"
+                        type="button"
+                        tabindex="0"
+                        style="cursor: pointer"
+                        onclick="Site.ShowHidePassword(this)"
+                        onkeyup="if(event.keyCode !== 9) Site.ShowHidePassword(this);">
                     <i class="fas fa-eye"></i>
-                </span>
+                </button>
             </div>
             <span asp-validation-for="ConfirmPassword" class="text-danger"></span>
         </div>

diff --git a/League/Views/Account/SignIn.cshtml b/League/Views/Account/SignIn.cshtml
@@ -18,8 +18,8 @@
     {
     <hr/>
     <div class="col-md-8 col-sm-10 col-12 ps-0">
-        <h3 class="h3">@Localizer["Sign-in using a social network account"]</h3>
-            <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.ExternalSignIn)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" role="form" novalidate>
+        <h3 id="sign-in-social" class="h3">@Localizer["Sign-in using a social network account"]</h3>
+            <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.ExternalSignIn)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" aria-labelledby="sign-in-social" novalidate>
             @if (ViewData["Form"]?.ToString() == "SocialMedia")
             {
                 <site-validation-summary show="All">
@@ -37,8 +37,8 @@
 }
     <hr />
     <div class="col-md-8 col-sm-10 col-12 ps-0">
-        <h3 class="h3">@Localizer["Sign-in with your user account credentials"]</h3>
-    <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.SignIn)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" role="form" class="ps-0" novalidate>
+        <h3 id="sign-in-account" class="h3">@Localizer["Sign-in with your user account credentials"]</h3>
+        <form asp-controller="@nameof(Account)" asp-action="@nameof(Account.SignIn)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="ps-0" aria-labelledby="sign-in-account" novalidate>
             @if (ViewData["Form"]?.ToString() != "SocialMedia")
             {
                 <site-validation-summary show="All">
@@ -59,9 +59,14 @@
             <label asp-for="Password" class="form-label"></label>
                 <div class="input-group">
                     <input asp-for="Password" class="form-control" required="required" type="text" />@* js will change type to "password" *@
-                    <span class="input-group-text" style="cursor: pointer" onclick="Site.ShowHidePassword(this)">
+                    <button class="input-group-text" 
+                            type="button"
+                            tabindex="0"
+                            style="cursor: pointer"
+                            onclick="Site.ShowHidePassword(this)"
+                            onkeyup="if(event.keyCode !== 9) Site.ShowHidePassword(this);">
                         <i class="fas fa-eye"></i>
-                    </span>
+                    </button>
                 </div>
                 <span asp-validation-for="Password" class="text-danger"></span>
             </div>

diff --git a/League/Views/Contact/Index.cshtml b/League/Views/Contact/Index.cshtml
@@ -22,7 +22,7 @@
 </div>
 <div>
     @* Create the action url using the same named route as when invoking the controller action method *@
-    <form asp-route="@ViewContext.ActionDescriptor.AttributeRouteInfo?.Name" method="post" class="col-md-8 col-sm-10 col-12 ps-0" role="form" novalidate>
+    <form asp-route="@ViewContext.ActionDescriptor.AttributeRouteInfo?.Name" method="post" class="col-md-8 col-sm-10 col-12 ps-0" novalidate>
         <site-validation-summary show="All">
             <b>@Localizer["Input has some issues"]:</b>
         </site-validation-summary>
@@ -64,7 +64,12 @@
         <div class="mb-3">
             <div class="mt-2">
                 <img id="CaptchaImage" style="vertical-align: bottom; display: inline" src="@Url.Action(nameof(League.Controllers.Captcha.Index), nameof(League.Controllers.Captcha))@("?guid=" + Guid.NewGuid())" alt="Captcha" title=""/>
-                <label class="d-inline" onclick="javascript:if (document.images) document.images.CaptchaImage.src = '@Url.Action(nameof(League.Controllers.Captcha.Index), nameof(League.Controllers.Captcha))?new=1&amp;time=' + new Date().getTime();" style="cursor: pointer"><i class="fa fa-sync-alt fa-2x" style="margin: 0 5px 0 5px;" title="@Localizer["Reload"]"></i></label><br/>
+                <button type="button" tabindex="0" class="d-inline btn btn-link"
+                       onclick="javascript:if (document.images) document.images.CaptchaImage.src = '@Url.Action(nameof(League.Controllers.Captcha.Index), nameof(League.Controllers.Captcha))?new=1&amp;time=' + new Date().getTime();"
+                       onkeyup="javascript:if (document.images && event.keyCode !== 9) document.images.CaptchaImage.src = '@Url.Action(nameof(League.Controllers.Captcha.Index), nameof(League.Controllers.Captcha))?new=1&amp;time=' + new Date().getTime();"
+                       style="cursor: pointer">
+                    <i class="fa fa-sync-alt fa-2x" style="margin: 0 5px 0 5px;" title="@Localizer["Reload"]"></i>
+                </button><br/>
             </div>
             <label asp-for="Captcha" class="form-label mt-2"></label>
             <div class="input-group">