javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(aria): aria label/id updates

Browse Source
This commit is contained in:
Adam Bradley
2015-12-14 21:34:40 -06:00
parent 2a32711857
commit 7c8c56ee3e
7 changed files with 72 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
ionic/components/checkbox/checkbox.ts
View File

@@ -33,6 +33,7 @@ import {Form} from '../../util/form';
host: {
'role': 'checkbox',
'tappable': 'true',
'[attr.id]': 'id',
'[attr.tab-index]': 'tabIndex',
'[attr.aria-checked]': 'checked',
'[attr.aria-disabled]': 'disabled',
@@ -53,7 +54,7 @@ import {Form} from '../../util/form';
export class Checkbox {
constructor(
form: Form,
private form: Form,
@Optional() ngControl: NgControl,
elementRef: ElementRef
) {
@@ -72,7 +73,11 @@ export class Checkbox {
* @private
*/
ngOnInit() {
this.labelId = 'label-' + this.inputId;
if (!this.id) {
this.id = 'chk-' + this.form.nextId();
}
this.labelId = 'lbl-' + this.id;
}
/**

22
ionic/components/radio/radio.ts
View File

@@ -4,6 +4,7 @@ import {NgControl} from 'angular2/common';
import {Config} from '../../config/config';
import {Ion} from '../ion';
import {ListHeader} from '../list/list';
import {Form} from '../../util/form';
/**
@@ -200,7 +201,8 @@ export class RadioButton extends Ion {
constructor(
@Host() @Optional() group: RadioGroup,
elementRef: ElementRef,
config: Config
config: Config,
private form: Form
) {
super(elementRef, config);
@@ -213,16 +215,24 @@ export class RadioButton extends Ion {
*/
ngOnInit() {
super.ngOnInit();
this.group.registerRadio(this);
this.labelId = 'label-' + this.id;
if (!this.id) {
this.id = 'rb-' + this.form.nextId();
}
this.labelId = 'lbl-' + this.id;
if (this.group) {
this.group.registerRadio(this);
} else {
console.error('<ion-radio> must be within a <ion-list radio-group>');
}
}
/**
* @private
*/
click(event) {
event.preventDefault();
event.stopPropagation();
click(ev) {
ev.preventDefault();
ev.stopPropagation();
this.check();
}

17
ionic/components/text-input/label.ts
View File

@@ -3,6 +3,9 @@ import {Directive, Optional, ElementRef, Renderer} from 'angular2/core';
import {Config} from '../../config/config';
import {TextInput} from './text-input';
import {pointerCoord, hasPointerMoved} from '../../util/dom';
import {Form} from '../../util/form';
/**
* @name Label
* @description
@@ -38,15 +41,19 @@ export class Label {
constructor(
config: Config,
@Optional() container: TextInput,
private form: Form,
private elementRef: ElementRef,
private renderer: Renderer
) {
this.scrollAssist = config.get('scrollAssist');
if (!this.id) {
this.id = 'lbl-' + (++labelIds);
}
this.container = container;
container && container.registerLabel(this);
}
ngOnInit() {
if (!this.id) {
this.id = 'lbl-' + this.form.nextId();
}
this.container && this.container.registerLabel(this);
}
/**
@@ -87,5 +94,3 @@ export class Label {
}
}
let labelIds = -1;

104
ionic/components/text-input/test/input-focus/main.html
View File

@@ -65,12 +65,20 @@
<textarea placeholder="Placeholder Text"></textarea>
</ion-input>
<ion-toggle>
Toggle
</ion-toggle>
<ion-input>
<ion-label>More Info:</ion-label>
<input placeholder="Placeholder Text" type="text">
<icon flag item-right></icon>
</ion-input>
<ion-checkbox>
Checkbox
</ion-checkbox>
<ion-input>
<ion-label>Score:</ion-label>
<input value="10" type="number">
@@ -100,95 +108,21 @@
Item
</ion-item>
</ion-list>
<!--
<ion-item>
Item
</ion-item>
<ion-list radio-group>
<ion-item>
Item
</ion-item>
<ion-list-header>
Radios
</ion-list-header>
<ion-item>
Item
</ion-item>
<ion-radio>
Radio 1
</ion-radio>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item> -->
<ion-radio>
Radio 2
</ion-radio>
</ion-list>

2
ionic/components/text-input/text-input.ts
View File

@@ -133,7 +133,7 @@ export class TextInput {
/**
* @private
*/
ngOnInit() {
ngAfterViewInit() {
if (this.input && this.label) {
// if there is an input and an label
// then give the label an ID

14
ionic/components/toggle/toggle.ts
View File

@@ -82,6 +82,7 @@ class MediaToggle {
host: {
'role': 'checkbox',
'tappable': 'true',
'[attr.id]': 'id',
'[attr.tab-index]': 'tabIndex',
'[attr.aria-checked]': 'checked',
'[attr.aria-disabled]': 'disabled',
@@ -169,7 +170,11 @@ export class Toggle {
* @private
*/
ngOnInit() {
this.labelId = 'label-' + this.inputId;
if (!this.id) {
this.id = 'tgl-' + this.form.nextId();
}
this.labelId = 'lbl-' + this.id;
}
/**
@@ -260,4 +265,11 @@ export class Toggle {
isDisabled(ev) {
return (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) || (this.mode == 'ios' && ev.target.tagName == 'ION-TOGGLE');
}
/**
* @private
*/
initFocus() {
}
}

5
ionic/util/form.ts
View File

@@ -17,6 +17,7 @@ export class Form {
constructor() {
this._inputs = [];
this._ids = -1;
this._focused = null;
this.focusCtrl(document);
@@ -80,4 +81,8 @@ export class Form {
}
}
nextId() {
return ++this._ids;
}
}