Skip to content

Commit

Permalink
fix(slide-toggle): consistent naming of aria attributes (#2688)
Browse files Browse the repository at this point in the history
* fix(slide-toggle): consistent naming of aria attributes

* Ensures that the slide-toggle uses consistent attribute naming.
Consistent with the native inputs and other Material components.

* Change back to tabIndex
  • Loading branch information
devversion authored and mmalerba committed Jan 19, 2017
1 parent be0da09 commit 10bd6da
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 4 deletions.
17 changes: 15 additions & 2 deletions src/lib/slide-toggle/slide-toggle.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,17 @@ describe('MdSlideToggle', () => {
expect(inputElement.id).toMatch(/md-slide-toggle-[0-9]+-input/g);
});

it('should forward the tabIndex to the underlying input', () => {
fixture.detectChanges();

expect(inputElement.tabIndex).toBe(0);

testComponent.slideTabindex = 4;
fixture.detectChanges();

expect(inputElement.tabIndex).toBe(4);
});

it('should forward the specified name to the input', () => {
testComponent.slideName = 'myName';
fixture.detectChanges();
Expand Down Expand Up @@ -570,8 +581,9 @@ function dispatchFocusChangeEvent(eventName: string, element: HTMLElement): void
[id]="slideId"
[checked]="slideChecked"
[name]="slideName"
[ariaLabel]="slideLabel"
[ariaLabelledby]="slideLabelledBy"
[aria-label]="slideLabel"
[aria-labelledby]="slideLabelledBy"
[tabIndex]="slideTabindex"
(change)="onSlideChange($event)"
(click)="onSlideClick($event)">
Expand All @@ -589,6 +601,7 @@ class SlideToggleTestApp {
slideName: string;
slideLabel: string;
slideLabelledBy: string;
slideTabindex: number;
lastEvent: MdSlideToggleChange;

onSlideClick(event: Event) {}
Expand Down
4 changes: 2 additions & 2 deletions src/lib/slide-toggle/slide-toggle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,10 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor {
@Input() tabIndex: number = 0;

/** Used to set the aria-label attribute on the underlying input element. */
@Input() ariaLabel: string = null;
@Input('aria-label') ariaLabel: string = null;

/** Used to set the aria-labelledby attribute on the underlying input element. */
@Input() ariaLabelledby: string = null;
@Input('aria-labelledby') ariaLabelledby: string = null;

/** Whether the slide-toggle is disabled. */
@Input()
Expand Down

0 comments on commit 10bd6da

Please sign in to comment.