Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

docs(a11y-sweep): Apply baseline accessibility to the examples #1613

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs(a11y-sweep): Apply baseline accessibility to the examples #1613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions public/docs/_examples/toh-1/ts/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,14 @@ export class Hero {
template: `
<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<dl>
<dt>id:</dt>
<dd>{{hero.id}}</dd>
</dl>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name">
<label>name:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a project preference for nested inputs vs. for/id-based association?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No specific preference yet but I would prefer implicit labelling where possible as it removes the need to generate/bind unique IDs to controls in components. Although both options lead to valid accessible form controls.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that makes sense, but I'd maybe like to see both techniques demonstrated at some point, simply because the explicit/non-nested labelling is pretty popular and also much easier to mess up.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fully agree, but don't think this is the place. I'm also working on an a11y cookbook that should see the light in the near future. That has a whole section on labelling, including the explicit labelling version. Here, however, the purpose is to get folks started with Angular2 so I think adding the extra stuff to generate the IDs right off the bat will distract from what the TOH docs are all about.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, I looked through the a11y cookbook PR a while back. Good stuff! Is it worth commenting on that PR now or are you making big changes?

I guess my concern with the implicit labelling is just that devs who're accustomed to doing explicit labelling incorrectly might learn something from seeing it done correctly here, whereas devs who are accustomed to doing implicit labelling are probably already doing it correctly. But I may be over-thinking it, and this is definitely an improvement in any case.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nah that one is outdated. Did that, then life happened, with some changes and edits. I just created a new one at #1625

Agree to a certain extent but what we don't want are devs copying and pasting it from TOH because they think that is what is needed to make Angular work

I think most devs looking here will be mostly concerned with getting their first app off the ground and we should not confuse them with extra code. So in the TOH examples I think we should look at the big wins that require little to no extra code. The rest will come later.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I think as long as it's accessible in some manner I'm OK. I can appreciate not wanting to confuse people but I also think it's important to position accessibility as a first-class concern and embed it throughout the documentation.

Copy link
Contributor Author

@AlmeroSteyn AlmeroSteyn Jun 8, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There I fully agree with you. This exercise is exactly about giving a11y that position but to find the balance where the lessons of the separate docs are not diluted. Stuff not added to to the examples due to complexity could eventually be added as comments/notes in the examples or docs.

<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>
`
})
Expand Down
8 changes: 8 additions & 0 deletions public/docs/_examples/toh-1/ts/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
body{
color: #5E5E5E;
}

dt {
float: left;
clear: left;
}
3 changes: 2 additions & 1 deletion public/docs/_examples/toh-1/ts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<!DOCTYPE html>
<html>
<html lang="en-US">
<head>
<title>Angular 2 Tour of Heroes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="demo.css">

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
Expand Down
38 changes: 24 additions & 14 deletions public/docs/_examples/toh-2/ts/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,25 +28,33 @@ const HEROES: Hero[] = [
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
role="button"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
[attr.aria-pressed]="hero === selectedHero"
(click)="onSelect(hero)"
(keydown.enter)="onSelect(hero)"
tabindex="0">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
<h3>{{selectedHero.name}} details!</h3>
<dl>
<dt>id:</dt>
<dd>{{selectedHero.id}}</dd>
</dl>
<div>
<label>name:
<input [(ngModel)]="selectedHero.name" placeholder="name">
</label>
</div>
</div>
`,
// #docregion styles
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
color: black;
}
.heroes {
margin: 0 0 2em 0;
Expand All @@ -64,13 +72,15 @@ const HEROES: Hero[] = [
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
.heroes li.selected:hover,
.heroes li.selected:focus{
background-color: #BBD8DC !important;
color: white;
color: black;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
.heroes li:hover,
.heroes li:focus{
color: white;
background-color: #6469dd;
left: .1em;
}
.heroes .text {
Expand All @@ -82,7 +92,7 @@ const HEROES: Hero[] = [
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
background-color: #4E6570;
line-height: 1em;
position: relative;
left: -1px;
Expand Down
8 changes: 8 additions & 0 deletions public/docs/_examples/toh-2/ts/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
body{
color: #5E5E5E;
}

dt {
float: left;
clear: left;
}
3 changes: 2 additions & 1 deletion public/docs/_examples/toh-2/ts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<!DOCTYPE html>
<html>
<html lang="en-US">
<head>
<title>Angular 2 Tour of Heros</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="demo.css">

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
Expand Down
22 changes: 14 additions & 8 deletions public/docs/_examples/toh-3/ts/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,12 @@ const HEROES: Hero[] = [
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
role="button"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
[attr.aria-pressed]="hero === selectedHero"
(click)="onSelect(hero)"
(keydown.enter)="onSelect(hero)"
tabindex="0">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
Expand All @@ -40,7 +44,7 @@ const HEROES: Hero[] = [
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
color: black;
}
.heroes {
margin: 0 0 2em 0;
Expand All @@ -58,13 +62,15 @@ const HEROES: Hero[] = [
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
.heroes li.selected:hover,
.heroes li.selected:focus{
background-color: #BBD8DC !important;
color: white;
color: black;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
.heroes li:hover,
.heroes li:focus{
color: white;
background-color: #6469dd;
left: .1em;
}
.heroes .text {
Expand All @@ -76,7 +82,7 @@ const HEROES: Hero[] = [
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
background-color: #4E6570;
line-height: 1em;
position: relative;
left: -1px;
Expand Down
12 changes: 8 additions & 4 deletions public/docs/_examples/toh-3/ts/app/hero-detail.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,15 @@ import { Hero } from './hero';
// #docregion template
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<h3>{{hero.name}} details!</h3>
<dl>
<dt>id:</dt>
<dd>{{hero.id}}</dd>
</dl>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>
</div>
`
Expand Down
8 changes: 8 additions & 0 deletions public/docs/_examples/toh-3/ts/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
body{
color: #5E5E5E;
}

dt {
float: left;
clear: left;
}
3 changes: 2 additions & 1 deletion public/docs/_examples/toh-3/ts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<!DOCTYPE html>
<html>
<html lang="en-US">
<head>
<title>Angular 2 Tour of Heroes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="demo.css">

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
Expand Down
22 changes: 14 additions & 8 deletions public/docs/_examples/toh-4/ts/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,12 @@ import { HeroService } from './hero.service';
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes"
role="button"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
[attr.aria-pressed]="hero === selectedHero"
(click)="onSelect(hero)"
(keydown.enter)="onSelect(hero)"
tabindex="0">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
Expand All @@ -27,7 +31,7 @@ import { HeroService } from './hero.service';
styles: [`
.selected {
background-color: #CFD8DC !important;
color: white;
color: black;
}
.heroes {
margin: 0 0 2em 0;
Expand All @@ -45,13 +49,15 @@ import { HeroService } from './hero.service';
height: 1.6em;
border-radius: 4px;
}
.heroes li.selected:hover {
.heroes li.selected:hover,
.heroes li.selected:focus{
background-color: #BBD8DC !important;
color: white;
color: black;
}
.heroes li:hover {
color: #607D8B;
background-color: #DDD;
.heroes li:hover,
.heroes li:focus{
color: white;
background-color: #6469dd;
left: .1em;
}
.heroes .text {
Expand All @@ -63,7 +69,7 @@ import { HeroService } from './hero.service';
font-size: small;
color: white;
padding: 0.8em 0.7em 0 0.7em;
background-color: #607D8B;
background-color: #4E6570;
line-height: 1em;
position: relative;
left: -1px;
Expand Down
14 changes: 8 additions & 6 deletions public/docs/_examples/toh-4/ts/app/hero-detail.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@ import { Hero } from './hero';
selector: 'my-hero-detail',
template: `
<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<h3>{{hero.name}} details!</h3>
<dl>
<dt>id:</dt>
<dd>{{hero.id}}</dd>
</dl>
<div>
<label>id: </label>{{hero.id}}
</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name"/>
<label>name:
<input [(ngModel)]="hero.name" placeholder="name">
</label>
</div>
</div>
`
Expand Down
8 changes: 8 additions & 0 deletions public/docs/_examples/toh-4/ts/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
body{
color: #5E5E5E;
}

dt {
float: left;
clear: left;
}
3 changes: 2 additions & 1 deletion public/docs/_examples/toh-4/ts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
<!DOCTYPE html>
<html>
<html lang="en-US">
<head>
<title>Angular 2 Tour of Heroes</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="demo.css">

<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
Expand Down
13 changes: 7 additions & 6 deletions public/docs/_examples/toh-5/ts/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* #docregion */
h1 {
font-size: 1.2em;
color: #999;
color: #747474;
margin-bottom: 0;
}
h2 {
Expand All @@ -18,12 +18,13 @@ nav a {
border-radius: 4px;
}
nav a:visited, a:link {
color: #607D8B;
}
nav a:hover {
color: #039be5;
background-color: #CFD8DC;
color: #44667d;
}
nav a.active {
color: #039be5;
}
nav a:hover,
nav a:focus {
color: #23338c;
background-color: #CFD8DC;
}
15 changes: 11 additions & 4 deletions public/docs/_examples/toh-5/ts/app/dashboard.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,23 @@ h3 {
color: #eee;
max-height: 120px;
min-width: 120px;
background-color: #607D8B;
background-color: #4E6570;
border-radius: 2px;
}
h4 {
.hero{
display: block;
position: relative;
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
.module:hover {
.module:hover,
.module:focus {
background-color: #EEE;
cursor: pointer;
color: #607d8b;
color: #4b626d;
}
.grid-pad {
padding: 10px 0;
Expand Down
11 changes: 5 additions & 6 deletions public/docs/_examples/toh-5/ts/app/dashboard.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
<!-- #docregion -->
<h3>Top Heroes</h3>
<h2>Top Heroes</h2>
<div class="grid grid-pad">
<!-- #docregion click -->
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
<!-- #enddocregion click -->
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>
<div *ngFor="let hero of heroes"
class="col-1-4">
<a class="module hero" [routerLink]="['/detail', hero.id]">{{hero.name}}</a>
</div>
<!-- #enddocregion click -->
</div>
Loading