Blazor templates Accessebility (#50785)

surayya-MS · web-flow · commit 51dc5735a0e5 · 2023-09-18T09:11:19.000-07:00
* fix "About" link dissapearing

* fix app name

* fix navmenu tab color contrast with background and text

* set user-scalable in meta tag

* fix text contrast of code tag against bootstrap alert-warning background
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/App.razor b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/App.razor
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
     @*#if (SampleContent)
     <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/MainLayout.razor.css b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/MainLayout.razor.css
@@ -38,11 +38,7 @@ main {
     }
 
 @media (max-width: 640.98px) {
-    .top-row:not(.auth) {
-        display: none;
-    }
-
-    .top-row.auth {
+    .top-row {
         justify-content: space-between;
     }
 
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/NavMenu.razor b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/NavMenu.razor
@@ -1,6 +1,6 @@
 ﻿<div class="top-row ps-3 navbar navbar-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">MyBlazorWeb</a>
+        <a class="navbar-brand" href="">BlazorWeb-CSharp</a>
     </div>
 </div>
 
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/NavMenu.razor.css b/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Layout/NavMenu.razor.css
@@ -69,7 +69,7 @@
     }
 
 .nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.25);
+    background-color: rgba(255,255,255,0.37);
     color: white;
 }
 
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Components/Layout/NavMenu.razor.css b/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/Components/Layout/NavMenu.razor.css
@@ -56,7 +56,7 @@
     }
 
 .nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.4);
+    background-color: rgba(255,255,255,0.37);
     color: white;
 }
 
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/wwwroot/css/app.css b/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/wwwroot/css/app.css
@@ -99,3 +99,7 @@ a, .btn-link {
     .loading-progress-text:after {
         content: var(--blazor-load-percentage-text, "Loading");
     }
+
+code {
+    color: #c02d76;
+}
diff --git a/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/wwwroot/index.html b/src/ProjectTemplates/Web.ProjectTemplates/content/ComponentsWebAssembly-CSharp/wwwroot/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ComponentsWebAssembly-CSharp</title>
     <base href="/" />
     <!--#if SampleContent -->

Original file line number	Diff line number	Diff line change
`@@ -38,11 +38,7 @@ main {`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`@media (max-width: 640.98px) {`
`41`		`- .top-row:not(.auth) {`
`42`		`- display: none;`
`43`		`- }`
`44`		`-`
`45`		`- .top-row.auth {`
	`41`	`+ .top-row {`
`46`	`42`	`justify-content: space-between;`
`47`	`43`	`}`
`48`	`44`
Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@`
`69`	`69`	`}`
`70`	`70`
`71`	`71`	`.nav-item ::deep a.active {`
`72`		`- background-color: rgba(255,255,255,0.25);`
	`72`	`+ background-color: rgba(255,255,255,0.37);`
`73`	`73`	`color: white;`
`74`	`74`	`}`
`75`	`75`
Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@`
`56`	`56`	`}`
`57`	`57`
`58`	`58`	`.nav-item ::deep a.active {`
`59`		`- background-color: rgba(255,255,255,0.4);`
	`59`	`+ background-color: rgba(255,255,255,0.37);`
`60`	`60`	`color: white;`
`61`	`61`	`}`
`62`	`62`
Original file line number	Diff line number	Diff line change
`@@ -99,3 +99,7 @@ a, .btn-link {`
`99`	`99`	`.loading-progress-text:after {`
`100`	`100`	`content: var(--blazor-load-percentage-text, "Loading");`
`101`	`101`	`}`
	`102`	`+`
	`103`	`+code {`
	`104`	`+ color: #c02d76;`
	`105`	`+}`