feat(datepicker): add aria-attributes (#4141)

Closes #4132

demo/src/app/components/+datepicker/demos/color-theming/color-theming.html

@@ -17,7 +17,7 @@
       <div class="input-group">
         <input type="text" class="form-control" bsDatepicker #dp="bsDatepicker" [bsConfig]="bsConfig">
         <div class="input-group-btn">
-          <button class="btn btn-success" (click)="dp.show() ">Open</button>
+          <button class="btn btn-success" (click)="dp.show()" [attr.aria-expanded]="dp.isOpen">Open</button>
         </div>
       </div>
     </div>

demo/src/app/components/+datepicker/demos/custom-format/custom-format.html

@@ -11,7 +11,7 @@
         [bsConfig]="{ dateInputFormat: 'YYYY-MM-DD' }">
     </div>
     <div class="col-xs-12 col-12 col-md-3 form-group">
-      <button class="btn btn-success" (click)="dpYMD.toggle()">Date Picker</button>
+      <button class="btn btn-success" (click)="dpYMD.toggle()" [attr.aria-expanded]="dpYMD.isOpen">Date Picker</button>
     </div>
   </div>
   <br>
@@ -28,7 +28,7 @@
         [bsConfig]="{ dateInputFormat: 'MM/DD/YYYY' }">
     </div>
     <div class="col-xs-12 col-12 col-md-3 form-group">
-      <button class="btn btn-success" (click)="dpMDY.toggle()">Date Picker</button>
+      <button class="btn btn-success" (click)="dpMDY.toggle()" [attr.aria-expanded]="dpMDY.isOpen">Date Picker</button>
     </div>
   </div>
   <br>
@@ -45,7 +45,7 @@
         [bsConfig]="{ dateInputFormat: 'MMMM Do YYYY, h:mm:ss a' }">
     </div>
     <div class="col-xs-12 col-12 col-md-3 form-group">
-      <button class="btn btn-success" (click)="dpFull.toggle()">Date Picker</button>
+      <button class="btn btn-success" (click)="dpFull.toggle()" [attr.aria-expanded]="dpFull.isOpen">Date Picker</button>
     </div>
   </div>
 </form>

demo/src/app/components/+datepicker/demos/date-initial-state/date-initial-state.html

@@ -8,7 +8,7 @@
            [bsValue]="bsValue">
   </div>
   <div class="col-xs-12 col-12 col-md-3 form-group">
-    <button class="btn btn-success" (click)="dp.toggle()">Date Picker</button>
+    <button class="btn btn-success" (click)="dp.toggle()" [attr.aria-expanded]="dp.isOpen">Date Picker</button>
   </div>
 </div>
 
@@ -18,6 +18,6 @@
     <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue">
   </div>
   <div class="col-xs-12 col-12 col-md-3 form-group">
-    <button class="btn btn-success" (click)="drp.toggle()">Date Range Picker</button>
+    <button class="btn btn-success" (click)="drp.toggle()" [attr.aria-expanded]="drp.isOpen">Date Range Picker</button>
   </div>
 </div>

demo/src/app/components/+datepicker/demos/hide-on-scroll/hide-on-scroll.html

@@ -7,7 +7,7 @@
       bsDatepicker>
   </div>
   <div class="col-xs-12 col-12 col-md-3 form-group">
-    <button class="btn btn-success" (click)="dp.toggle()">Date Picker</button>
+    <button class="btn btn-success" (click)="dp.toggle()" [attr.aria-expanded]="dp.isOpen">Date Picker</button>
   </div>
 </div>
 <br>

demo/src/app/components/+datepicker/demos/is-open/is-open.html

@@ -1,8 +1,10 @@
 <div class="row">
   <div class="col-xs-8 col-8 col-md-5 col-lg-4 form-group">
-    <input class="form-control" placeholder="Please choose a date" bsDatepicker [isOpen]="isOpen" />
+    <input class="form-control" placeholder="Please choose a date"
+           #dp="bsDatepicker" bsDatepicker [isOpen]="isOpen" />
   </div>
   <div class="col-xs-4 col-4 col-md-4 form-group">
-    <input class="btn btn-success" type="button" value="Toggle" (click)="isOpen = !isOpen">
+    <input class="btn btn-success" type="button" value="Toggle"
+           (click)="isOpen = !isOpen" [attr.aria-expanded]="dp.isOpen">
   </div>
 </div>

demo/src/app/components/+datepicker/demos/visibility-methods/visibility-methods.html

@@ -5,6 +5,6 @@
   <div class="col-xs-12 col-12 col-sm-8 form-group">
     <input class="btn btn-success" type="button" (click)="dp.show()" value="Open">
     <input class="btn btn-success" type="button" (click)="dp.hide()" value="Close">
-    <input class="btn btn-success" type="button" (click)="dp.toggle()" value="Toggle">
+    <input class="btn btn-success" type="button" (click)="dp.toggle()" [attr.aria-expanded]="dp.isOpen" value="Toggle">
   </div>
 </div>

src/datepicker/themes/bs/bs-datepicker-container.component.ts

@@ -14,7 +14,9 @@ import { Subscription } from 'rxjs/Subscription';
   templateUrl: './bs-datepicker-view.html',
   host: {
     '(click)': '_stopPropagation($event)',
-    style: 'position: absolute; display: block;'
+    style: 'position: absolute; display: block;',
+    role: 'dialog',
+    'aria-label': 'calendar'
   }
 })
 export class BsDatepickerContainerComponent extends BsDatepickerAbstractComponent

src/datepicker/themes/bs/bs-datepicker-view.html

@@ -3,7 +3,7 @@
   <div class="bs-datepicker-container">
 
     <!--calendars-->
-    <div class="bs-calendar-container" [ngSwitch]="viewMode | async">
+    <div class="bs-calendar-container" [ngSwitch]="viewMode | async" role="application">
       <!--days calendar-->
       <div *ngSwitchCase="'day'">
         <bs-days-calendar-view

src/datepicker/themes/bs/bs-daterangepicker-container.component.ts

@@ -13,7 +13,9 @@ import { Subscription } from 'rxjs/Subscription';
   templateUrl: './bs-datepicker-view.html',
   host: {
     '(click)': '_stopPropagation($event)',
-    style: 'position: absolute; display: block;'
+    style: 'position: absolute; display: block;',
+    role: 'dialog',
+    'aria-label': 'calendar'
   }
 })
 export class BsDaterangepickerContainerComponent extends BsDatepickerAbstractComponent