fix(checkbox): redirect focus to underlying input element (angular#13959

)

Currently the `mat-checkbox` host element isn't focusable, which means that if consumers decided to use something like `cdkFocusInitial` on it, nothing would happen. These changes tweak the `tabindex` so the element is focusable and add a `focus` listener that'll redirect focus to the `input`.

Relates to angular#13953.

src/lib/checkbox/checkbox.scss

@@ -182,6 +182,7 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
+  outline: 0;
 
   .mat-ripple-element:not(.mat-checkbox-persistent-ripple) {
     opacity: 0.16;

src/lib/checkbox/checkbox.spec.ts

@@ -370,6 +370,15 @@ describe('MatCheckbox', () => {
       expect(document.activeElement).toBe(inputElement);
     });
 
+    it('should focus on underlying input element when the host is focused', () => {
+      expect(document.activeElement).not.toBe(inputElement);
+
+      checkboxNativeElement.focus();
+      fixture.detectChanges();
+
+      expect(document.activeElement).toBe(inputElement);
+    });
+
     it('should forward the value to input element', () => {
       testComponent.checkboxValue = 'basic_checkbox';
       fixture.detectChanges();
@@ -790,7 +799,7 @@ describe('MatCheckbox', () => {
       fixture.detectChanges();
 
       const checkbox = fixture.debugElement.query(By.directive(MatCheckbox)).nativeElement;
-      expect(checkbox.getAttribute('tabindex')).toBeFalsy();
+      expect(checkbox.getAttribute('tabindex')).toBe('-1');
     });
   });
 

src/lib/checkbox/checkbox.ts

@@ -119,12 +119,13 @@ export const _MatCheckboxMixinBase:
   host: {
     'class': 'mat-checkbox',
     '[id]': 'id',
-    '[attr.tabindex]': 'null',
+    '[attr.tabindex]': '-1', // Reset back to -1 so that the `focus` event still works.
     '[class.mat-checkbox-indeterminate]': 'indeterminate',
     '[class.mat-checkbox-checked]': 'checked',
     '[class.mat-checkbox-disabled]': 'disabled',
     '[class.mat-checkbox-label-before]': 'labelPosition == "before"',
     '[class._mat-animation-noopable]': `_animationMode === 'NoopAnimations'`,
+    '(focus)': '_inputElement.nativeElement.focus()',
   },
   providers: [MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR],
   inputs: ['disableRipple', 'color', 'tabIndex'],