Improve template Accessibility (#12891)
Add aria-label to table to give title
This commit is contained in:
Ryan Brandenburg
GitHub
parent
14f17fa7cd
commit
afcfeaf0ac
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue