From a37aa6a62c78d720fdc8418c2b2a271bbf9c66e8 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Tue, 12 Sep 2017 01:24:49 +0200
Subject: [PATCH] fix(chips): set appropriate aria-orientation (#6464)

Based on the [accessibility guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox), the `listbox` role has a default `aria-orientation` of `vertical`, however the chips in a chip list are horizontal.
---
 src/demo-app/chips/chips-demo.html |  2 +-
 src/lib/chips/chip-list.ts         |  4 ++++
 src/lib/chips/chips.md             | 13 ++++++++++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html
index 860caedb0c2..b55c55954ae 100644
--- a/src/demo-app/chips/chips-demo.html
+++ b/src/demo-app/chips/chips-demo.html
@@ -102,7 +102,7 @@
         <code>(focus)</code> event to run custom code.
       </p>
 
-      <md-chip-list class="mat-chip-list-stacked" [tabIndex]="-1">
+      <md-chip-list class="mat-chip-list-stacked" aria-orientation="vertical" [tabIndex]="-1">
         <md-chip *ngFor="let aColor of availableColors"
                  (focus)="color = aColor.color" color="{{aColor.color}}" selected="true">
           {{aColor.name}}
diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts
index de830d015c0..078fc1cd8e5 100644
--- a/src/lib/chips/chip-list.ts
+++ b/src/lib/chips/chip-list.ts
@@ -45,6 +45,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
   host: {
     '[attr.tabindex]': '_tabIndex',
     'role': 'listbox',
+    '[attr.aria-orientation]': 'ariaOrientation',
     'class': 'mat-chip-list',
 
     '(focus)': 'focus()',
@@ -88,6 +89,9 @@ export class MdChipList implements AfterContentInit, OnDestroy {
   /** The chip components contained within this chip list. */
   chips: QueryList<MdChip>;
 
+  /** Orientation of the chip list. */
+  @Input('aria-orientation') ariaOrientation: 'horizontal' | 'vertical' = 'horizontal';
+
   constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef,
               @Optional() private _dir: Directionality) {
   }
diff --git a/src/lib/chips/chips.md b/src/lib/chips/chips.md
index 7ae60fe5523..1e26923b5b7 100644
--- a/src/lib/chips/chips.md
+++ b/src/lib/chips/chips.md
@@ -33,10 +33,21 @@ chips are neither selectable nor focusable. Currently, disabled chips receive no
 Users can move through the chips using the arrow keys and select/deselect them with the space. Chips
 also gain focus when clicked, ensuring keyboard navigation starts at the appropriate chip.
 
+### Orientation
+If you want the chips in the list to be stacked vertically, instead of horizontally, you can apply
+the `mat-chip-list-stacked` class, as well as the `aria-orientation="vertical"` attribute:
+
+```html
+<md-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
+  <md-chip>Papadum</md-chip>
+  <md-chip>Naan</md-chip>
+  <md-chip>Dal</md-chip>
+</md-chip-list>
+```
 
 ### Theming
 The selected color of an `<md-chip>` can be changed by using the `color` property. By default, chips
-use a neutral background color based on the current theme (light or dark). This can be changed to 
+use a neutral background color based on the current theme (light or dark). This can be changed to
 `'primary'`, `'accent'`, or `'warn'`.
 
 ### Accessibility