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-container">' +
'<div class="action-sheet-group">' +
'<div class="action-sheet-title" *ngIf="d.title">{{d.title}}</div>' +
'<div class="action-sheet-sub-title" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
'<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</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">' +
'<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon> ' +
'{{b.text}}' +
@ -182,12 +182,17 @@ export class ActionSheet extends ViewController {
'</div>' +
'</div>',
host: {
'role': 'dialog'
'role': 'dialog',
'[attr.aria-labelledby]': 'hdrId',
'[attr.aria-describedby]': 'descId'
},
directives: [NgFor, NgIf, Icon]
})
class ActionSheetCmp {
private d: any;
private descId: string;
private hdrId: string;
private id: number;
constructor(
private _viewCtrl: ViewController,
@ -201,6 +206,14 @@ class ActionSheetCmp {
if (this.d.cssClass) {
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() {
@ -399,3 +412,5 @@ class ActionSheetWpSlideOut extends Transition {
}
}
Transition.register('action-sheet-wp-slide-out', ActionSheetWpSlideOut);
let actionSheetIds = -1;