docs(a11y): add accessibility sections to datepicker, menu, slide … (angular#6710)

Author: tinayuangao

src/demo-app/expansion/expansion-demo.html

@@ -27,10 +27,16 @@ <h1>Accordion</h1>
   <p>Accordion Options</p>
   <div>
     <md-slide-toggle [(ngModel)]="multi">Allow Multi Expansion</md-slide-toggle>
-    <md-slide-toggle [(ngModel)]="hideToggle">Hide Indicators</md-slide-toggle>
     <md-slide-toggle [(ngModel)]="disabled">Disable Panel 2</md-slide-toggle>
     <md-slide-toggle [(ngModel)]="showPanel3">Show Panel 3</md-slide-toggle>
   </div>
+  <div>
+    <md-radio-group [(ngModel)]="hideToggle">
+      <md-radio-button value="start">Start</md-radio-button>
+      <md-radio-button value="end">End</md-radio-button>
+      <md-radio-button value="hidden">Hidden</md-radio-button>
+    </md-radio-group>
+  </div>
   <p>Accordion Style</p>
   <md-radio-group [(ngModel)]="displayMode">
     <md-radio-button value="default">Default</md-radio-button>

src/lib/expansion/accordion.ts

@@ -31,9 +31,7 @@ export class CdkAccordion {
   private  _multi: boolean = false;
 
   /** Whether the expansion indicator should be hidden. */
-  @Input() get hideToggle(): boolean { return this._hideToggle; }
-  set hideToggle(show: boolean) { this._hideToggle = coerceBooleanProperty(show); }
-  private  _hideToggle: boolean = false;
+  @Input() hideToggle = 'end';
 
   /**
    * The display mode used for all expansion panels in the accordion. Currently two display

src/lib/expansion/expansion-panel-header.html

@@ -3,5 +3,5 @@
   <ng-content select="md-panel-description, mat-panel-description"></ng-content>
   <ng-content></ng-content>
 </span>
-<span [@indicatorRotate]="_getExpandedState()" *ngIf="_showToggle()"
+<span [@indicatorRotate]="_getExpandedState()" *ngIf="_indicatorLocation() !== 'hidden'"
       class="mat-expansion-indicator"></span>

src/lib/expansion/expansion-panel-header.ts

@@ -137,8 +137,11 @@ export class MdExpansionPanelHeader implements OnDestroy {
   }
 
   /** Gets whether the expand indicator should be shown. */
-  _showToggle(): boolean {
-    return !this.panel.hideToggle && !this.panel.disabled;
+  _indicatorLocation(): string {
+    if (this.panel.disabled) {
+      return 'hidden';
+    }
+    return this.panel.hideToggle;
   }
 
   /** Handle keyup event calling to toggle() if appropriate. */

src/lib/expansion/expansion-panel.ts

@@ -73,7 +73,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
 })
 export class MdExpansionPanel extends AccordionItem implements OnChanges, OnDestroy {
   /** Whether the toggle indicator should be hidden. */
-  @Input() hideToggle: boolean = false;
+  @Input() hideToggle: string = 'end';
 
   /** Stream that emits for changes in `@Input` properties. */
   _inputChanges = new Subject<SimpleChanges>();
@@ -86,11 +86,11 @@ export class MdExpansionPanel extends AccordionItem implements OnChanges, OnDest
   }
 
   /** Whether the expansion indicator should be hidden. */
-  _getHideToggle(): boolean {
+  _getHideToggle(): string {
     if (this.accordion) {
-      return this.accordion.hideToggle;
+      return this.accordion.hideToggle ? '' : 'hidden';
     }
-    return this.hideToggle;
+    return this.hideToggle ? '' : 'hidden';
   }
 
   /** Determines whether the expansion panel should have spacing between it and its siblings. */