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>
     <mat-slide-toggle [(ngModel)]="multi">Allow Multi Expansion</mat-slide-toggle>
-    <mat-slide-toggle [(ngModel)]="hideToggle">Hide Indicators</mat-slide-toggle>
     <mat-slide-toggle [(ngModel)]="disabled">Disable Panel 2</mat-slide-toggle>
     <mat-slide-toggle [(ngModel)]="showPanel3">Show Panel 3</mat-slide-toggle>
   </div>
+  <div>
+    <mat-radio-group [(ngModel)]="hideToggle">
+      <mat-radio-button value="start">Start</mat-radio-button>
+      <mat-radio-button value="end">End</mat-radio-button>
+      <mat-radio-button value="hidden">Hidden</mat-radio-button>
+    </mat-radio-group>
+  </div>
   <p>Accordion Style</p>
   <mat-radio-group [(ngModel)]="displayMode">
     <mat-radio-button value="default">Default</mat-radio-button>

src/lib/expansion/accordion.ts

@@ -32,9 +32,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="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

@@ -132,8 +132,11 @@ export class MatExpansionPanelHeader 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

@@ -82,7 +82,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
 export class MatExpansionPanel extends _MatExpansionPanelMixinBase
     implements CanDisable, 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>();
@@ -95,11 +95,11 @@ export class MatExpansionPanel extends _MatExpansionPanelMixinBase
   }
 
   /** 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. */