File tree 4 files changed +30
-1
lines changed
tools/public_api_guard/material
4 files changed +30
-1
lines changed Original file line number Diff line number Diff line change 17
17
[class.mat-tab-label-active] ="selectedIndex == i "
18
18
[disabled] ="tab.disabled "
19
19
[matRippleDisabled] ="tab.disabled || disableRipple "
20
- (click) ="_handleClick(tab, tabHeader, i) ">
20
+ (click) ="_handleClick(tab, tabHeader, i) "
21
+ (cdkFocusChange) ="_tabFocusChanged($event, i) ">
21
22
22
23
23
24
< div class ="mat-tab-label-content ">
Original file line number Diff line number Diff line change @@ -298,6 +298,25 @@ describe('MatTabGroup', () => {
298
298
expect ( tabLabelNativeElements . every ( el => el . classList . contains ( 'mat-focus-indicator' ) ) )
299
299
. toBe ( true ) ;
300
300
} ) ;
301
+
302
+ it ( 'should emit focusChange when a tab receives focus' , ( ) => {
303
+ spyOn ( fixture . componentInstance , 'handleFocus' ) ;
304
+ fixture . detectChanges ( ) ;
305
+
306
+ const tabLabels = fixture . debugElement . queryAll ( By . css ( '.mat-tab-label' ) ) ;
307
+
308
+ expect ( fixture . componentInstance . handleFocus ) . toHaveBeenCalledTimes ( 0 ) ;
309
+
310
+ // In order to verify that the `focusChange` event also fires with the correct
311
+ // index, we focus the second tab before testing the keyboard navigation.
312
+ dispatchFakeEvent ( tabLabels [ 1 ] . nativeElement , 'focus' ) ;
313
+ fixture . detectChanges ( ) ;
314
+
315
+ expect ( fixture . componentInstance . handleFocus ) . toHaveBeenCalledTimes ( 1 ) ;
316
+ expect ( fixture . componentInstance . handleFocus )
317
+ . toHaveBeenCalledWith ( jasmine . objectContaining ( { index : 1 } ) ) ;
318
+ } ) ;
319
+
301
320
} ) ;
302
321
303
322
describe ( 'aria labelling' , ( ) => {
Original file line number Diff line number Diff line change @@ -31,6 +31,7 @@ import {
31
31
ViewChild ,
32
32
ViewEncapsulation ,
33
33
} from '@angular/core' ;
34
+ import { FocusOrigin } from '@angular/cdk/a11y' ;
34
35
import {
35
36
CanColor ,
36
37
CanColorCtor ,
@@ -373,6 +374,13 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
373
374
return this . selectedIndex === idx ? 0 : - 1 ;
374
375
}
375
376
377
+ /** Callback for when the focused state of a tab has changed. */
378
+ _tabFocusChanged ( focusOrigin : FocusOrigin , index : number ) {
379
+ if ( focusOrigin ) {
380
+ this . _tabHeader . focusIndex = index ;
381
+ }
382
+ }
383
+
376
384
static ngAcceptInputType_dynamicHeight : BooleanInput ;
377
385
static ngAcceptInputType_animationDuration : NumberInput ;
378
386
static ngAcceptInputType_selectedIndex : NumberInput ;
Original file line number Diff line number Diff line change @@ -58,6 +58,7 @@ export declare abstract class _MatTabGroupBase extends _MatTabGroupMixinBase imp
58
58
_handleClick ( tab : MatTab , tabHeader : MatTabGroupBaseHeader , index : number ) : void ;
59
59
_removeTabBodyWrapperHeight ( ) : void ;
60
60
_setTabBodyWrapperHeight ( tabHeight : number ) : void ;
61
+ _tabFocusChanged ( focusOrigin : FocusOrigin , index : number ) : void ;
61
62
ngAfterContentChecked ( ) : void ;
62
63
ngAfterContentInit ( ) : void ;
63
64
ngOnDestroy ( ) : void ;
You can’t perform that action at this time.
0 commit comments