diff --git a/src/material/button-toggle/button-toggle.spec.ts b/src/material/button-toggle/button-toggle.spec.ts index 5f126db22777..73591835dea5 100644 --- a/src/material/button-toggle/button-toggle.spec.ts +++ b/src/material/button-toggle/button-toggle.spec.ts @@ -880,6 +880,14 @@ describe('MatButtonToggle without forms', () => { }).not.toThrow(); }); + it('should have a focus indicator', () => { + const fixture = TestBed.createComponent(ButtonTogglesInsideButtonToggleGroup); + const buttonNativeElements = [...fixture.debugElement.nativeElement.querySelectorAll('button')]; + + expect(buttonNativeElements.every(element => element.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..09fe3f0cb402 100644 --- a/src/material/button/button.spec.ts +++ b/src/material/button/button.spec.ts @@ -270,6 +270,13 @@ describe('MatButton', () => { ); }); }); + + it('should have a focus indicator', () => { + const fixture = TestBed.createComponent(TestApp); + const buttonNativeElement = fixture.debugElement.nativeElement.querySelector('button'); + + 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 25de60bae73b..8e97409eb690 100644 --- a/src/material/checkbox/checkbox.spec.ts +++ b/src/material/checkbox/checkbox.spec.ts @@ -673,6 +673,13 @@ 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 bb1ab9368b51..88af95665eb2 100644 --- a/src/material/chips/chip.spec.ts +++ b/src/material/chips/chip.spec.ts @@ -391,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/option/option.spec.ts b/src/material/core/option/option.spec.ts index 008a1758cca7..19c865803f0d 100644 --- a/src/material/core/option/option.spec.ts +++ b/src/material/core/option/option.spec.ts @@ -190,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 f3f874851691..d9701482c513 100644 --- a/src/material/datepicker/calendar-body.spec.ts +++ b/src/material/datepicker/calendar-body.spec.ts @@ -106,6 +106,11 @@ 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 0d1e2b5300e4..78a9e16890b0 100644 --- a/src/material/expansion/expansion.spec.ts +++ b/src/material/expansion/expansion.spec.ts @@ -404,6 +404,14 @@ 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/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..72cc551472c4 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(element => element.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..dff5ca765e44 100644 --- a/src/material/menu/menu.spec.ts +++ b/src/material/menu/menu.spec.ts @@ -2116,6 +2116,17 @@ 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 c9c8421415a7..ae1698625119 100644 --- a/src/material/radio/radio.spec.ts +++ b/src/material/radio/radio.spec.ts @@ -387,6 +387,14 @@ describe('MatRadio', () => { expect(radioNativeElements[2].classList).toContain('mat-warn'); }); + it('should have a focus indicator', () => { + const radioRippleNativeElements = + radioNativeElements.map(element => element.querySelector('.mat-radio-ripple')!); + + expect(radioRippleNativeElements + .every(element => element.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..3bc6bf0e9192 100644 --- a/src/material/slide-toggle/slide-toggle.spec.ts +++ b/src/material/slide-toggle/slide-toggle.spec.ts @@ -342,6 +342,13 @@ 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..0e2cedc854ba 100644 --- a/src/material/sort/sort.spec.ts +++ b/src/material/sort/sort.spec.ts @@ -409,6 +409,14 @@ describe('MatSort', () => { expect(sortHeaderElement.querySelector('.mat-sort-header-arrow')).toBeTruthy(); })); + it('should have a focus indicator', () => { + 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 686b669e5c27..54c3bf37e6f8 100644 --- a/src/material/stepper/stepper.spec.ts +++ b/src/material/stepper/stepper.spec.ts @@ -394,6 +394,14 @@ describe('MatStepper', () => { expect(secondStepContentEl.getAttribute('tabindex')).toBe('0'); }); + 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); + }); + }); 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..db724031e912 100644 --- a/src/material/tabs/tab-group.spec.ts +++ b/src/material/tabs/tab-group.spec.ts @@ -291,6 +291,13 @@ describe('MatTabGroup', () => { subscription.unsubscribe(); }); + it('should have a focus indicator', () => { + const tabLabelNativeElements = + [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-label')]; + + expect(tabLabelNativeElements.every(el => el.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..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 @@ -333,6 +333,14 @@ 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 tabLinkNativeElements = + [...fixture.debugElement.nativeElement.querySelectorAll('.mat-tab-link')]; + + expect(tabLinkNativeElements + .every(element => element.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; }