Accessibility fixes (#25678)

SteveSandersonMS · web-flow · commit ecc2ba16b8d2 · 2020-09-09T11:08:10.000-07:00
* 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
diff --git a/src/Identity/UI/src/Areas/Identity/Pages/V4/Account/Login.cshtml b/src/Identity/UI/src/Areas/Identity/Pages/V4/Account/Login.cshtml
@@ -57,8 +57,8 @@
                 {
                     <div>
                         <p>
-                            There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
-                            for details on setting up this ASP.NET application to support logging in via external services.
+                            There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article
+                            about setting up this ASP.NET application to support logging in via external services</a>.
                         </p>
                     </div>
                 }
diff --git a/src/Identity/UI/src/Areas/Identity/Pages/V4/Account/Register.cshtml b/src/Identity/UI/src/Areas/Identity/Pages/V4/Account/Register.cshtml
@@ -39,8 +39,8 @@
                 {
                     <div>
                         <p>
-                            There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
-                            for details on setting up this ASP.NET application to support logging in via external services.
+                            There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article
+                            about setting up this ASP.NET application to support logging in via external services</a>.
                         </p>
                     </div>
                 }
diff --git a/src/Identity/UI/src/wwwroot/V4/css/site.css b/src/Identity/UI/src/wwwroot/V4/css/site.css
@@ -24,6 +24,10 @@ a {
   border-color: #1861ac;
 }
 
+.btn-link.nav-link:focus {
+  outline: black auto 1px;
+}
+
 /* Sticky footer styles
 -------------------------------------------------- */
 html {
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Shared/MainLayout.razor.css b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Shared/MainLayout.razor.css
@@ -31,7 +31,7 @@
         text-overflow: ellipsis;
     }
 
-@media (max-width: 767.98px) {
+@media (max-width: 640.98px) {
     .top-row:not(.auth) {
         display: none;
     }
@@ -45,7 +45,7 @@
     }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 641px) {
     .page {
         flex-direction: row;
     }
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Shared/NavMenu.razor.css b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Shared/NavMenu.razor.css
@@ -50,7 +50,7 @@
     color: white;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 641px) {
     .navbar-toggler {
         display: none;
     }
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/Shared/MainLayout.razor.css b/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/Shared/MainLayout.razor.css
@@ -31,7 +31,7 @@
         text-overflow: ellipsis;
     }
 
-@media (max-width: 767.98px) {
+@media (max-width: 640.98px) {
     .top-row:not(.auth) {
         display: none;
     }
@@ -45,7 +45,7 @@
     }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 641px) {
     .page {
         flex-direction: row;
     }
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/Shared/NavMenu.razor.css b/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Client/Shared/NavMenu.razor.css
@@ -50,7 +50,7 @@
     color: white;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 641px) {
     .navbar-toggler {
         display: none;
     }
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/RazorPagesWeb-CSharp/Pages/Shared/_Layout.cshtml b/src/ProjectTemplates/Web.ProjectTemplates/content/RazorPagesWeb-CSharp/Pages/Shared/_Layout.cshtml
@@ -16,12 +16,7 @@
                         aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
-                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
-    @*#if (IndividualAuth || OrganizationalAuth)
-                    <partial name="_LoginPartial" />
-    #elseif (WindowsAuth)
-                    <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
-    #endif*@
+                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                     <ul class="navbar-nav flex-grow-1">
                         <li class="nav-item">
                             <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>
                         </li>
                     </ul>
+    @*#if (IndividualAuth || OrganizationalAuth)
+                    <partial name="_LoginPartial" />
+    #elseif (WindowsAuth)
+                    <p class="nav navbar-text">Hello, @User.Identity.Name!</p>
+    #endif*@
                 </div>
             </div>
         </nav>
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/StarterWeb-CSharp/Views/Shared/_Layout.cshtml b/src/ProjectTemplates/Web.ProjectTemplates/content/StarterWeb-CSharp/Views/Shared/_Layout.cshtml
@@ -16,12 +16,7 @@
                         aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
-                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
-    @*#if (IndividualAuth || OrganizationalAuth)
-                    <partial name="_LoginPartial" />
-    #elseif (WindowsAuth)
-                    <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
-    #endif*@
+                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                     <ul class="navbar-nav flex-grow-1">
                         <li class="nav-item">
                             <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>
                         </li>
                     </ul>
+    @*#if (IndividualAuth || OrganizationalAuth)
+                    <partial name="_LoginPartial" />
+    #elseif (WindowsAuth)
+                    <p class="nav navbar-text">Hello, @User.Identity.Name!</p>
+    #endif*@
                 </div>
             </div>
         </nav>
diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/nav-menu/nav-menu.component.html b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/nav-menu/nav-menu.component.html
@@ -16,12 +16,9 @@
         <span class="navbar-toggler-icon"></span>
       </button>
       <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 }"
       >
-        <!--#if (IndividualLocalAuth) -->
-        <app-login-menu></app-login-menu>
-        <!--#endif -->
         <ul class="navbar-nav flex-grow">
           <li
             class="nav-item"
@@ -41,6 +38,9 @@
             >
           </li>
         </ul>
+        <!--#if (IndividualLocalAuth) -->
+        <app-login-menu></app-login-menu>
+        <!--#endif -->
       </div>
     </div>
   </nav>
diff --git a/src/ProjectTemplates/test/MvcTemplateTest.cs b/src/ProjectTemplates/test/MvcTemplateTest.cs
@@ -142,10 +142,10 @@ public async Task MvcTemplate_IndividualAuth(bool useLocalDB)
                     Url = PageUrls.ForgotPassword,
                     Links = new string [] {
                         PageUrls.HomeUrl,
-                        PageUrls.RegisterUrl,
-                        PageUrls.LoginUrl,
                         PageUrls.HomeUrl,
                         PageUrls.PrivacyUrl,
+                        PageUrls.RegisterUrl,
+                        PageUrls.LoginUrl,
                         PageUrls.PrivacyUrl
                     }
                 },
@@ -154,10 +154,10 @@ public async Task MvcTemplate_IndividualAuth(bool useLocalDB)
                     Url = PageUrls.HomeUrl,
                     Links = new string[] {
                         PageUrls.HomeUrl,
-                        PageUrls.RegisterUrl,
-                        PageUrls.LoginUrl,
                         PageUrls.HomeUrl,
                         PageUrls.PrivacyUrl,
+                        PageUrls.RegisterUrl,
+                        PageUrls.LoginUrl,
                         PageUrls.DocsUrl,
                         PageUrls.PrivacyUrl
                     }
@@ -167,10 +167,10 @@ public async Task MvcTemplate_IndividualAuth(bool useLocalDB)
                     Url = PageUrls.PrivacyFullUrl,
                     Links = new string[] {
                         PageUrls.HomeUrl,
-                        PageUrls.RegisterUrl,
-                        PageUrls.LoginUrl,
                         PageUrls.HomeUrl,
                         PageUrls.PrivacyUrl,
+                        PageUrls.RegisterUrl,
+                        PageUrls.LoginUrl,
                         PageUrls.PrivacyUrl
                     }
                 },
@@ -179,10 +179,10 @@ public async Task MvcTemplate_IndividualAuth(bool useLocalDB)
                     Url = PageUrls.LoginUrl,
                     Links = new string[] {
                         PageUrls.HomeUrl,
-                        PageUrls.RegisterUrl,
-                        PageUrls.LoginUrl,
                         PageUrls.HomeUrl,
                         PageUrls.PrivacyUrl,
+                        PageUrls.RegisterUrl,
+                        PageUrls.LoginUrl,
                         PageUrls.ForgotPassword,
                         PageUrls.RegisterUrl,
                         PageUrls.ResendEmailConfirmation,
@@ -194,10 +194,10 @@ public async Task MvcTemplate_IndividualAuth(bool useLocalDB)
                     Url = PageUrls.RegisterUrl,
                     Links = new string [] {
                         PageUrls.HomeUrl,
-                        PageUrls.RegisterUrl,
-                        PageUrls.LoginUrl,
                         PageUrls.HomeUrl,
                         PageUrls.PrivacyUrl,
+                        PageUrls.RegisterUrl,
+                        PageUrls.LoginUrl,
                         PageUrls.ExternalArticle,
                         PageUrls.PrivacyUrl
                     }

Original file line number	Diff line number	Diff line change
`@@ -57,8 +57,8 @@`
`57`	`57`	`{`
`58`	`58`	`<div>`
`59`	`59`	`<p>`
`60`		`- There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>`
`61`		`- for details on setting up this ASP.NET application to support logging in via external services.`
	`60`	`+ There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article`
	`61`	`+ about setting up this ASP.NET application to support logging in via external services</a>.`
`62`	`62`	`</p>`
`63`	`63`	`</div>`
`64`	`64`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,8 +39,8 @@`
`39`	`39`	`{`
`40`	`40`	`<div>`
`41`	`41`	`<p>`
`42`		`- There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>`
`43`		`- for details on setting up this ASP.NET application to support logging in via external services.`
	`42`	`+ There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article`
	`43`	`+ about setting up this ASP.NET application to support logging in via external services</a>.`
`44`	`44`	`</p>`
`45`	`45`	`</div>`
`46`	`46`	`}`
Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@`
`31`	`31`	`text-overflow: ellipsis;`
`32`	`32`	`}`
`33`	`33`
`34`		`-@media (max-width: 767.98px) {`
	`34`	`+@media (max-width: 640.98px) {`
`35`	`35`	`.top-row:not(.auth) {`
`36`	`36`	`display: none;`
`37`	`37`	`}`
`@@ -45,7 +45,7 @@`
`45`	`45`	`}`
`46`	`46`	`}`
`47`	`47`
`48`		`-@media (min-width: 768px) {`
	`48`	`+@media (min-width: 641px) {`
`49`	`49`	`.page {`
`50`	`50`	`flex-direction: row;`
`51`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@`
`50`	`50`	`color: white;`
`51`	`51`	`}`
`52`	`52`
`53`		`-@media (min-width: 768px) {`
	`53`	`+@media (min-width: 641px) {`
`54`	`54`	`.navbar-toggler {`
`55`	`55`	`display: none;`
`56`	`56`	`}`