huahaofeng
/
aspnetcore
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve template Accessibility (#12891) 

Add aria-label to table to give title
This commit is contained in:
Ryan Brandenburg 2019-08-09 14:25:25 -07:00 committed by GitHub
parent 14f17fa7cd
commit afcfeaf0ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 74 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,6 @@
<p>This is a simple example of an Angular component.</p> <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> <button class="btn btn-primary" (click)="incrementCounter()">Increment</button>

4
src/ProjectTemplates/Web.Spa.ProjectTemplates/content/Angular-CSharp/ClientApp/src/app/fetch-data/fetch-data.component.html
View File

@ -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>This component demonstrates fetching data from the server.</p>
<p *ngIf="!forecasts"><em>Loading...</em></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> <thead>
<tr> <tr>
<th>Date</th> <th>Date</th>

2
src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/Counter.js
View File

@ -22,7 +22,7 @@ export class Counter extends Component {
<p>This is a simple example of a React component.</p> <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> <button className="btn btn-primary" onClick={this.incrementCounter}>Increment</button>
</div> </div>

4
src/ProjectTemplates/Web.Spa.ProjectTemplates/content/React-CSharp/ClientApp/src/components/FetchData.js
View File

@ -17,7 +17,7 @@ export class FetchData extends Component {
static renderForecastsTable(forecasts) { static renderForecastsTable(forecasts) {
return ( return (
<table className='table table-striped'> <table className='table table-striped' aria-labelledby="tabelLabel">
<thead> <thead>
<tr> <tr>
<th>Date</th> <th>Date</th>
@ -47,7 +47,7 @@ export class FetchData extends Component {
return ( return (
<div> <div>
<h1>Weather forecast</h1> <h1 id="tabelLabel" >Weather forecast</h1>
<p>This component demonstrates fetching data from the server.</p> <p>This component demonstrates fetching data from the server.</p>
{contents} {contents}
</div> </div>

2
src/ProjectTemplates/Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/Counter.tsx
View File

@ -17,7 +17,7 @@ class Counter extends React.PureComponent<CounterProps> {
<p>This is a simple example of a React component.</p> <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" <button type="button"
className="btn btn-primary btn-lg" className="btn btn-primary btn-lg"

4
src/ProjectTemplates/Web.Spa.ProjectTemplates/content/ReactRedux-CSharp/ClientApp/src/components/FetchData.tsx
View File

@ -26,7 +26,7 @@ class FetchData extends React.PureComponent<WeatherForecastProps> {
public render() { public render() {
return ( return (
<React.Fragment> <React.Fragment>
<h1>Weather forecast</h1> <h1 id="tabelLabel">Weather forecast</h1>
<p>This component demonstrates fetching data from the server and working with URL parameters.</p> <p>This component demonstrates fetching data from the server and working with URL parameters.</p>
{this.renderForecastsTable()} {this.renderForecastsTable()}
{this.renderPagination()} {this.renderPagination()}
@ -41,7 +41,7 @@ class FetchData extends React.PureComponent<WeatherForecastProps> {
private renderForecastsTable() { private renderForecastsTable() {
return ( return (
<table className='table table-striped'> <table className='table table-striped' aria-labelledby="tabelLabel">
<thead> <thead>
<tr> <tr>
<th>Date</th> <th>Date</th>