javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(actionsheet): add aria labels to actionsheet

Browse Source
This commit is contained in:
Adam Bradley
2016-03-05 20:51:38 -06:00
parent e639457654
commit ecfecc9bcb
1 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
ionic/components/action-sheet/action-sheet.ts
View File

@ -164,8 +164,8 @@ export class ActionSheet extends ViewController {
'<div class="action-sheet-wrapper">' + '<div class="action-sheet-wrapper">' +
'<div class="action-sheet-container">' + '<div class="action-sheet-container">' +
'<div class="action-sheet-group">' + '<div class="action-sheet-group">' +
'<div class="action-sheet-title" *ngIf="d.title">{{d.title}}</div>' + '<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
'<div class="action-sheet-sub-title" *ngIf="d.subTitle">{{d.subTitle}}</div>' + '<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
'<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' + '<button (click)="click(b)" *ngFor="#b of d.buttons" class="action-sheet-button disable-hover" [ngClass]="b.cssClass">' +
'<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon> ' + '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon> ' +
'{{b.text}}' + '{{b.text}}' +
@ -182,12 +182,17 @@ export class ActionSheet extends ViewController {
'</div>' + '</div>' +
'</div>', '</div>',
host: { host: {
'role': 'dialog' 'role': 'dialog',
'[attr.aria-labelledby]': 'hdrId',
'[attr.aria-describedby]': 'descId'
}, },
directives: [NgFor, NgIf, Icon] directives: [NgFor, NgIf, Icon]
}) })
class ActionSheetCmp { class ActionSheetCmp {
private d: any; private d: any;
private descId: string;
private hdrId: string;
private id: number;
constructor( constructor(
private _viewCtrl: ViewController, private _viewCtrl: ViewController,
@ -201,6 +206,14 @@ class ActionSheetCmp {
if (this.d.cssClass) { if (this.d.cssClass) {
renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true); renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
} }
this.id = (++actionSheetIds);
if (this.d.title) {
this.hdrId = 'acst-hdr-' + this.id;
}
if (this.d.subTitle) {
this.descId = 'acst-subhdr-' + this.id;
}
} }
onPageLoaded() { onPageLoaded() {
@ -399,3 +412,5 @@ class ActionSheetWpSlideOut extends Transition {
} }
} }
Transition.register('action-sheet-wp-slide-out', ActionSheetWpSlideOut); Transition.register('action-sheet-wp-slide-out', ActionSheetWpSlideOut);
let actionSheetIds = -1;