Blazor Web Template Accessibility (#51231)

# Blazor Web Template Accessibility

## Description

1. Make "Remember me" checkbox boarder darker

![darker-border-checkbox](https://github.com/dotnet/aspnetcore/assets/114938397/a5e99b3d-661e-4a18-9247-a3ce4ea3b7cf)

2. Show validation messages for Login page

![login-required-fields](https://github.com/dotnet/aspnetcore/assets/114938397/5205ebfc-11d9-468a-aa8e-3a5853c65ee4)

3. Add role="alert" to validation summaries in Login and Register pages so that narrator could announce the errors

4. Fix `aria-label` in QuickGrid

Fixes #51127
Fixes #51153
Fixes #51156

## Customer Impact

1. Low vision users will be able to see the checkbox control (color contrast ratio is more than 3:1)
2. Sighted users will have clear instructions that "Email" and "Password" fields are required.
3. Screen reader users will hear the narrator announcing the validation errors in Register and Login pages.
4. Screen reader users will hear the accessible names for buttons in QuickGrid.Paginator

## Regression?

- [ ] Yes
- [x] No

[If yes, specify the version the behavior has regressed from]

## Risk

- [ ] High
- [ ] Medium
- [x] Low

[Justify the selection above]

## Verification

- [x] Manual (required)
- [ ] Automated

## Packaging changes reviewed?

- [ ] Yes
- [ ] No
- [x] N/A

----

## When servicing release/2.1

- [ ] Make necessary changes in eng/PatchConfig.props

Author: surayya-MS

src/Components/QuickGrid/Microsoft.AspNetCore.Components.QuickGrid/src/Pagination/Paginator.razor

@@ -15,14 +15,14 @@
             }
         </div>
         <nav role="navigation">
-            <button class="go-first" type="button" @onclick="GoFirstAsync" disabled="@(!CanGoBack)" title="Go to first page" aria-title="Go to first page"></button>
-            <button class="go-previous" type="button" @onclick="GoPreviousAsync" disabled="@(!CanGoBack)" title="Go to previous page" aria-title="Go to previous page"></button>
+            <button class="go-first" type="button" @onclick="GoFirstAsync" disabled="@(!CanGoBack)" title="Go to first page" aria-label="Go to first page"></button>
+            <button class="go-previous" type="button" @onclick="GoPreviousAsync" disabled="@(!CanGoBack)" title="Go to previous page" aria-label="Go to previous page"></button>
             <div class="pagination-text">
                 Page <strong>@(State.CurrentPageIndex + 1)</strong>
                 of <strong>@(State.LastPageIndex + 1)</strong>
             </div>
-            <button class="go-next" type="button" @onclick="GoNextAsync" disabled="@(!CanGoForwards)" title="Go to next page" aria-title="Go to next page"></button>
-            <button class="go-last" type="button" @onclick="GoLastAsync" disabled="@(!CanGoForwards)" title="Go to last page" aria-title="Go to last page"></button>
+            <button class="go-next" type="button" @onclick="GoNextAsync" disabled="@(!CanGoForwards)" title="Go to next page" aria-label="Go to next page"></button>
+            <button class="go-last" type="button" @onclick="GoLastAsync" disabled="@(!CanGoForwards)" title="Go to last page" aria-label="Go to last page"></button>
         </nav>
     }
 </div>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Pages/Account/Login.razor

@@ -21,9 +21,10 @@
         <section>
             <StatusMessage Message="@errorMessage" />
             <EditForm id="account" Model="Input" method="post" OnValidSubmit="LoginUser" FormName="login">
+                <DataAnnotationsValidator />
                 <h2>Use a local account to log in.</h2>
                 <hr />
-                <ValidationSummary class="text-danger" />
+                <ValidationSummary class="text-danger" role="alert" />
                 <div class="form-floating mb-3">
                     <InputText id="email" @bind-Value="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="[email protected]" />
                     <label for="email" class="form-label">Email</label>
@@ -36,7 +37,7 @@
                 </div>
                 <div class="checkbox mb-3">
                     <label class="form-label">
-                        <InputCheckbox @bind-Value="Input.RememberMe" class="form-check-input" />
+                        <InputCheckbox @bind-Value="Input.RememberMe" class="darker-border-checkbox form-check-input" />
                         Remember me
                     </label>
                 </div>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Pages/Account/Register.razor

@@ -29,7 +29,7 @@
             <DataAnnotationsValidator />
             <h2>Create a new account.</h2>
             <hr />
-            <ValidationSummary class="text-danger" />
+            <ValidationSummary class="text-danger" role="alert" />
             <div class="form-floating mb-3">
                 <InputText id="email" @bind-Value="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="[email protected]" />
                 <label for="email">Email</label>

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/wwwroot/app.css

@@ -47,3 +47,7 @@ h1:focus {
     .blazor-error-boundary::after {
         content: "An error has occurred."
     }
+
+.darker-border-checkbox.form-check-input {
+    border-color: #929292;
+}