Skip to content

fix(chips): set appropriate aria-orientation #6464

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 11, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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" [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}}
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 @@ -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) {
}
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,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
Expand Down