From dcb9df682c1c534c05fa2db183a2ea3acb06e6e5 Mon Sep 17 00:00:00 2001 From: zelliott Date: Fri, 20 Dec 2019 07:31:18 -0800 Subject: [PATCH 1/8] Add focus indicators to mat-chip. Use a dynamically added element as the ripple target --- src/material/chips/chip.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts index 56239f17326d..d20d657e9abb 100644 --- a/src/material/chips/chip.ts +++ b/src/material/chips/chip.ts @@ -240,6 +240,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes constructor(public _elementRef: ElementRef, private _ngZone: NgZone, + @Inject(DOCUMENT) private _document: any, platform: Platform, @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalRippleOptions: RippleGlobalOptions | null, From 8e42aa6fd05ef94db665837f827de987336ccf85 Mon Sep 17 00:00:00 2001 From: zelliott Date: Sat, 21 Dec 2019 07:29:47 -0800 Subject: [PATCH 2/8] _document should be an optional param to avoid breaking change. --- src/material/chips/chip.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts index d20d657e9abb..56239f17326d 100644 --- a/src/material/chips/chip.ts +++ b/src/material/chips/chip.ts @@ -240,7 +240,6 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes constructor(public _elementRef: ElementRef, private _ngZone: NgZone, - @Inject(DOCUMENT) private _document: any, platform: Platform, @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalRippleOptions: RippleGlobalOptions | null, From a0542b2a65d1ff3f16b18545d32f0c48eace4832 Mon Sep 17 00:00:00 2001 From: zelliott Date: Mon, 6 Jan 2020 14:28:33 -0800 Subject: [PATCH 3/8] Added unit tests for focus indicator, improved focus indicator color on particular components. --- .../button-toggle/button-toggle.spec.ts | 7 ++++ src/material/button/button.spec.ts | 7 ++++ src/material/checkbox/checkbox.spec.ts | 6 +++ src/material/chips/chip.spec.ts | 4 ++ .../focus-indicator/_focus-indicator.scss | 42 ++++++++++++++++--- src/material/core/option/option.spec.ts | 7 ++++ src/material/datepicker/calendar-body.spec.ts | 6 +++ src/material/expansion/expansion.spec.ts | 7 ++++ src/material/list/list.spec.ts | 2 + src/material/list/selection-list.spec.ts | 7 ++++ src/material/menu/menu.spec.ts | 11 +++++ src/material/radio/radio.spec.ts | 7 ++++ .../slide-toggle/slide-toggle.spec.ts | 6 +++ src/material/slider/slider.spec.ts | 4 ++ src/material/sort/sort.spec.ts | 7 ++++ src/material/stepper/stepper.spec.ts | 7 ++++ src/material/tabs/tab-group.spec.ts | 6 +++ .../tabs/tab-nav-bar/tab-nav-bar.spec.ts | 6 +++ src/material/tree/tree.scss | 1 - 19 files changed, 144 insertions(+), 6 deletions(-) diff --git a/src/material/button-toggle/button-toggle.spec.ts b/src/material/button-toggle/button-toggle.spec.ts index 5f126db22777..b0a4d55f7711 100644 --- a/src/material/button-toggle/button-toggle.spec.ts +++ b/src/material/button-toggle/button-toggle.spec.ts @@ -880,6 +880,13 @@ describe('MatButtonToggle without forms', () => { }).not.toThrow(); }); + it('should have a focus indicator', () => { + const fixture = TestBed.createComponent(ButtonTogglesInsideButtonToggleGroup); + const buttonDebugElement = fixture.debugElement.query(By.css('button'))!; + + expect(buttonDebugElement.nativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); + }); @Component({ diff --git a/src/material/button/button.spec.ts b/src/material/button/button.spec.ts index 328f1cfca0da..14bbd17aa543 100644 --- a/src/material/button/button.spec.ts +++ b/src/material/button/button.spec.ts @@ -83,6 +83,13 @@ describe('MatButton', () => { expect(buttonDebugEl.nativeElement.classList).toContain('cdk-touch-focused'); }); + it('should have a focus indicator', () => { + const fixture = TestBed.createComponent(TestApp); + const buttonDebugElement = fixture.debugElement.query(By.css('button'))!; + + expect(buttonDebugElement.nativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); + describe('button[mat-fab]', () => { it('should have accent palette by default', () => { const fixture = TestBed.createComponent(TestApp); diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts index 25de60bae73b..db045064b699 100644 --- a/src/material/checkbox/checkbox.spec.ts +++ b/src/material/checkbox/checkbox.spec.ts @@ -387,6 +387,12 @@ describe('MatCheckbox', () => { expect(checkboxNativeElement.querySelector('svg')!.getAttribute('focusable')).toBe('false'); }); + it('should have a focus indicator', () => { + const checkboxRippleNativeElement = checkboxNativeElement.querySelector('.mat-checkbox-ripple')!; + + expect(checkboxRippleNativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); + describe('ripple elements', () => { it('should show ripples on label mousedown', () => { diff --git a/src/material/chips/chip.spec.ts b/src/material/chips/chip.spec.ts index bb1ab9368b51..503ea34332e2 100644 --- a/src/material/chips/chip.spec.ts +++ b/src/material/chips/chip.spec.ts @@ -220,6 +220,10 @@ describe('MatChip', () => { expect(chipInstance.value).toBeNull(); }); + + it('should have a focus indicator', () => { + expect(chipNativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); }); describe('keyboard behavior', () => { diff --git a/src/material/core/focus-indicator/_focus-indicator.scss b/src/material/core/focus-indicator/_focus-indicator.scss index 4ce5a8c0e4ac..376cd32d58d7 100644 --- a/src/material/core/focus-indicator/_focus-indicator.scss +++ b/src/material/core/focus-indicator/_focus-indicator.scss @@ -80,10 +80,42 @@ /// @include mat-strong-focus-indicators-theme(#F00); /// } @mixin mat-strong-focus-indicators-theme($themeOrColor) { - .mat-focus-indicator::before { - border-color: if( - type-of($themeOrColor) == 'map', - mat-color(map_get($themeOrColor, primary)), - $themeOrColor); + @if (type-of($themeOrColor) == 'map') { + $primary-palette: map_get($themeOrColor, primary); + + .mat-focus-indicator::before { + border-color: mat-color($primary-palette, default); + } + + .mat-toolbar { + &.mat-primary, + &.mat-accent, + &.mat-warn { + .mat-focus-indicator::before { + border-color: currentColor; + } + } + } + + .mat-snack-bar-container { + .mat-focus-indicator::before { + border-color: currentColor; + } + } + + .mat-tab-group, + .mat-tab-header { + &.mat-background-primary, + &.mat-background-accent, + &.mat-background-warn { + .mat-focus-indicator::before { + border-color: currentColor; + } + } + } + } @else { + .mat-focus-indicator::before { + border-color: $themeOrColor; + } } } diff --git a/src/material/core/option/option.spec.ts b/src/material/core/option/option.spec.ts index 008a1758cca7..6923372c5df1 100644 --- a/src/material/core/option/option.spec.ts +++ b/src/material/core/option/option.spec.ts @@ -147,6 +147,13 @@ describe('MatOption component', () => { subscription.unsubscribe(); }); + it('should have a focus indicator', () => { + const fixture = TestBed.createComponent(BasicOption); + const optionDebugElement = fixture.debugElement.query(By.directive(MatOption))!; + + expect(optionDebugElement.nativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); + describe('ripples', () => { let fixture: ComponentFixture; let optionDebugElement: DebugElement; diff --git a/src/material/datepicker/calendar-body.spec.ts b/src/material/datepicker/calendar-body.spec.ts index f3f874851691..cd9ff180f2df 100644 --- a/src/material/datepicker/calendar-body.spec.ts +++ b/src/material/datepicker/calendar-body.spec.ts @@ -43,6 +43,12 @@ describe('MatCalendarBody', () => { refreshElementLists(); }); + it('should have a focus indicator', () => { + const firstBodyCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-cell')!; + + expect(firstBodyCell.classList.contains('mat-focus-indicator')).toBe(true); + }); + it('creates body', () => { expect(rowEls.length).toBe(3); expect(labelEls.length).toBe(1); diff --git a/src/material/expansion/expansion.spec.ts b/src/material/expansion/expansion.spec.ts index 0d1e2b5300e4..a009336635df 100644 --- a/src/material/expansion/expansion.spec.ts +++ b/src/material/expansion/expansion.spec.ts @@ -345,6 +345,13 @@ describe('MatExpansionPanel', () => { expect(header.componentInstance.collapsedHeight).toBe('16px'); }); + it('should have a focus indicator', () => { + const fixture = TestBed.createComponent(PanelWithContent); + const header = fixture.debugElement.query(By.directive(MatExpansionPanelHeader))!; + + expect(header.nativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); + describe('disabled state', () => { let fixture: ComponentFixture; let panel: HTMLElement; diff --git a/src/material/list/list.spec.ts b/src/material/list/list.spec.ts index 68f09c899a1e..ab91387db923 100644 --- a/src/material/list/list.spec.ts +++ b/src/material/list/list.spec.ts @@ -29,6 +29,8 @@ describe('MatList', () => { fixture.detectChanges(); expect(listItem.nativeElement.classList.length).toBe(2); expect(listItem.nativeElement.classList).toContain('mat-list-item'); + + // This spec also ensures the focus indicator is present. expect(listItem.nativeElement.classList).toContain('mat-focus-indicator'); }); diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts index ce45f1aa4483..82fc3f67c1cf 100644 --- a/src/material/list/selection-list.spec.ts +++ b/src/material/list/selection-list.spec.ts @@ -650,6 +650,13 @@ describe('MatSelectionList without forms', () => { expect(option.classList).toContain('mat-2-line'); }); + it('should have a focus indicator', () => { + const optionNativeElements = listOptions.map(option => option.nativeElement); + + expect(optionNativeElements.every(option => option.classList.contains('mat-focus-indicator'))) + .toBe(true); + }); + }); describe('with list option selected', () => { diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts index 1b0af4d27f80..bf6338454bb3 100644 --- a/src/material/menu/menu.spec.ts +++ b/src/material/menu/menu.spec.ts @@ -812,6 +812,17 @@ describe('MatMenu', () => { expect(document.activeElement).toBe(overlayContainerElement.querySelector('.mat-menu-panel')); })); + it('should have a focus indicator', () => { + const fixture = createComponent(SimpleMenu, [], [FakeIcon]); + fixture.detectChanges(); + fixture.componentInstance.trigger.openMenu(); + fixture.detectChanges(); + + const items = Array.from(overlayContainerElement.querySelectorAll('.mat-menu-item')); + + expect(items.every(item => item.classList.contains('mat-focus-indicator'))).toBe(true); + }); + describe('lazy rendering', () => { it('should be able to render the menu content lazily', fakeAsync(() => { const fixture = createComponent(SimpleLazyMenu); diff --git a/src/material/radio/radio.spec.ts b/src/material/radio/radio.spec.ts index c9c8421415a7..9ea0a3c8f78f 100644 --- a/src/material/radio/radio.spec.ts +++ b/src/material/radio/radio.spec.ts @@ -387,6 +387,13 @@ describe('MatRadio', () => { expect(radioNativeElements[2].classList).toContain('mat-warn'); }); + it('should have a focus indicator', () => { + const radioRippleNativeElements = radioNativeElements.map(radioEl => radioEl.querySelector('.mat-radio-ripple')!); + + expect(radioRippleNativeElements.every(radioRippleEl => radioRippleEl.classList.contains('mat-focus-indicator'))) + .toBe(true); + }); + }); describe('group with ngModel', () => { diff --git a/src/material/slide-toggle/slide-toggle.spec.ts b/src/material/slide-toggle/slide-toggle.spec.ts index ed97ce8ab4ec..be9b7ecf7788 100644 --- a/src/material/slide-toggle/slide-toggle.spec.ts +++ b/src/material/slide-toggle/slide-toggle.spec.ts @@ -342,6 +342,12 @@ describe('MatSlideToggle without forms', () => { expect(slideToggleElement.querySelectorAll(rippleSelector).length).toBe(0); }); + + it('should have a focus indicator', () => { + const slideToggleRippleNativeElement = slideToggleElement.querySelector('.mat-slide-toggle-ripple')!; + + expect(slideToggleRippleNativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); }); describe('custom template', () => { diff --git a/src/material/slider/slider.spec.ts b/src/material/slider/slider.spec.ts index e278480ced71..9bf0f241927c 100644 --- a/src/material/slider/slider.spec.ts +++ b/src/material/slider/slider.spec.ts @@ -216,6 +216,10 @@ describe('MatSlider', () => { expect(event.defaultPrevented).toBe(true); }); + it('should have a focus indicator', () => { + expect(sliderNativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); + }); describe('disabled slider', () => { diff --git a/src/material/sort/sort.spec.ts b/src/material/sort/sort.spec.ts index 23f8dc40c1c6..3d8240409e9c 100644 --- a/src/material/sort/sort.spec.ts +++ b/src/material/sort/sort.spec.ts @@ -409,6 +409,13 @@ describe('MatSort', () => { expect(sortHeaderElement.querySelector('.mat-sort-header-arrow')).toBeTruthy(); })); + it('should have a focus indicator', () => { + const header = fixture.debugElement.query(By.directive(MatSortHeader))!.nativeElement; + const button = header.querySelector('.mat-sort-header-button'); + + expect(button.classList.contains('mat-focus-indicator')).toBe(true); + }); + }); /** diff --git a/src/material/stepper/stepper.spec.ts b/src/material/stepper/stepper.spec.ts index 686b669e5c27..0bb6bff40f43 100644 --- a/src/material/stepper/stepper.spec.ts +++ b/src/material/stepper/stepper.spec.ts @@ -394,6 +394,13 @@ describe('MatStepper', () => { expect(secondStepContentEl.getAttribute('tabindex')).toBe('0'); }); + it('should have a focus indicator', () => { + const stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); + + expect(stepHeaders.every(stepHeader => stepHeader.nativeElement.classList.contains('mat-focus-indicator'))) + .toBe(true); + }); + }); describe('basic stepper when attempting to set the selected step too early', () => { diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts index c452f6498827..6098393844ed 100644 --- a/src/material/tabs/tab-group.spec.ts +++ b/src/material/tabs/tab-group.spec.ts @@ -291,6 +291,12 @@ describe('MatTabGroup', () => { subscription.unsubscribe(); }); + it('should have a focus indicator', () => { + const tabLabels = fixture.debugElement.queryAll(By.css('.mat-tab-label')); + + expect(tabLabels.every(tabLabel => tabLabel.nativeElement.classList.contains('mat-focus-indicator'))) + .toBe(true); + }); }); describe('aria labelling', () => { diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts index 1cde6502fd05..f1d4a0c73a92 100644 --- a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts @@ -333,6 +333,12 @@ describe('MatTabNavBar', () => { expect(fixture.componentInstance.tabLinks.toArray().every(tabLink => tabLink.rippleDisabled)) .toBe(true, 'Expected every tab link to have ripples disabled'); }); + + it('should have a focus indicator', () => { + const tabLink = fixture.debugElement.nativeElement.querySelector('.mat-tab-link'); + + expect(tabLink.classList.contains('mat-focus-indicator')).toBe(true); + }); }); }); diff --git a/src/material/tree/tree.scss b/src/material/tree/tree.scss index 64a229f35448..80822f8664be 100644 --- a/src/material/tree/tree.scss +++ b/src/material/tree/tree.scss @@ -9,7 +9,6 @@ $mat-node-height: 48px; align-items: center; min-height: $mat-node-height; flex: 1; - overflow: hidden; word-wrap: break-word; } From 992f7ee3563f5aa33778fbac40d6a7a1812678a3 Mon Sep 17 00:00:00 2001 From: zelliott Date: Thu, 9 Jan 2020 18:32:06 -0800 Subject: [PATCH 4/8] Some minor style changes. --- .../focus-indicator/_focus-indicator.scss | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/src/material/core/focus-indicator/_focus-indicator.scss b/src/material/core/focus-indicator/_focus-indicator.scss index 376cd32d58d7..6517a2098213 100644 --- a/src/material/core/focus-indicator/_focus-indicator.scss +++ b/src/material/core/focus-indicator/_focus-indicator.scss @@ -67,8 +67,9 @@ /// Mixin that sets the color of the focus indicators. /// /// @param {color|map} $themeOrMap -/// If theme, focus indicators are set to the primary color of the theme. If -/// color, focus indicators are set to that color. +/// If theme, focus indicators are colored on a best-effort basis using the +/// primary theme color and the currentColor. If color, focus indicators are +/// set to that color. /// /// @example /// .demo-dark-theme { @@ -83,37 +84,36 @@ @if (type-of($themeOrColor) == 'map') { $primary-palette: map_get($themeOrColor, primary); + // For most components, color the focus indicators with the primary theme + // color. .mat-focus-indicator::before { border-color: mat-color($primary-palette, default); } - .mat-toolbar { - &.mat-primary, - &.mat-accent, - &.mat-warn { - .mat-focus-indicator::before { - border-color: currentColor; - } - } - } + // For some components, color the focus indicators with the currentColor to + // ensure it is contrastive. + + // Primary/accent/warn toolbars. + .mat-toolbar.mat-primary, + .mat-toolbar.mat-accent, + .mat-toolbar.mat-warn, + + // Snack bars. + .mat-snack-bar-container, - .mat-snack-bar-container { + // Primary/accent/warn tabs. + .mat-tab-group.mat-background-primary, + .mat-tab-group.mat-background-accent, + .mat-tab-group.mat-background-warn, + .mat-tab-header.mat-background-primary, + .mat-tab-header.mat-background-accent, + .mat-tab-header.mat-background-warn { .mat-focus-indicator::before { border-color: currentColor; } } - - .mat-tab-group, - .mat-tab-header { - &.mat-background-primary, - &.mat-background-accent, - &.mat-background-warn { - .mat-focus-indicator::before { - border-color: currentColor; - } - } - } } @else { + // If a color is passed in, then just use that for all focus indicators. .mat-focus-indicator::before { border-color: $themeOrColor; } From c8599e3a68b090f06095e7ce215f242df644f5cd Mon Sep 17 00:00:00 2001 From: zelliott Date: Fri, 10 Jan 2020 12:17:22 -0800 Subject: [PATCH 5/8] Cleaned up focus indicator unit tests. --- .../button-toggle/button-toggle.spec.ts | 4 ++-- src/material/button/button.spec.ts | 14 ++++++------- src/material/checkbox/checkbox.spec.ts | 12 +++++------ src/material/chips/chip.spec.ts | 8 ++++---- .../focus-indicator/_focus-indicator.scss | 12 +++++------ src/material/core/option/option.spec.ts | 14 ++++++------- src/material/datepicker/calendar-body.spec.ts | 10 ++++------ src/material/expansion/expansion.spec.ts | 14 ++++++------- src/material/list/selection-list.spec.ts | 2 +- src/material/menu/menu.spec.ts | 20 +++++++++---------- src/material/radio/radio.spec.ts | 5 ++--- src/material/sort/sort.spec.ts | 6 +++--- src/material/stepper/stepper.spec.ts | 4 ++-- src/material/tabs/tab-group.spec.ts | 4 ++-- .../tabs/tab-nav-bar/tab-nav-bar.spec.ts | 4 ++-- 15 files changed, 64 insertions(+), 69 deletions(-) diff --git a/src/material/button-toggle/button-toggle.spec.ts b/src/material/button-toggle/button-toggle.spec.ts index b0a4d55f7711..a3f3aa0e23e4 100644 --- a/src/material/button-toggle/button-toggle.spec.ts +++ b/src/material/button-toggle/button-toggle.spec.ts @@ -882,9 +882,9 @@ describe('MatButtonToggle without forms', () => { it('should have a focus indicator', () => { const fixture = TestBed.createComponent(ButtonTogglesInsideButtonToggleGroup); - const buttonDebugElement = fixture.debugElement.query(By.css('button'))!; + const buttonNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('button')]; - expect(buttonDebugElement.nativeElement.classList.contains('mat-focus-indicator')).toBe(true); + expect(buttonNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); diff --git a/src/material/button/button.spec.ts b/src/material/button/button.spec.ts index 14bbd17aa543..a1e2a4e95aaf 100644 --- a/src/material/button/button.spec.ts +++ b/src/material/button/button.spec.ts @@ -83,13 +83,6 @@ describe('MatButton', () => { expect(buttonDebugEl.nativeElement.classList).toContain('cdk-touch-focused'); }); - it('should have a focus indicator', () => { - const fixture = TestBed.createComponent(TestApp); - const buttonDebugElement = fixture.debugElement.query(By.css('button'))!; - - expect(buttonDebugElement.nativeElement.classList.contains('mat-focus-indicator')).toBe(true); - }); - describe('button[mat-fab]', () => { it('should have accent palette by default', () => { const fixture = TestBed.createComponent(TestApp); @@ -277,6 +270,13 @@ describe('MatButton', () => { ); }); }); + + it('should have a focus indicator', () => { + const fixture = TestBed.createComponent(TestApp); + const buttonNativeElement = fixture.debugElement.query(By.css('button'))!.nativeElement; + + expect(buttonNativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); }); /** Test component that contains an MatButton. */ diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts index db045064b699..a92cefad0545 100644 --- a/src/material/checkbox/checkbox.spec.ts +++ b/src/material/checkbox/checkbox.spec.ts @@ -387,12 +387,6 @@ describe('MatCheckbox', () => { expect(checkboxNativeElement.querySelector('svg')!.getAttribute('focusable')).toBe('false'); }); - it('should have a focus indicator', () => { - const checkboxRippleNativeElement = checkboxNativeElement.querySelector('.mat-checkbox-ripple')!; - - expect(checkboxRippleNativeElement.classList.contains('mat-focus-indicator')).toBe(true); - }); - describe('ripple elements', () => { it('should show ripples on label mousedown', () => { @@ -679,6 +673,12 @@ describe('MatCheckbox', () => { expect(checkboxNativeElement.classList).toContain('mat-checkbox-indeterminate'); })); }); + + it('should have a focus indicator', () => { + const checkboxRippleNativeElement = checkboxNativeElement.querySelector('.mat-checkbox-ripple')!; + + expect(checkboxRippleNativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); }); describe('with change event and no initial value', () => { diff --git a/src/material/chips/chip.spec.ts b/src/material/chips/chip.spec.ts index 503ea34332e2..88af95665eb2 100644 --- a/src/material/chips/chip.spec.ts +++ b/src/material/chips/chip.spec.ts @@ -220,10 +220,6 @@ describe('MatChip', () => { expect(chipInstance.value).toBeNull(); }); - - it('should have a focus indicator', () => { - expect(chipNativeElement.classList.contains('mat-focus-indicator')).toBe(true); - }); }); describe('keyboard behavior', () => { @@ -395,6 +391,10 @@ describe('MatChip', () => { }); }); + + it('should have a focus indicator', () => { + expect(chipNativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); }); }); diff --git a/src/material/core/focus-indicator/_focus-indicator.scss b/src/material/core/focus-indicator/_focus-indicator.scss index 6517a2098213..f5a14a9b7c0d 100644 --- a/src/material/core/focus-indicator/_focus-indicator.scss +++ b/src/material/core/focus-indicator/_focus-indicator.scss @@ -93,11 +93,6 @@ // For some components, color the focus indicators with the currentColor to // ensure it is contrastive. - // Primary/accent/warn toolbars. - .mat-toolbar.mat-primary, - .mat-toolbar.mat-accent, - .mat-toolbar.mat-warn, - // Snack bars. .mat-snack-bar-container, @@ -107,7 +102,12 @@ .mat-tab-group.mat-background-warn, .mat-tab-header.mat-background-primary, .mat-tab-header.mat-background-accent, - .mat-tab-header.mat-background-warn { + .mat-tab-header.mat-background-warn, + + // Primary/accent/warn toolbars. + .mat-toolbar.mat-primary, + .mat-toolbar.mat-accent, + .mat-toolbar.mat-warn { .mat-focus-indicator::before { border-color: currentColor; } diff --git a/src/material/core/option/option.spec.ts b/src/material/core/option/option.spec.ts index 6923372c5df1..19c865803f0d 100644 --- a/src/material/core/option/option.spec.ts +++ b/src/material/core/option/option.spec.ts @@ -147,13 +147,6 @@ describe('MatOption component', () => { subscription.unsubscribe(); }); - it('should have a focus indicator', () => { - const fixture = TestBed.createComponent(BasicOption); - const optionDebugElement = fixture.debugElement.query(By.directive(MatOption))!; - - expect(optionDebugElement.nativeElement.classList.contains('mat-focus-indicator')).toBe(true); - }); - describe('ripples', () => { let fixture: ComponentFixture; let optionDebugElement: DebugElement; @@ -197,6 +190,13 @@ describe('MatOption component', () => { }); + it('should have a focus indicator', () => { + const fixture = TestBed.createComponent(BasicOption); + const optionNativeElement = fixture.debugElement.query(By.directive(MatOption))!.nativeElement; + + expect(optionNativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); + }); @Component({ diff --git a/src/material/datepicker/calendar-body.spec.ts b/src/material/datepicker/calendar-body.spec.ts index cd9ff180f2df..bab9c2ee204a 100644 --- a/src/material/datepicker/calendar-body.spec.ts +++ b/src/material/datepicker/calendar-body.spec.ts @@ -43,12 +43,6 @@ describe('MatCalendarBody', () => { refreshElementLists(); }); - it('should have a focus indicator', () => { - const firstBodyCell = calendarBodyNativeElement.querySelector('.mat-calendar-body-cell')!; - - expect(firstBodyCell.classList.contains('mat-focus-indicator')).toBe(true); - }); - it('creates body', () => { expect(rowEls.length).toBe(3); expect(labelEls.length).toBe(1); @@ -112,6 +106,10 @@ describe('MatCalendarBody', () => { expect(cellEls[1].classList).toContain('even'); }); + it('should have a focus indicator', () => { + expect(cellEls.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); + }); + }); }); diff --git a/src/material/expansion/expansion.spec.ts b/src/material/expansion/expansion.spec.ts index a009336635df..1daa4bb2c25e 100644 --- a/src/material/expansion/expansion.spec.ts +++ b/src/material/expansion/expansion.spec.ts @@ -345,13 +345,6 @@ describe('MatExpansionPanel', () => { expect(header.componentInstance.collapsedHeight).toBe('16px'); }); - it('should have a focus indicator', () => { - const fixture = TestBed.createComponent(PanelWithContent); - const header = fixture.debugElement.query(By.directive(MatExpansionPanelHeader))!; - - expect(header.nativeElement.classList.contains('mat-focus-indicator')).toBe(true); - }); - describe('disabled state', () => { let fixture: ComponentFixture; let panel: HTMLElement; @@ -411,6 +404,13 @@ describe('MatExpansionPanel', () => { }); }); + + it('should have a focus indicator', () => { + const fixture = TestBed.createComponent(PanelWithContent); + const headerNativeElement = fixture.debugElement.query(By.directive(MatExpansionPanelHeader))!.nativeElement; + + expect(headerNativeElement.classList.contains('mat-focus-indicator')).toBe(true); + }); }); diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts index 82fc3f67c1cf..10ee6d0723b7 100644 --- a/src/material/list/selection-list.spec.ts +++ b/src/material/list/selection-list.spec.ts @@ -653,7 +653,7 @@ describe('MatSelectionList without forms', () => { it('should have a focus indicator', () => { const optionNativeElements = listOptions.map(option => option.nativeElement); - expect(optionNativeElements.every(option => option.classList.contains('mat-focus-indicator'))) + expect(optionNativeElements.every(element => element.classList.contains('mat-focus-indicator'))) .toBe(true); }); diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts index bf6338454bb3..aa94a351465d 100644 --- a/src/material/menu/menu.spec.ts +++ b/src/material/menu/menu.spec.ts @@ -812,17 +812,6 @@ describe('MatMenu', () => { expect(document.activeElement).toBe(overlayContainerElement.querySelector('.mat-menu-panel')); })); - it('should have a focus indicator', () => { - const fixture = createComponent(SimpleMenu, [], [FakeIcon]); - fixture.detectChanges(); - fixture.componentInstance.trigger.openMenu(); - fixture.detectChanges(); - - const items = Array.from(overlayContainerElement.querySelectorAll('.mat-menu-item')); - - expect(items.every(item => item.classList.contains('mat-focus-indicator'))).toBe(true); - }); - describe('lazy rendering', () => { it('should be able to render the menu content lazily', fakeAsync(() => { const fixture = createComponent(SimpleLazyMenu); @@ -2127,6 +2116,15 @@ describe('MatMenu', () => { }); + it('should have a focus indicator', () => { + const fixture = createComponent(SimpleMenu, [], [FakeIcon]); + fixture.detectChanges(); + fixture.componentInstance.trigger.openMenu(); + fixture.detectChanges(); + const menuItemNativeElements = Array.from(overlayContainerElement.querySelectorAll('.mat-menu-item')); + + expect(menuItemNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); + }); }); describe('MatMenu default overrides', () => { diff --git a/src/material/radio/radio.spec.ts b/src/material/radio/radio.spec.ts index 9ea0a3c8f78f..a70e69a754b8 100644 --- a/src/material/radio/radio.spec.ts +++ b/src/material/radio/radio.spec.ts @@ -388,10 +388,9 @@ describe('MatRadio', () => { }); it('should have a focus indicator', () => { - const radioRippleNativeElements = radioNativeElements.map(radioEl => radioEl.querySelector('.mat-radio-ripple')!); + const radioRippleNativeElements = radioNativeElements.map(element => element.querySelector('.mat-radio-ripple')!); - expect(radioRippleNativeElements.every(radioRippleEl => radioRippleEl.classList.contains('mat-focus-indicator'))) - .toBe(true); + expect(radioRippleNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); diff --git a/src/material/sort/sort.spec.ts b/src/material/sort/sort.spec.ts index 3d8240409e9c..b3d57fc3736f 100644 --- a/src/material/sort/sort.spec.ts +++ b/src/material/sort/sort.spec.ts @@ -410,10 +410,10 @@ describe('MatSort', () => { })); it('should have a focus indicator', () => { - const header = fixture.debugElement.query(By.directive(MatSortHeader))!.nativeElement; - const button = header.querySelector('.mat-sort-header-button'); + const headerNativeElement = fixture.debugElement.query(By.directive(MatSortHeader))!.nativeElement; + const buttonNativeElement = headerNativeElement.querySelector('.mat-sort-header-button'); - expect(button.classList.contains('mat-focus-indicator')).toBe(true); + expect(buttonNativeElement.classList.contains('mat-focus-indicator')).toBe(true); }); }); diff --git a/src/material/stepper/stepper.spec.ts b/src/material/stepper/stepper.spec.ts index 0bb6bff40f43..224a17bc7b7e 100644 --- a/src/material/stepper/stepper.spec.ts +++ b/src/material/stepper/stepper.spec.ts @@ -395,9 +395,9 @@ describe('MatStepper', () => { }); it('should have a focus indicator', () => { - const stepHeaders = fixture.debugElement.queryAll(By.css('.mat-vertical-stepper-header')); + const stepHeaderNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('.mat-vertical-stepper-header')]; - expect(stepHeaders.every(stepHeader => stepHeader.nativeElement.classList.contains('mat-focus-indicator'))) + expect(stepHeaderNativeElements.every(element => element.classList.contains('mat-focus-indicator'))) .toBe(true); }); diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts index 6098393844ed..3699b9f63420 100644 --- a/src/material/tabs/tab-group.spec.ts +++ b/src/material/tabs/tab-group.spec.ts @@ -292,9 +292,9 @@ describe('MatTabGroup', () => { }); it('should have a focus indicator', () => { - const tabLabels = fixture.debugElement.queryAll(By.css('.mat-tab-label')); + const tabLabelNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-label')]; - expect(tabLabels.every(tabLabel => tabLabel.nativeElement.classList.contains('mat-focus-indicator'))) + expect(tabLabelNativeElements.every(element => element.classList.contains('mat-focus-indicator'))) .toBe(true); }); }); diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts index f1d4a0c73a92..d399f534be75 100644 --- a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts @@ -335,9 +335,9 @@ describe('MatTabNavBar', () => { }); it('should have a focus indicator', () => { - const tabLink = fixture.debugElement.nativeElement.querySelector('.mat-tab-link'); + const tabLinkNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-link')]; - expect(tabLink.classList.contains('mat-focus-indicator')).toBe(true); + expect(tabLinkNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); }); From 1e6e853ab35ae4150ded783d4ce01a70410f855e Mon Sep 17 00:00:00 2001 From: zelliott Date: Fri, 10 Jan 2020 12:37:47 -0800 Subject: [PATCH 6/8] Some more minor unit test formatting changes, undo coloring changes for now. --- src/material/button/button.spec.ts | 2 +- .../focus-indicator/_focus-indicator.scss | 46 +++---------------- src/material/list/selection-list.spec.ts | 3 +- src/material/stepper/stepper.spec.ts | 3 +- src/material/tabs/tab-group.spec.ts | 3 +- 5 files changed, 11 insertions(+), 46 deletions(-) diff --git a/src/material/button/button.spec.ts b/src/material/button/button.spec.ts index a1e2a4e95aaf..09fe3f0cb402 100644 --- a/src/material/button/button.spec.ts +++ b/src/material/button/button.spec.ts @@ -273,7 +273,7 @@ describe('MatButton', () => { it('should have a focus indicator', () => { const fixture = TestBed.createComponent(TestApp); - const buttonNativeElement = fixture.debugElement.query(By.css('button'))!.nativeElement; + const buttonNativeElement = fixture.debugElement.nativeElement.querySelector('button'); expect(buttonNativeElement.classList.contains('mat-focus-indicator')).toBe(true); }); diff --git a/src/material/core/focus-indicator/_focus-indicator.scss b/src/material/core/focus-indicator/_focus-indicator.scss index f5a14a9b7c0d..4ce5a8c0e4ac 100644 --- a/src/material/core/focus-indicator/_focus-indicator.scss +++ b/src/material/core/focus-indicator/_focus-indicator.scss @@ -67,9 +67,8 @@ /// Mixin that sets the color of the focus indicators. /// /// @param {color|map} $themeOrMap -/// If theme, focus indicators are colored on a best-effort basis using the -/// primary theme color and the currentColor. If color, focus indicators are -/// set to that color. +/// If theme, focus indicators are set to the primary color of the theme. If +/// color, focus indicators are set to that color. /// /// @example /// .demo-dark-theme { @@ -81,41 +80,10 @@ /// @include mat-strong-focus-indicators-theme(#F00); /// } @mixin mat-strong-focus-indicators-theme($themeOrColor) { - @if (type-of($themeOrColor) == 'map') { - $primary-palette: map_get($themeOrColor, primary); - - // For most components, color the focus indicators with the primary theme - // color. - .mat-focus-indicator::before { - border-color: mat-color($primary-palette, default); - } - - // For some components, color the focus indicators with the currentColor to - // ensure it is contrastive. - - // Snack bars. - .mat-snack-bar-container, - - // Primary/accent/warn tabs. - .mat-tab-group.mat-background-primary, - .mat-tab-group.mat-background-accent, - .mat-tab-group.mat-background-warn, - .mat-tab-header.mat-background-primary, - .mat-tab-header.mat-background-accent, - .mat-tab-header.mat-background-warn, - - // Primary/accent/warn toolbars. - .mat-toolbar.mat-primary, - .mat-toolbar.mat-accent, - .mat-toolbar.mat-warn { - .mat-focus-indicator::before { - border-color: currentColor; - } - } - } @else { - // If a color is passed in, then just use that for all focus indicators. - .mat-focus-indicator::before { - border-color: $themeOrColor; - } + .mat-focus-indicator::before { + border-color: if( + type-of($themeOrColor) == 'map', + mat-color(map_get($themeOrColor, primary)), + $themeOrColor); } } diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts index 10ee6d0723b7..47384a6fcd0e 100644 --- a/src/material/list/selection-list.spec.ts +++ b/src/material/list/selection-list.spec.ts @@ -653,8 +653,7 @@ describe('MatSelectionList without forms', () => { it('should have a focus indicator', () => { const optionNativeElements = listOptions.map(option => option.nativeElement); - expect(optionNativeElements.every(element => element.classList.contains('mat-focus-indicator'))) - .toBe(true); + expect(optionNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); diff --git a/src/material/stepper/stepper.spec.ts b/src/material/stepper/stepper.spec.ts index 224a17bc7b7e..80e6f2578d6e 100644 --- a/src/material/stepper/stepper.spec.ts +++ b/src/material/stepper/stepper.spec.ts @@ -397,8 +397,7 @@ describe('MatStepper', () => { it('should have a focus indicator', () => { const stepHeaderNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('.mat-vertical-stepper-header')]; - expect(stepHeaderNativeElements.every(element => element.classList.contains('mat-focus-indicator'))) - .toBe(true); + expect(stepHeaderNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts index 3699b9f63420..cf6fdcf119aa 100644 --- a/src/material/tabs/tab-group.spec.ts +++ b/src/material/tabs/tab-group.spec.ts @@ -294,8 +294,7 @@ describe('MatTabGroup', () => { it('should have a focus indicator', () => { const tabLabelNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-label')]; - expect(tabLabelNativeElements.every(element => element.classList.contains('mat-focus-indicator'))) - .toBe(true); + expect(tabLabelNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); From a7d30225957eb386115c297f52c874e0bb887045 Mon Sep 17 00:00:00 2001 From: zelliott Date: Fri, 10 Jan 2020 12:50:47 -0800 Subject: [PATCH 7/8] Fixed formatting. --- src/material/button-toggle/button-toggle.spec.ts | 3 ++- src/material/checkbox/checkbox.spec.ts | 3 ++- src/material/datepicker/calendar-body.spec.ts | 3 ++- src/material/expansion/expansion.spec.ts | 3 ++- src/material/list/selection-list.spec.ts | 3 ++- src/material/menu/menu.spec.ts | 6 ++++-- src/material/radio/radio.spec.ts | 6 ++++-- src/material/slide-toggle/slide-toggle.spec.ts | 3 ++- src/material/sort/sort.spec.ts | 3 ++- src/material/stepper/stepper.spec.ts | 6 ++++-- src/material/tabs/tab-group.spec.ts | 6 ++++-- src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts | 6 ++++-- 12 files changed, 34 insertions(+), 17 deletions(-) diff --git a/src/material/button-toggle/button-toggle.spec.ts b/src/material/button-toggle/button-toggle.spec.ts index a3f3aa0e23e4..73591835dea5 100644 --- a/src/material/button-toggle/button-toggle.spec.ts +++ b/src/material/button-toggle/button-toggle.spec.ts @@ -884,7 +884,8 @@ describe('MatButtonToggle without forms', () => { const fixture = TestBed.createComponent(ButtonTogglesInsideButtonToggleGroup); const buttonNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('button')]; - expect(buttonNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); + expect(buttonNativeElements.every(element => element.classList.contains('mat-focus-indicator'))) + .toBe(true); }); }); diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts index a92cefad0545..8e97409eb690 100644 --- a/src/material/checkbox/checkbox.spec.ts +++ b/src/material/checkbox/checkbox.spec.ts @@ -675,7 +675,8 @@ describe('MatCheckbox', () => { }); it('should have a focus indicator', () => { - const checkboxRippleNativeElement = checkboxNativeElement.querySelector('.mat-checkbox-ripple')!; + const checkboxRippleNativeElement = + checkboxNativeElement.querySelector('.mat-checkbox-ripple')!; expect(checkboxRippleNativeElement.classList.contains('mat-focus-indicator')).toBe(true); }); diff --git a/src/material/datepicker/calendar-body.spec.ts b/src/material/datepicker/calendar-body.spec.ts index bab9c2ee204a..d9701482c513 100644 --- a/src/material/datepicker/calendar-body.spec.ts +++ b/src/material/datepicker/calendar-body.spec.ts @@ -107,7 +107,8 @@ describe('MatCalendarBody', () => { }); it('should have a focus indicator', () => { - expect(cellEls.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); + expect(cellEls.every(element => element.classList.contains('mat-focus-indicator'))) + .toBe(true); }); }); diff --git a/src/material/expansion/expansion.spec.ts b/src/material/expansion/expansion.spec.ts index 1daa4bb2c25e..78a9e16890b0 100644 --- a/src/material/expansion/expansion.spec.ts +++ b/src/material/expansion/expansion.spec.ts @@ -407,7 +407,8 @@ describe('MatExpansionPanel', () => { it('should have a focus indicator', () => { const fixture = TestBed.createComponent(PanelWithContent); - const headerNativeElement = fixture.debugElement.query(By.directive(MatExpansionPanelHeader))!.nativeElement; + const headerNativeElement = + fixture.debugElement.query(By.directive(MatExpansionPanelHeader))!.nativeElement; expect(headerNativeElement.classList.contains('mat-focus-indicator')).toBe(true); }); diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts index 47384a6fcd0e..72cc551472c4 100644 --- a/src/material/list/selection-list.spec.ts +++ b/src/material/list/selection-list.spec.ts @@ -653,7 +653,8 @@ describe('MatSelectionList without forms', () => { it('should have a focus indicator', () => { const optionNativeElements = listOptions.map(option => option.nativeElement); - expect(optionNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); + expect(optionNativeElements + .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); diff --git a/src/material/menu/menu.spec.ts b/src/material/menu/menu.spec.ts index aa94a351465d..dff5ca765e44 100644 --- a/src/material/menu/menu.spec.ts +++ b/src/material/menu/menu.spec.ts @@ -2121,9 +2121,11 @@ describe('MatMenu', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openMenu(); fixture.detectChanges(); - const menuItemNativeElements = Array.from(overlayContainerElement.querySelectorAll('.mat-menu-item')); + const menuItemNativeElements = + Array.from(overlayContainerElement.querySelectorAll('.mat-menu-item')); - expect(menuItemNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); + expect(menuItemNativeElements + .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); diff --git a/src/material/radio/radio.spec.ts b/src/material/radio/radio.spec.ts index a70e69a754b8..ae1698625119 100644 --- a/src/material/radio/radio.spec.ts +++ b/src/material/radio/radio.spec.ts @@ -388,9 +388,11 @@ describe('MatRadio', () => { }); it('should have a focus indicator', () => { - const radioRippleNativeElements = radioNativeElements.map(element => element.querySelector('.mat-radio-ripple')!); + const radioRippleNativeElements = + radioNativeElements.map(element => element.querySelector('.mat-radio-ripple')!); - expect(radioRippleNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); + expect(radioRippleNativeElements + .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); diff --git a/src/material/slide-toggle/slide-toggle.spec.ts b/src/material/slide-toggle/slide-toggle.spec.ts index be9b7ecf7788..3bc6bf0e9192 100644 --- a/src/material/slide-toggle/slide-toggle.spec.ts +++ b/src/material/slide-toggle/slide-toggle.spec.ts @@ -344,7 +344,8 @@ describe('MatSlideToggle without forms', () => { }); it('should have a focus indicator', () => { - const slideToggleRippleNativeElement = slideToggleElement.querySelector('.mat-slide-toggle-ripple')!; + const slideToggleRippleNativeElement = + slideToggleElement.querySelector('.mat-slide-toggle-ripple')!; expect(slideToggleRippleNativeElement.classList.contains('mat-focus-indicator')).toBe(true); }); diff --git a/src/material/sort/sort.spec.ts b/src/material/sort/sort.spec.ts index b3d57fc3736f..0e2cedc854ba 100644 --- a/src/material/sort/sort.spec.ts +++ b/src/material/sort/sort.spec.ts @@ -410,7 +410,8 @@ describe('MatSort', () => { })); it('should have a focus indicator', () => { - const headerNativeElement = fixture.debugElement.query(By.directive(MatSortHeader))!.nativeElement; + const headerNativeElement = + fixture.debugElement.query(By.directive(MatSortHeader))!.nativeElement; const buttonNativeElement = headerNativeElement.querySelector('.mat-sort-header-button'); expect(buttonNativeElement.classList.contains('mat-focus-indicator')).toBe(true); diff --git a/src/material/stepper/stepper.spec.ts b/src/material/stepper/stepper.spec.ts index 80e6f2578d6e..54c3bf37e6f8 100644 --- a/src/material/stepper/stepper.spec.ts +++ b/src/material/stepper/stepper.spec.ts @@ -395,9 +395,11 @@ describe('MatStepper', () => { }); it('should have a focus indicator', () => { - const stepHeaderNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('.mat-vertical-stepper-header')]; + const stepHeaderNativeElements = + [...fixture.debugElement.nativeElement.querySelectorAll('.mat-vertical-stepper-header')]; - expect(stepHeaderNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); + expect(stepHeaderNativeElements + .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts index cf6fdcf119aa..a7427e0399a0 100644 --- a/src/material/tabs/tab-group.spec.ts +++ b/src/material/tabs/tab-group.spec.ts @@ -292,9 +292,11 @@ describe('MatTabGroup', () => { }); it('should have a focus indicator', () => { - const tabLabelNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-label')]; + const tabLabelNativeElements = + [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-label')]; - expect(tabLabelNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); + expect(tabLabelNativeElements + .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts index d399f534be75..5e1ea4e96172 100644 --- a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts @@ -335,9 +335,11 @@ describe('MatTabNavBar', () => { }); it('should have a focus indicator', () => { - const tabLinkNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-link')]; + const tabLinkNativeElements = + [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-link')]; - expect(tabLinkNativeElements.every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); + expect(tabLinkNativeElements + .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); }); }); }); From eaa68a13d37281b272c6eee1d8f9eb8f437feec7 Mon Sep 17 00:00:00 2001 From: zelliott Date: Fri, 10 Jan 2020 12:56:05 -0800 Subject: [PATCH 8/8] Fixed final linter error. --- src/material/tabs/tab-group.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts index a7427e0399a0..db724031e912 100644 --- a/src/material/tabs/tab-group.spec.ts +++ b/src/material/tabs/tab-group.spec.ts @@ -295,8 +295,8 @@ describe('MatTabGroup', () => { const tabLabelNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-label')]; - expect(tabLabelNativeElements - .every(element => element.classList.contains('mat-focus-indicator'))).toBe(true); + expect(tabLabelNativeElements.every(el => el.classList.contains('mat-focus-indicator'))) + .toBe(true); }); });