Accessibility fixes (#25678)

* Fix header tab ordering issues. Fixes 1163117

* Ensure text can be zoomed to 200% without switching to mobile layout. Fixes 1163184.

* Ensure "Log out" link can show focus state. Fixes 1162890

* Use screen reader-friendly link text. Fixes 1163642

* Update template test
This commit is contained in:
Steve Sanderson 2020-09-09 19:08:10 +01:00 committed by GitHub
parent 0d548f302b
commit ecc2ba16b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 40 additions and 36 deletions

View File

@ -57,8 +57,8 @@
{ {
<div> <div>
<p> <p>
There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a> There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article
for details on setting up this ASP.NET application to support logging in via external services. about setting up this ASP.NET application to support logging in via external services</a>.
</p> </p>
</div> </div>
} }

View File

@ -39,8 +39,8 @@
{ {
<div> <div>
<p> <p>
There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a> There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article
for details on setting up this ASP.NET application to support logging in via external services. about setting up this ASP.NET application to support logging in via external services</a>.
</p> </p>
</div> </div>
} }

View File

@ -24,6 +24,10 @@ a {
border-color: #1861ac; border-color: #1861ac;
} }
.btn-link.nav-link:focus {
outline: black auto 1px;
}
/* Sticky footer styles /* Sticky footer styles
-------------------------------------------------- */ -------------------------------------------------- */
html { html {

View File

@ -31,7 +31,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@media (max-width: 767.98px) { @media (max-width: 640.98px) {
.top-row:not(.auth) { .top-row:not(.auth) {
display: none; display: none;
} }
@ -45,7 +45,7 @@
} }
} }
@media (min-width: 768px) { @media (min-width: 641px) {
.page { .page {
flex-direction: row; flex-direction: row;
} }

View File

@ -50,7 +50,7 @@
color: white; color: white;
} }
@media (min-width: 768px) { @media (min-width: 641px) {
.navbar-toggler { .navbar-toggler {
display: none; display: none;
} }

View File

@ -31,7 +31,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@media (max-width: 767.98px) { @media (max-width: 640.98px) {
.top-row:not(.auth) { .top-row:not(.auth) {
display: none; display: none;
} }
@ -45,7 +45,7 @@
} }
} }
@media (min-width: 768px) { @media (min-width: 641px) {
.page { .page {
flex-direction: row; flex-direction: row;
} }

View File

@ -50,7 +50,7 @@
color: white; color: white;
} }
@media (min-width: 768px) { @media (min-width: 641px) {
.navbar-toggler { .navbar-toggler {
display: none; display: none;
} }

View File

@ -16,12 +16,7 @@
aria-expanded="false" aria-label="Toggle navigation"> aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
@*#if (IndividualAuth || OrganizationalAuth)
<partial name="_LoginPartial" />
#elseif (WindowsAuth)
<p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
#endif*@
<ul class="navbar-nav flex-grow-1"> <ul class="navbar-nav flex-grow-1">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a> <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
@ -30,6 +25,11 @@
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a> <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li> </li>
</ul> </ul>
@*#if (IndividualAuth || OrganizationalAuth)
<partial name="_LoginPartial" />
#elseif (WindowsAuth)
<p class="nav navbar-text">Hello, @User.Identity.Name!</p>
#endif*@
</div> </div>
</div> </div>
</nav> </nav>

View File

@ -16,12 +16,7 @@
aria-expanded="false" aria-label="Toggle navigation"> aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
@*#if (IndividualAuth || OrganizationalAuth)
<partial name="_LoginPartial" />
#elseif (WindowsAuth)
<p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
#endif*@
<ul class="navbar-nav flex-grow-1"> <ul class="navbar-nav flex-grow-1">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
@ -30,6 +25,11 @@
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li> </li>
</ul> </ul>
@*#if (IndividualAuth || OrganizationalAuth)
<partial name="_LoginPartial" />
#elseif (WindowsAuth)
<p class="nav navbar-text">Hello, @User.Identity.Name!</p>
#endif*@
</div> </div>
</div> </div>
</nav> </nav>

View File

@ -16,12 +16,9 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div <div
class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse" class="navbar-collapse collapse d-sm-inline-flex justify-content-end"
[ngClass]="{ show: isExpanded }" [ngClass]="{ show: isExpanded }"
> >
<!--#if (IndividualLocalAuth) -->
<app-login-menu></app-login-menu>
<!--#endif -->
<ul class="navbar-nav flex-grow"> <ul class="navbar-nav flex-grow">
<li <li
class="nav-item" class="nav-item"
@ -41,6 +38,9 @@
> >
</li> </li>
</ul> </ul>
<!--#if (IndividualLocalAuth) -->
<app-login-menu></app-login-menu>
<!--#endif -->
</div> </div>
</div> </div>
</nav> </nav>

View File

@ -142,10 +142,10 @@ namespace Templates.Test
Url = PageUrls.ForgotPassword, Url = PageUrls.ForgotPassword,
Links = new string [] { Links = new string [] {
PageUrls.HomeUrl, PageUrls.HomeUrl,
PageUrls.RegisterUrl,
PageUrls.LoginUrl,
PageUrls.HomeUrl, PageUrls.HomeUrl,
PageUrls.PrivacyUrl, PageUrls.PrivacyUrl,
PageUrls.RegisterUrl,
PageUrls.LoginUrl,
PageUrls.PrivacyUrl PageUrls.PrivacyUrl
} }
}, },
@ -154,10 +154,10 @@ namespace Templates.Test
Url = PageUrls.HomeUrl, Url = PageUrls.HomeUrl,
Links = new string[] { Links = new string[] {
PageUrls.HomeUrl, PageUrls.HomeUrl,
PageUrls.RegisterUrl,
PageUrls.LoginUrl,
PageUrls.HomeUrl, PageUrls.HomeUrl,
PageUrls.PrivacyUrl, PageUrls.PrivacyUrl,
PageUrls.RegisterUrl,
PageUrls.LoginUrl,
PageUrls.DocsUrl, PageUrls.DocsUrl,
PageUrls.PrivacyUrl PageUrls.PrivacyUrl
} }
@ -167,10 +167,10 @@ namespace Templates.Test
Url = PageUrls.PrivacyFullUrl, Url = PageUrls.PrivacyFullUrl,
Links = new string[] { Links = new string[] {
PageUrls.HomeUrl, PageUrls.HomeUrl,
PageUrls.RegisterUrl,
PageUrls.LoginUrl,
PageUrls.HomeUrl, PageUrls.HomeUrl,
PageUrls.PrivacyUrl, PageUrls.PrivacyUrl,
PageUrls.RegisterUrl,
PageUrls.LoginUrl,
PageUrls.PrivacyUrl PageUrls.PrivacyUrl
} }
}, },
@ -179,10 +179,10 @@ namespace Templates.Test
Url = PageUrls.LoginUrl, Url = PageUrls.LoginUrl,
Links = new string[] { Links = new string[] {
PageUrls.HomeUrl, PageUrls.HomeUrl,
PageUrls.RegisterUrl,
PageUrls.LoginUrl,
PageUrls.HomeUrl, PageUrls.HomeUrl,
PageUrls.PrivacyUrl, PageUrls.PrivacyUrl,
PageUrls.RegisterUrl,
PageUrls.LoginUrl,
PageUrls.ForgotPassword, PageUrls.ForgotPassword,
PageUrls.RegisterUrl, PageUrls.RegisterUrl,
PageUrls.ResendEmailConfirmation, PageUrls.ResendEmailConfirmation,
@ -194,10 +194,10 @@ namespace Templates.Test
Url = PageUrls.RegisterUrl, Url = PageUrls.RegisterUrl,
Links = new string [] { Links = new string [] {
PageUrls.HomeUrl, PageUrls.HomeUrl,
PageUrls.RegisterUrl,
PageUrls.LoginUrl,
PageUrls.HomeUrl, PageUrls.HomeUrl,
PageUrls.PrivacyUrl, PageUrls.PrivacyUrl,
PageUrls.RegisterUrl,
PageUrls.LoginUrl,
PageUrls.ExternalArticle, PageUrls.ExternalArticle,
PageUrls.PrivacyUrl PageUrls.PrivacyUrl
} }