Skip to content

fix(checkbox): support native tabindex attribute #6793

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.

Sign up for GitHub

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 1 commit into from
Sep 29, 2017
Merged

fix(checkbox): support native tabindex attribute #6793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 21 additions & 0 deletions src/lib/checkbox/checkbox.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ describe('MatCheckbox', () => {
CheckboxWithChangeEvent,
CheckboxWithFormControl,
CheckboxWithoutLabel,
CheckboxWithTabindexAttr,
],
providers: [
{provide: ViewportRuler, useClass: FakeViewportRuler}
Expand Down Expand Up @@ -677,6 +678,20 @@ describe('MatCheckbox', () => {

});

describe('with native tabindex attribute', () => {

it('should properly detect native tabindex attribute', async(() => {
fixture = TestBed.createComponent(CheckboxWithTabindexAttr);
fixture.detectChanges();

const checkbox = fixture.debugElement
.query(By.directive(MatCheckbox)).componentInstance as MatCheckbox;

expect(checkbox.tabIndex)
.toBe(5, 'Expected tabIndex property to have been set based on the native attribute');
}));
});

describe('with multiple checkboxes', () => {
beforeEach(() => {
fixture = TestBed.createComponent(MultipleCheckboxes);
Expand Down Expand Up @@ -998,3 +1013,9 @@ class CheckboxWithFormControl {
class CheckboxWithoutLabel {
label: string;
}

/** Test component with the native tabindex attribute. */
@Component({
template: `<mat-checkbox tabindex="5"></mat-checkbox>`
})
class CheckboxWithTabindexAttr {}
17 changes: 10 additions & 7 deletions src/lib/checkbox/checkbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {
AfterViewInit,
Attribute,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
Expand All @@ -27,10 +28,12 @@ import {
CanColor,
CanDisable,
CanDisableRipple,
HasTabIndex,
MatRipple,
mixinColor,
mixinDisabled,
mixinDisableRipple,
mixinTabIndex,
RippleRef,
} from '@angular/material/core';
import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
Expand Down Expand Up @@ -79,7 +82,7 @@ export class MatCheckboxBase {
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
}
export const _MatCheckboxMixinBase =
mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent');
mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent'));


/**
Expand All @@ -104,13 +107,13 @@ export const _MatCheckboxMixinBase =
'[class.mat-checkbox-label-before]': 'labelPosition == "before"',
},
providers: [MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR],
inputs: ['disabled', 'disableRipple', 'color'],
inputs: ['disabled', 'disableRipple', 'color', 'tabIndex'],
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor,
AfterViewInit, OnDestroy, CanColor, CanDisable, CanDisableRipple {
AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex, CanDisableRipple {

/**
* Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will
Expand Down Expand Up @@ -156,9 +159,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
/** Whether the label should appear after or before the checkbox. Defaults to 'after' */
@Input() labelPosition: 'before' | 'after' = 'after';

/** Tabindex value that is passed to the underlying input element. */
@Input() tabIndex: number = 0;

/** Name value will be applied to the input element if present */
@Input() name: string | null = null;

Expand Down Expand Up @@ -199,8 +199,11 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
constructor(renderer: Renderer2,
elementRef: ElementRef,
private _changeDetectorRef: ChangeDetectorRef,
private _focusMonitor: FocusMonitor) {
private _focusMonitor: FocusMonitor,
@Attribute('tabindex') tabIndex: string) {
super(renderer, elementRef);

this.tabIndex = parseInt(tabIndex) || 0;
}

ngAfterViewInit() {
Expand Down