Improve accessibility of html elements (#201)

* Replace anchor with button for Google Analytics opt-out link in `Privacy.de.cshtml` to enhance accessibility and user interaction. * Remove `role="form"` attribute from form elements in multiple `.cshtml` files to adhere to modern HTML5 standards. * Replace `div` with `button` for team filters in `Fixtures.cshtml` and `Results.cshtml` to improve accessibility and interaction. * Update `Fixtures.cshtml` to use `asp-action` and `asp-controller` attributes instead of inline JavaScript for printing match report sheets, enhancing maintainability and readability. * Added CSS rules in `Fixtures.cshtml` and `Results.cshtml` to style new button elements for team filters.
axuno · Oct 7, 2024 · c84023c · c84023c
1 parent ff6fbc6
commit c84023c
Show file tree

Hide file tree

Showing 27 changed files with 35 additions and 33 deletions.
diff --git a/League.Demo/Views/Home/Privacy.de.cshtml b/League.Demo/Views/Home/Privacy.de.cshtml
@@ -138,7 +138,7 @@
 <p>Die Bereitstellung Ihrer personenbezogenen Daten erfolgt freiwillig, allein auf Basis Ihrer Einwilligung. Sofern Sie den Zugriff unterbinden, kann es hierdurch zu Funktionseinschränkungen auf der Website kommen.</p>
 <h3>Widerruf der Einwilligung:</h3>
 <p>Sie können die Speicherung der Cookies durch eine entsprechende Einstellung Ihrer Browser-Software verhindern; wir weisen Sie jedoch darauf hin, dass Sie in diesem Fall gegebenenfalls nicht sämtliche Funktionen dieser Website vollumfänglich werden nutzen können. Sie können darüber hinaus die Erfassung der durch das Cookie erzeugten und auf Ihre Nutzung der Webseite bezogenen Daten (inkl. Ihrer IP-Adresse) an Google sowie die Verarbeitung dieser Daten durch Google verhindern, indem sie das unter dem folgenden Link verfügbare Browser-Plugin herunterladen und installieren: <a href="http://tools.google.com/dlpage/gaoptout?hl=de">Browser Add On zur Deaktivierung von Google Analytics</a>.</p>
-<p>Zusätzlich oder als Alternative zum Browser-Add-On können Sie das Tracking durch Google Analytics auf unseren Seiten unterbinden, indem Sie <a title="Google Analytics Opt-Out-Cookie setzen" onClick="gaOptout();alert('Google Analytics wurde deaktiviert');" href="#">diesen Link anklicken</a>. Dabei wird ein Opt-out-Cookie auf Ihrem Gerät installiert. Damit wird die Erfassung durch Google Analytics für diese Website und für diesen Browser zukünftig verhindert, so lange das Cookie in Ihrem Browser installiert bleibt.</p>
+<p>Zusätzlich oder als Alternative zum Browser-Add-On können Sie das Tracking durch Google Analytics auf unseren Seiten unterbinden, indem Sie <button type="button" title="Google Analytics Opt-Out-Cookie setzen" onClick="gaOptout();alert('Google Analytics wurde deaktiviert');">diesen Link anklicken</button>. Dabei wird ein Opt-out-Cookie auf Ihrem Gerät installiert. Damit wird die Erfassung durch Google Analytics für diese Website und für diesen Browser zukünftig verhindert, solange das Cookie in Ihrem Browser installiert bleibt.</p>
 <h3>Profiling:</h3>
 <p>Mit Hilfe des Tracking-Tools Google Analytics kann das Verhalten der Besucher der Webseite bewertet und die Interessen analysiert werden. Hierzu erstellen wir ein pseudonymes Nutzerprofil.</p>
 <p></p>

diff --git a/League/Areas/Admin/Views/Impersonation/Index.cshtml b/League/Areas/Admin/Views/Impersonation/Index.cshtml
@@ -15,7 +15,7 @@
 <div class="mb-0 pb-1">
     <h2 class="h2">@ViewData["Title"]</h2>
     <div>
-        <form asp-controller="@nameof(League.Areas.Admin.Controllers.Impersonation)" asp-action="@nameof(League.Areas.Admin.Controllers.Impersonation.Index)" asp-route-tenant="@tenantRoute" method="get" role="form" novalidate>
+        <form asp-controller="@nameof(League.Areas.Admin.Controllers.Impersonation)" asp-action="@nameof(League.Areas.Admin.Controllers.Impersonation.Index)" asp-route-tenant="@tenantRoute" method="get" novalidate>
             <div class="mb-3">
                 <label for="search" class="form-label">@Localizer["Find by email, first/last/nick name"]</label>
                 <input id="search" name="search" required="required" class="form-control" value="@search" aria-describedby="searchHelpBlock" />

diff --git a/League/Views/Account/ExternalSignInConfirmation.cshtml b/League/Views/Account/ExternalSignInConfirmation.cshtml
@@ -17,7 +17,7 @@
 }
 <h2 class="h2">@(Localizer.GetHtml("Associate your <strong>{0}</strong> account", loginProvider)).</h2>
 <hr />
-<form asp-controller="@nameof(Account)" asp-action="@nameof(Account.ExternalSignInConfirmation)" 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.ExternalSignInConfirmation)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="col-md-8 col-sm-10 col-12 ps-0" novalidate>
     <site-alert type="Success">
         @(Localizer.GetHtml("You have successfully authenticated with <strong>{0}</strong>", loginProvider)).
     </site-alert>

diff --git a/League/Views/Account/ForgotPassword.cshtml b/League/Views/Account/ForgotPassword.cshtml
@@ -10,7 +10,7 @@
 }
 <h2 class="h2">@(ViewData["Title"])</h2>
 <hr />
-<form asp-controller="@nameof(Account)" asp-action="@nameof(Account.ForgotPassword)" 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.ForgotPassword)" asp-route-tenant="@tenantUrlSegment" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="col-md-8 col-sm-10 col-12 ps-0" novalidate>
     <p>
         @(Localizer["Please enter the primary email address or the username of your account. We will send and email with a code to reset the password to this email address."])
     </p>

diff --git a/League/Views/Manage/_ChangeEmailModalPartial.cshtml b/League/Views/Manage/_ChangeEmailModalPartial.cshtml
@@ -12,7 +12,7 @@
             <p>@Localizer["For changing your primary email address we will send a confirmation code to the new email."]</p>
             <p><strong>@Localizer["The primary email address will be changed only after the confirmation link in our message was submitted."]</strong></p>
         </div>
-        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.ChangeEmail)" asp-route-tenant="@tenantUrlSegment" method="post" role="form" novalidate>
+        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.ChangeEmail)" asp-route-tenant="@tenantUrlSegment" method="post" novalidate>
             <site-validation-summary show="All"></site-validation-summary>
             <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
             <div class="mb-3">

diff --git a/League/Views/Manage/_ChangeUsernameModalPartial.cshtml b/League/Views/Manage/_ChangeUsernameModalPartial.cshtml
@@ -14,7 +14,7 @@
 <modal id="change-username" title="@Localizer["Change username"].Value" tabindex="-1">
     <modal-body>
         @* Form with only 1 input field can be submitted with enter key. So we have to prevent default submit behavior and trigger a click on saveBtn *@
-        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.ChangeUserName)" asp-route-tenant="@tenantUrlSegment" method="post" role="form" novalidate>
+        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.ChangeUserName)" asp-route-tenant="@tenantUrlSegment" method="post" novalidate>
             <site-validation-summary show="All"></site-validation-summary>
             <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
             <div class="mb-3">

diff --git a/League/Views/Manage/_DeleteAccountModalPartial.cshtml b/League/Views/Manage/_DeleteAccountModalPartial.cshtml
@@ -11,7 +11,7 @@
         <div>
             <p>@Localizer["Once you delete your user account, there is no going back. Please be certain."]</p>
         </div>
-        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.DeleteAccountConfirmed)" asp-route-tenant="@tenantUrlSegment" method="post" role="form" novalidate>
+        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.DeleteAccountConfirmed)" asp-route-tenant="@tenantUrlSegment" method="post" novalidate>
         </form>
     </modal-body>
     <modal-footer show-dismiss="true" dismiss-text="@Localizer["Cancel"].Value">

diff --git a/League/Views/Manage/_EditEmail2ModalPartial.cshtml b/League/Views/Manage/_EditEmail2ModalPartial.cshtml
@@ -13,7 +13,7 @@
         <div>
             <p>@Localizer["The Additional Email will receive the same messages as the Primary Email."]</p>
         </div>
-        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.EditEmail2)" asp-route-tenant="@tenantUrlSegment" method="post" role="form" novalidate>
+        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.EditEmail2)" asp-route-tenant="@tenantUrlSegment" method="post" novalidate>
             <site-validation-summary show="All"></site-validation-summary>
             <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
             <div class="mb-3">

diff --git a/League/Views/Manage/_EditPersonalDetailsModalPartial.cshtml b/League/Views/Manage/_EditPersonalDetailsModalPartial.cshtml
@@ -20,7 +20,7 @@
 <!-- Modal -->
 <modal id="change-email" title="@Localizer["Change Personal Details"].Value" tabindex="-1">
     <modal-body>
-        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.EditPersonalDetails)" asp-route-tenant="@tenantUrlSegment" method="post" role="form" novalidate>
+        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.EditPersonalDetails)" asp-route-tenant="@tenantUrlSegment" method="post" novalidate>
             <site-validation-summary show="All"></site-validation-summary>
             <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
             <div class="mb-3">

diff --git a/League/Views/Manage/_EditPhone2ModalPartial.cshtml b/League/Views/Manage/_EditPhone2ModalPartial.cshtml
@@ -10,7 +10,7 @@
 <!-- Modal -->
 <modal id="change-email" title="@Localizer["Change Additional Phone Number"].Value" tabindex="-1">
     <modal-body>
-        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.EditPhoneNumber2)" asp-route-tenant="@tenantUrlSegment" method="post" role="form" novalidate>
+        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.EditPhoneNumber2)" asp-route-tenant="@tenantUrlSegment" method="post" novalidate>
             <site-validation-summary show="All"></site-validation-summary>
             <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
             <div class="mb-3">

diff --git a/League/Views/Manage/_EditPhoneModalPartial.cshtml b/League/Views/Manage/_EditPhoneModalPartial.cshtml
@@ -11,7 +11,7 @@
 <!-- Modal -->
 <modal id="change-email" title="@Localizer["Change Primary Phone Number"].Value" tabindex="-1">
     <modal-body>
-        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.EditPhoneNumber)" asp-route-tenant="@tenantUrlSegment" method="post" role="form" novalidate>
+        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.EditPhoneNumber)" asp-route-tenant="@tenantUrlSegment" method="post" novalidate>
             <site-validation-summary show="All"></site-validation-summary>
             <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
             <div class="mb-3">

diff --git a/League/Views/Manage/_ManageLoginsModalPartial.cshtml b/League/Views/Manage/_ManageLoginsModalPartial.cshtml
@@ -20,7 +20,7 @@
                         <div class="col-sm-7 text-wrap">
                             @if (Model.ShowRemoveButton)
                             {
-                                <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.RemoveLogin)" asp-route-tenant="@tenantUrlSegment" method="post" role="form" novalidate>
+                                <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.RemoveLogin)" asp-route-tenant="@tenantUrlSegment" method="post" novalidate>
                                     <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
                                     <input name="@nameof(RemoveLoginViewModel.LoginProvider)" value="@Model.CurrentLogins[index].LoginProvider" type="hidden" />
                                     <input name="@nameof(RemoveLoginViewModel.ProviderKey)" value="@Model.CurrentLogins[index].ProviderKey" type="hidden" />
@@ -29,7 +29,7 @@
                             }
                             else
                             {
-                                <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.SetPassword)" asp-route-tenant="@tenantUrlSegment" method="get" role="form" novalidate>
+                                <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.SetPassword)" asp-route-tenant="@tenantUrlSegment" method="get" novalidate>
                                     <button type="button" site-ajax-submit class="btn btn-sm btn-primary" aria-describedby="setPasswordHelpBlock">@Localizer["Set Local Password"]</button>
                                     <small id="setPasswordHelpBlock" class="form-text text-muted d-inline-block">
                                         @Localizer["Set a local password before you remove the social login"]
@@ -45,7 +45,7 @@
                 <div class="mt-4">
                     <h4 class="h4">@Localizer["Add New Social Login"]</h4>
                     <hr />
-                    <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.LinkLogin)" asp-route-tenant="@tenantUrlSegment" method="post" role="form" novalidate>
+                    <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.LinkLogin)" asp-route-tenant="@tenantUrlSegment" method="post" novalidate>
                         <div id="socialLoginList">
                             <p>
                                 @foreach (var provider in Model.OtherLogins)

diff --git a/League/Views/Manage/_SetPasswordModalPartial.cshtml b/League/Views/Manage/_SetPasswordModalPartial.cshtml
@@ -13,7 +13,7 @@
 <!-- Modal -->
 <modal id="set-password" title="@ViewData["Title"]" tabindex="-1">
     <modal-body>
-        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.SetPassword)" asp-route-tenant="@tenantUrlSegment" method="post" role="form" novalidate>
+        <form asp-controller="@nameof(Manage)" asp-action="@nameof(Manage.SetPassword)" asp-route-tenant="@tenantUrlSegment" method="post" novalidate>
             <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
             <p class="text-info">
                 @Localizer["You do not have a local password for this site. Add a local password so you can sign in without an external login."]

diff --git a/League/Views/Match/EditFixture.cshtml b/League/Views/Match/EditFixture.cshtml
@@ -15,7 +15,7 @@
 <div class="mb-0 pb-1">
     <h2 class="h2">@ViewData["Title"]</h2>
     <hr />
-    <form asp-controller="@nameof(Match)" asp-action="@nameof(Match.EditFixture)" asp-route-tenant="@tenantUrlSegment" method="post" role="form" novalidate>
+    <form asp-controller="@nameof(Match)" asp-action="@nameof(Match.EditFixture)" asp-route-tenant="@tenantUrlSegment" method="post" novalidate>
         <site-validation-summary show="All" warning="@Model.IsWarning"></site-validation-summary>
         <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />@* needed for unobtrusive validation *@
         <input hidden="hidden" asp-for="Id" />

diff --git a/League/Views/Match/EnterResult.cshtml b/League/Views/Match/EnterResult.cshtml
@@ -57,7 +57,7 @@
             <a asp-action="@nameof(League.Controllers.Match.OverruleResult)" asp-controller="@nameof(League.Controllers.Match)" asp-route-tenant="@TenantContext.SiteContext.UrlSegmentValue" asp-route-id="@Model.Id" class="btn btn-secondary">@Localizer["Enable overruling"]</a>
         }
     </div>
-    <form method="post" role="form" novalidate>
+    <form method="post" novalidate>
         <site-validation-summary show="All" warning="@Model.IsWarning"></site-validation-summary>
         <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
         <input hidden="hidden" asp-for="Id" />

diff --git a/League/Views/Match/Fixtures.cshtml b/League/Views/Match/Fixtures.cshtml
@@ -77,10 +77,10 @@
         {
             <div class="tab-pane@{if (r.RoundId == activeRoundId) {<text> show active</text>}}" id="tab-@(r.RoundId)" role="tabpanel">
                 <div class="text-success">@r.RoundTypeDescription</div>
-                <div id="team-filter-@r.RoundId" class="team-filter my-2 d-none" data-bs-toggle="tooltip" title="@Localizer["Remove filter for team"]" style="display: none" tabindex="0">
+                <button type="button" id="team-filter-@r.RoundId" class="team-filter my-2 d-none" data-bs-toggle="tooltip" title="@Localizer["Remove filter for team"]" tabindex="0">
                     <i class="fas fa-1x fa-times-circle me-2"></i>
                     <span class="badge bg-dark"></span>
-                </div>
+                </button>
                 <div class="rounded table-responsive" style="min-height: 13rem">@* min height assures dropdowns are not clipped *@
                     <table class="table table-sm" aria-describedby="@tableDescriptionId">
                         <thead class="rounded">
@@ -117,7 +117,7 @@
                                                 </a>
                                                 <div class="dropdown-menu shadow-lg" role="menu">
                                                     <a href="#" tabindex="0" data-round-id="@match.RoundId" data-team-name="@match.HomeTeamNameForRound" class="dropdown-item filter-link">@Localizer["Filter fixtures for this team"]</a>
-                                                    <a href="#" tabindex="0" class="dropdown-item" onclick="this.href='@(TenantLink.Action(nameof(League.Controllers.Match.ReportSheet), nameof(League.Controllers.Match), new{ id = match.Id })!)';">@Localizer["Print match report sheet"]</a>
+                                                    <a asp-action="@nameof(League.Controllers.Match.ReportSheet)" asp-controller="@nameof(League.Controllers.Match)" asp-route-tenant="@tenantUrlSegment" asp-route-id=@match.Id tabindex="0" class="dropdown-item">@Localizer["Print match report sheet"]</a>
                                                     <a asp-action=@nameof(League.Controllers.Match.EditFixture) asp-controller=@nameof(League.Controllers.Match) asp-route-tenant="@tenantUrlSegment" asp-route-id=@match.Id tabindex="0" class="dropdown-item"
                                                        site-authorize-resource site-resource=@ToMatchEntity(match)
                                                        site-requirement=@League.Authorization.MatchOperations.ChangeFixture>@Localizer["Edit fixture"]</a>
@@ -133,7 +133,7 @@
                                                 </a>
                                                 <div class="dropdown-menu shadow-lg" role="menu">
                                                     <a href="#" tabindex="0" data-round-id="@match.RoundId" data-team-name="@match.GuestTeamNameForRound" class="dropdown-item filter-link">@Localizer["Filter fixtures for this team"]</a>
-                                                    <a href="#" tabindex="0" class="dropdown-item" onclick="this.href='@(TenantLink.Action(nameof(League.Controllers.Match.ReportSheet), nameof(League.Controllers.Match), new{ id = match.Id })!)';">@Localizer["Print match report sheet"]</a>
+                                                    <a asp-action="@nameof(League.Controllers.Match.ReportSheet)" asp-controller="@nameof(League.Controllers.Match)" asp-route-tenant="@tenantUrlSegment" asp-route-id=@match.Id tabindex="0" class="dropdown-item">@Localizer["Print match report sheet"]</a>
                                                     <a asp-action=@nameof(League.Controllers.Match.EditFixture) asp-controller=@nameof(League.Controllers.Match) asp-route-tenant="@tenantUrlSegment" asp-route-id=@match.Id tabindex="0" class="dropdown-item"
                                                        site-authorize-resource site-resource=@ToMatchEntity(match)
                                                        site-requirement=@League.Authorization.MatchOperations.ChangeFixture>@Localizer["Edit fixture"]</a>
@@ -179,6 +179,7 @@
         .team-filter { cursor: pointer;}
         .filter-link { /* javascript only */ }
         .leg-change { padding: 0; margin:0}
+        button[id^="team-filter-"] { background: none; border: 0; }
         @(venueCssClass)
         .venue > div {max-width: calc(45 * 1vw)}
         @(contextMenuCssClass)

diff --git a/League/Views/Match/Results.cshtml b/League/Views/Match/Results.cshtml
@@ -53,10 +53,10 @@
         {
             <div class="tab-pane@{if (r.RoundId == activeRoundId) {<text> show active</text>}}" id="tab-@(r.RoundId)" role="tabpanel">
                 <div class="text-success">@r.RoundTypeDescription</div>
-                <div id="team-filter-@r.RoundId" class="team-filter my-2 d-none" data-bs-toggle="tooltip" title="@Localizer["Remove filter for team"]" tabindex="0">
+                <button type="button" id="team-filter-@r.RoundId" class="team-filter my-2 d-none" data-bs-toggle="tooltip" title="@Localizer["Remove filter for team"]" tabindex="0">
                     <i class="fas fa-1x fa-times-circle me-2"></i>
                     <span class="badge bg-dark"></span>
-                </div>
+                </button>
                 <div class="rounded table-responsive" style="min-height: 13rem">@* min height assures dropdowns are not clipped *@
                     <table class="table table-sm" aria-describedby="@tableDescriptionId">
                         <thead class="rounded">
@@ -207,6 +207,7 @@
         .team-filter { cursor: pointer;}
         .filter-link { /* javascript only */ }
         .leg-change { padding: 0; margin:0}
+        button[id^="team-filter-"] { background: none; border: 0; }
         @(resultCssClass)
         @(contextMenuCssClass)
         @(dateCssClass)