Improve template Accessibility (#12891)

Add aria-label to table to give title

Author: ryanbrandenburg

src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/counter/counter.component.html

@@ -2,6 +2,6 @@ <h1>Counter</h1>
 
 <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>

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>

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>

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>

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>

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);