From afcfeaf0ac59f41570b40dd6938c5ba82a802528 Mon Sep 17 00:00:00 2001
From: Ryan Brandenburg <rybrande@microsoft.com>
Date: Fri, 9 Aug 2019 14:25:25 -0700
Subject: [PATCH] Improve template Accessibility (#12891)

Add aria-label to table to give title
---
 .../src/app/counter/counter.component.html    |   2 +-
 .../app/fetch-data/fetch-data.component.html  |   4 +-
 .../ClientApp/src/components/Counter.js       |   8 +-
 .../ClientApp/src/components/FetchData.js     |   4 +-
 .../ClientApp/src/components/Counter.tsx      |   6 +-
 .../ClientApp/src/components/FetchData.tsx    | 124 +++++++++---------
 6 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/counter/counter.component.html b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/counter/counter.component.html
index d37b212c4c..89b9c80ff8 100644
--- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/counter/counter.component.html
+++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/counter/counter.component.html
@@ -2,6 +2,6 @@
 
 <p>This is a simple example of an Angular component.</p>
 
-<p>Current count: <strong>{{ currentCount }}</strong></p>
+<p aria-live="polite">Current count: <strong>{{ currentCount }}</strong></p>
 
 <button class="btn btn-primary" (click)="incrementCounter()">Increment</button>
diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/fetch-data/fetch-data.component.html b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/fetch-data/fetch-data.component.html
index cd33b58a5c..19b3835dbf 100644
--- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/fetch-data/fetch-data.component.html
+++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/fetch-data/fetch-data.component.html
@@ -1,10 +1,10 @@
-<h1>Weather forecast</h1>
+<h1 id="tableLabel">Weather forecast</h1>
 
 <p>This component demonstrates fetching data from the server.</p>
 
 <p *ngIf="!forecasts"><em>Loading...</em></p>
 
-<table class='table table-striped' *ngIf="forecasts">
+<table class='table table-striped' aria-labelledby="tableLabel" *ngIf="forecasts">
   <thead>
     <tr>
       <th>Date</th>
diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/Counter.js b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/Counter.js
index 734887d18f..9a4ec746ba 100644
--- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/Counter.js
+++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/Counter.js
@@ -3,26 +3,26 @@ import React, { Component } from 'react';
 export class Counter extends Component {
   static displayName = Counter.name;
 
-  constructor (props) {
+  constructor(props) {
     super(props);
     this.state = { currentCount: 0 };
     this.incrementCounter = this.incrementCounter.bind(this);
   }
 
-  incrementCounter () {
+  incrementCounter() {
     this.setState({
       currentCount: this.state.currentCount + 1
     });
   }
 
-  render () {
+  render() {
     return (
       <div>
         <h1>Counter</h1>
 
         <p>This is a simple example of a React component.</p>
 
-        <p>Current count: <strong>{this.state.currentCount}</strong></p>
+        <p aria-live="polite">Current count: <strong>{this.state.currentCount}</strong></p>
 
         <button className="btn btn-primary" onClick={this.incrementCounter}>Increment</button>
       </div>
diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/FetchData.js b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/FetchData.js
index 4782540e3b..d1a9f910d0 100644
--- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/FetchData.js
+++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/FetchData.js
@@ -17,7 +17,7 @@ export class FetchData extends Component {
 
   static renderForecastsTable(forecasts) {
     return (
-      <table className='table table-striped'>
+      <table className='table table-striped' aria-labelledby="tabelLabel">
         <thead>
           <tr>
             <th>Date</th>
@@ -47,7 +47,7 @@ export class FetchData extends Component {
 
     return (
       <div>
-        <h1>Weather forecast</h1>
+        <h1 id="tabelLabel" >Weather forecast</h1>
         <p>This component demonstrates fetching data from the server.</p>
         {contents}
       </div>
diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/Counter.tsx b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/Counter.tsx
index a31720c44b..82fde952e6 100644
--- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/Counter.tsx
+++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/Counter.tsx
@@ -17,11 +17,11 @@ class Counter extends React.PureComponent<CounterProps> {
 
                 <p>This is a simple example of a React component.</p>
 
-                <p>Current count: <strong>{this.props.count}</strong></p>
+                <p aria-live="polite">Current count: <strong>{this.props.count}</strong></p>
 
                 <button type="button"
-                        className="btn btn-primary btn-lg"
-                        onClick={() => { this.props.increment(); }}>
+                    className="btn btn-primary btn-lg"
+                    onClick={() => { this.props.increment(); }}>
                     Increment
                 </button>
             </React.Fragment>
diff --git a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/FetchData.tsx b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/FetchData.tsx
index c177f0bc67..9fed830288 100644
--- a/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/FetchData.tsx
+++ b/src/ProjectTemplates/Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/FetchData.tsx
@@ -7,78 +7,78 @@ import * as WeatherForecastsStore from '../store/WeatherForecasts';
 
 // At runtime, Redux will merge together...
 type WeatherForecastProps =
-    WeatherForecastsStore.WeatherForecastsState // ... state we've requested from the Redux store
-    & typeof WeatherForecastsStore.actionCreators // ... plus action creators we've requested
-    & RouteComponentProps<{ startDateIndex: string }>; // ... plus incoming routing parameters
+  WeatherForecastsStore.WeatherForecastsState // ... state we've requested from the Redux store
+  & typeof WeatherForecastsStore.actionCreators // ... plus action creators we've requested
+  & RouteComponentProps<{ startDateIndex: string }>; // ... plus incoming routing parameters
 
 
 class FetchData extends React.PureComponent<WeatherForecastProps> {
-    // This method is called when the component is first added to the document
-    public componentDidMount() {
-        this.ensureDataFetched();
-    }
+  // This method is called when the component is first added to the document
+  public componentDidMount() {
+    this.ensureDataFetched();
+  }
 
-    // This method is called when the route parameters change
-    public componentDidUpdate() {
-        this.ensureDataFetched();
-    }
+  // This method is called when the route parameters change
+  public componentDidUpdate() {
+    this.ensureDataFetched();
+  }
 
-    public render() {
-        return (
-            <React.Fragment>
-                <h1>Weather forecast</h1>
-                <p>This component demonstrates fetching data from the server and working with URL parameters.</p>
-                { this.renderForecastsTable() }
-                { this.renderPagination() }
-            </React.Fragment>
-        );
-    }
+  public render() {
+    return (
+      <React.Fragment>
+        <h1 id="tabelLabel">Weather forecast</h1>
+        <p>This component demonstrates fetching data from the server and working with URL parameters.</p>
+        {this.renderForecastsTable()}
+        {this.renderPagination()}
+      </React.Fragment>
+    );
+  }
 
-    private ensureDataFetched() {
-        const startDateIndex = parseInt(this.props.match.params.startDateIndex, 10) || 0;
-        this.props.requestWeatherForecasts(startDateIndex);
-    }
+  private ensureDataFetched() {
+    const startDateIndex = parseInt(this.props.match.params.startDateIndex, 10) || 0;
+    this.props.requestWeatherForecasts(startDateIndex);
+  }
 
-    private renderForecastsTable() {
-        return (
-            <table className='table table-striped'>
-                <thead>
-                <tr>
-                    <th>Date</th>
-                    <th>Temp. (C)</th>
-                    <th>Temp. (F)</th>
-                    <th>Summary</th>
-                </tr>
-                </thead>
-                <tbody>
-                {this.props.forecasts.map((forecast: WeatherForecastsStore.WeatherForecast) =>
-                    <tr key={forecast.date}>
-                        <td>{forecast.date}</td>
-                        <td>{forecast.temperatureC}</td>
-                        <td>{forecast.temperatureF}</td>
-                        <td>{forecast.summary}</td>
-                    </tr>
-                )}
-                </tbody>
-            </table>
-        );
-    }
+  private renderForecastsTable() {
+    return (
+      <table className='table table-striped' aria-labelledby="tabelLabel">
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>Temp. (C)</th>
+            <th>Temp. (F)</th>
+            <th>Summary</th>
+          </tr>
+        </thead>
+        <tbody>
+          {this.props.forecasts.map((forecast: WeatherForecastsStore.WeatherForecast) =>
+            <tr key={forecast.date}>
+              <td>{forecast.date}</td>
+              <td>{forecast.temperatureC}</td>
+              <td>{forecast.temperatureF}</td>
+              <td>{forecast.summary}</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    );
+  }
 
-    private renderPagination() {
-        const prevStartDateIndex = (this.props.startDateIndex || 0) - 5;
-        const nextStartDateIndex = (this.props.startDateIndex || 0) + 5;
+  private renderPagination() {
+    const prevStartDateIndex = (this.props.startDateIndex || 0) - 5;
+    const nextStartDateIndex = (this.props.startDateIndex || 0) + 5;
 
-        return (
-            <div className="d-flex justify-content-between">
-                <Link className='btn btn-outline-secondary btn-sm' to={`/fetch-data/${prevStartDateIndex}`}>Previous</Link>
-                {this.props.isLoading && <span>Loading...</span>}
-                <Link className='btn btn-outline-secondary btn-sm' to={`/fetch-data/${nextStartDateIndex}`}>Next</Link>
-            </div>
-        );
-    }
+    return (
+      <div className="d-flex justify-content-between">
+        <Link className='btn btn-outline-secondary btn-sm' to={`/fetch-data/${prevStartDateIndex}`}>Previous</Link>
+        {this.props.isLoading && <span>Loading...</span>}
+        <Link className='btn btn-outline-secondary btn-sm' to={`/fetch-data/${nextStartDateIndex}`}>Next</Link>
+      </div>
+    );
+  }
 }
 
 export default connect(
-    (state: ApplicationState) => state.weatherForecasts, // Selects which state properties are merged into the component's props
-    WeatherForecastsStore.actionCreators // Selects which action creators are merged into the component's props
+  (state: ApplicationState) => state.weatherForecasts, // Selects which state properties are merged into the component's props
+  WeatherForecastsStore.actionCreators // Selects which action creators are merged into the component's props
 )(FetchData as any);