From ecfecc9bcb54b52ad834814e35ef8b576a986520 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Sat, 5 Mar 2016 20:51:38 -0600
Subject: [PATCH] chore(actionsheet): add aria labels to actionsheet

---
 ionic/components/action-sheet/action-sheet.ts | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts
index 8cbd08aba6..d1a8f7b6ff 100644
--- a/ionic/components/action-sheet/action-sheet.ts
+++ b/ionic/components/action-sheet/action-sheet.ts
@@ -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;