skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

a11y(checkbox): Add checkbox accessibility demo page (#5921)

Browse Source 
* use real world examples for checkbox

* Checkbox a11y demo

* remove pseudo checkbox

* address comments
This commit is contained in:
tinayuangao
2017-07-31 11:10:37 -07:00
committed by GitHub
parent 42554763c8
commit 1570fbbe5c
5 changed files with 113 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/demo-app/a11y/a11y-module.ts
+2
View File
@@ -26,6 +26,8 @@ export class AccessibilityRoutingModule {}
ReactiveFormsModule,
AccessibilityRoutingModule,
DemoMaterialModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [
AccessibilityDemo,
src/demo-app/a11y/button/button-a11y.html
+28 -30
View File
@@ -1,31 +1,29 @@
<div class="demo-button">
<section>
<h2>Button elements</h2>
<button md-button>Check</button>
<button md-raised-button>raised</button>
<button md-fab aria-label="Activate floating action style button">
<md-icon class="md-24">check</md-icon>
</button>
<button md-mini-fab aria-label="Activate mini floating action style button">
<md-icon class="md-24">check</md-icon>
</button>
<button md-icon-button aria-label="Activate icon style button">
<md-icon class="md-24">check</md-icon>
</button>
</section>
<section>
<h2>Button elements</h2>
<button md-button>check</button>
<button md-raised-button>raised</button>
<button md-fab aria-label="Activate floating action style button">
<md-icon class="md-24">check</md-icon>
</button>
<button md-mini-fab aria-label="Activate mini floating action style button">
<md-icon class="md-24">check</md-icon>
</button>
<button md-icon-button aria-label="Activate icon style button">
<md-icon class="md-24">check</md-icon>
</button>
</section>
<section>
<h2>Anchor elements</h2>
<a href="http://www.google.com" md-button color="primary">Google search</a>
<a href="http://www.google.com" md-raised-button>Google search</a>
<a href="http://www.google.com" md-fab aria-label="Activate floating action style link">
<md-icon class="md-24">check</md-icon>
</a>
<a href="http://www.google.com" md-mini-fab aria-label="Activate mini floating action style link">
<md-icon class="md-24">check</md-icon>
</a>
<a md-icon-button aria-label="Activate icon style link">
<md-icon class="md-24">check</md-icon>
</a>
</section>
</div>
<section>
<h2>Anchor elements</h2>
<a href="http://www.google.com" md-button color="primary">Google search</a>
<a href="http://www.google.com" md-raised-button>Google search</a>
<a href="http://www.google.com" md-fab aria-label="Activate floating action style link">
<md-icon class="md-24">check</md-icon>
</a>
<a href="http://www.google.com" md-mini-fab aria-label="Activate mini floating action style link">
<md-icon class="md-24">check</md-icon>
</a>
<a md-icon-button aria-label="Activate icon style link">
<md-icon class="md-24">check</md-icon>
</a>
</section>
src/demo-app/a11y/checkbox/checkbox-a11y.html
+35 -1
View File
@@ -1 +1,35 @@
Checkbox Placeholder
<section>
<h2>Checkbox without label</h2>
<md-checkbox aria-label="A single checkbox with no label example"></md-checkbox>
</section>
<section>
<h2>Standalone checkbox</h2>
<div>
<md-checkbox>Yes, I agree to the terms and conditions</md-checkbox>
</div>
<div>
<md-checkbox [disabled]="true">No, I do not agree to the terms and conditions</md-checkbox>
</div>
<div>
<md-checkbox [indeterminate]="true">A partially done task</md-checkbox>
</div>
</section>
<section>
<h2>Nested checklist</h2>
<div *ngFor="let task of tasks">
<md-checkbox [(ngModel)]="task.completed"
[checked]="allComplete(task)"
[indeterminate]="someComplete(task.subtasks)"
(change)="setAllCompleted(task.subtasks, $event.checked)">
{{task.name}}
</md-checkbox>
<div class="sub-list">
<div *ngFor="let subtask of task.subtasks">
<md-checkbox [(ngModel)]="subtask.completed">
{{subtask.name}}
</md-checkbox>
</div>
</div>
</div>
</section>
src/demo-app/a11y/checkbox/checkbox-a11y.scss
+3
View File
@@ -0,0 +1,3 @@
.sub-list {
margin-left: 20px;
}
src/demo-app/a11y/checkbox/checkbox-a11y.ts
+45 -1
View File
@@ -1,5 +1,10 @@
import {Component} from '@angular/core';
export interface Task {
name: string;
completed: boolean;
subtasks?: Task[];
}
@Component({
moduleId: module.id,
@@ -8,5 +13,44 @@ import {Component} from '@angular/core';
styleUrls: ['checkbox-a11y.css'],
})
export class CheckboxAccessibilityDemo {
// TODO(tinayuangao): Add use cases
tasks: Task[] = [
{
name: 'Reminders',
completed: false,
subtasks: [
{ name: 'Cook Dinner', completed: false },
{ name: 'Read the Material Design Spec', completed: false },
{ name: 'Upgrade Application to Angular', completed: false }
]
},
{
name: 'Groceries',
completed: false,
subtasks: [
{ name: 'Organic Eggs', completed: false },
{ name: 'Protein Powder', completed: false },
{ name: 'Almond Meal Flour', completed: false }
]
}
];
allComplete(task: Task): boolean {
let subtasks = task.subtasks;
if (!subtasks) {
return false;
}
return subtasks.every(t => t.completed);
}
someComplete(tasks: Task[]): boolean {
const numComplete = tasks.filter(t => t.completed).length;
return numComplete > 0 && numComplete < tasks.length;
}
setAllCompleted(tasks: Task[], completed: boolean) {
tasks.forEach(t => t.completed = completed);
}
}