Merge pull request #10915 from aspnet/rybrande/BlazorAccessibility

Improve Blazor accessibility

src/ProjectTemplates/Web.ProjectTemplates/content/RazorComponentsWeb-CSharp/wwwroot/css/site.css

@@ -8,6 +8,12 @@ a {
     color: #0366d6;
 }
 
+.btn-primary {
+  color: #fff;
+  background-color: #1b6ec2;
+  border-color: #1861ac;
+}
+
 app {
     position: relative;
     display: flex;
@@ -24,66 +30,66 @@ app {
     flex: 1;
 }
 
-    .main .top-row {
+.main .top-row {
-        background-color: #e6e6e6;
+    background-color: #f7f7f7;
-        border-bottom: 1px solid #d6d5d5;
+    border-bottom: 1px solid #d6d5d5;
-        justify-content: flex-end;
+    justify-content: flex-end;
-    }
+}
 
-        .main .top-row > a {
+.main .top-row > a {
-            margin-left: 1.5rem;
+    margin-left: 1.5rem;
-        }
+}
 
 .sidebar {
     background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
 }
 
-    .sidebar .top-row {
+.sidebar .top-row {
-        background-color: rgba(0,0,0,0.4);
+    background-color: rgba(0,0,0,0.4);
-    }
+}
 
-    .sidebar .navbar-brand {
+.sidebar .navbar-brand {
-        font-size: 1.1rem;
+    font-size: 1.1rem;
-    }
+}
 
-    .sidebar .oi {
+.sidebar .oi {
-        width: 2rem;
+    width: 2rem;
-        font-size: 1.1rem;
+    font-size: 1.1rem;
-        vertical-align: text-top;
+    vertical-align: text-top;
-        top: -2px;
+    top: -2px;
-    }
+}
 
 .nav-item {
     font-size: 0.9rem;
     padding-bottom: 0.5rem;
 }
 
-    .nav-item:first-of-type {
+.nav-item:first-of-type {
-        padding-top: 1rem;
+    padding-top: 1rem;
-    }
+}
 
-    .nav-item:last-of-type {
+.nav-item:last-of-type {
-        padding-bottom: 1rem;
+    padding-bottom: 1rem;
-    }
+}
 
-    .nav-item a {
+.nav-item a {
-        color: #d7d7d7;
+    color: #d7d7d7;
-        border-radius: 4px;
+    border-radius: 4px;
-        height: 3rem;
+    height: 3rem;
-        display: flex;
+    display: flex;
-        align-items: center;
+    align-items: center;
-        line-height: 3rem;
+    line-height: 3rem;
-    }
+}
 
-        .nav-item a.active {
+.nav-item a.active {
-            background-color: rgba(255,255,255,0.25);
+    background-color: rgba(255,255,255,0.25);
-            color: white;
+    color: white;
-        }
+}
 
-        .nav-item a:hover {
+.nav-item a:hover {
-            background-color: rgba(255,255,255,0.1);
+    background-color: rgba(255,255,255,0.1);
-            color: white;
+    color: white;
-        }
+}
 
 .content {
     padding-top: 1.1rem;

src/ProjectTemplates/scripts/.gitignore

@@ -2,6 +2,7 @@ package-lock.json
 tmp/
 CustomHive/
 angular/
+blazorserverside/
 mvc/
 razor/
 react/

src/ProjectTemplates/scripts/Run-Blazor-Locally.ps1

@@ -0,0 +1,13 @@
+#!/usr/bin/env pwsh
+#requires -version 4
+
+# This script packages, installs and creates a template to help with rapid iteration in the templating area.
+[CmdletBinding(PositionalBinding = $false)]
+param()
+
+Set-StrictMode -Version 2
+$ErrorActionPreference = 'Stop'
+
+. $PSScriptRoot\Test-Template.ps1
+
+Test-Template "blazorserverside" "blazorserverside" "Microsoft.DotNet.Web.ProjectTemplates.3.0.3.0.0-dev.nupkg" $false