Skip to content

Commit

Permalink
fix(chips): set appropriate aria-orientation
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
crisbeto committed Aug 16, 2017
1 parent b5fc68b commit 88976d8
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/demo-app/chips/chips-demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ <h4>Stacked Chips</h4>
<code>(focus)</code> event to run custom code.
</p>

<md-chip-list class="mat-chip-list-stacked">
<md-chip-list class="mat-chip-list-stacked" aria-orientation="vertical">
<md-chip *ngFor="let aColor of availableColors"
(focus)="color = aColor.color" color="{{aColor.color}}" selected="true">
{{aColor.name}}
Expand Down
4 changes: 4 additions & 0 deletions src/lib/chips/chip-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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()',
Expand Down Expand Up @@ -82,6 +83,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) {
}
Expand Down
13 changes: 12 additions & 1 deletion src/lib/chips/chips.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,19 @@ 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'`.

0 comments on commit 88976d8

Please sign in to comment.