fix(chips): being able to focus disabled chip by clicking (#8892)

Fixes users being able to focus a disabled chip by clicking it. Fixes #8883.
angular · Jan 4, 2018 · bfd513d · bfd513d
1 parent 7b78b74
commit bfd513d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts
@@ -19,13 +19,9 @@ describe('Chips', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [MatChipsModule],
-      declarations: [
-        BasicChip, SingleChip
-      ],
+      declarations: [BasicChip, SingleChip],
       providers: [{
-        provide: Directionality, useFactory: () => {
-          return {value: dir};
-        }
+        provide: Directionality, useFactory: () => ({value: dir})
       }]
     });
 
@@ -281,6 +277,15 @@ describe('Chips', () => {
         expect(chipNativeElement.getAttribute('aria-disabled')).toBe('true');
       });
 
+      it('should make disabled chips non-focusable', () => {
+        expect(chipNativeElement.getAttribute('tabindex')).toBe('-1');
+
+        testComponent.disabled = true;
+        fixture.detectChanges();
+
+        expect(chipNativeElement.getAttribute('tabindex')).toBeFalsy();
+      });
+
     });
   });
 });

diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts
@@ -68,7 +68,7 @@ export class MatBasicChip {
   exportAs: 'matChip',
   host: {
     'class': 'mat-chip',
-    'tabindex': '-1',
+    '[attr.tabindex]': 'disabled ? null : -1',
     'role': 'option',
     '[class.mat-chip-selected]': 'selected',
     '[attr.disabled]': 'disabled || null',