From 8d64c2edf9231ab1ad67625c40b9f7de5ac16e2a Mon Sep 17 00:00:00 2001 From: Alexandru Georoceanu Date: Tue, 16 May 2023 10:24:17 +0300 Subject: [PATCH] feat(a11y): add tabIndex to matIcons with matTooltips --- .../ui-auto-accessible-label.directive.ts | 25 +++++++++++++++---- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.ts b/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.ts index a3905d09a..5a482373f 100644 --- a/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.ts +++ b/projects/angular/a11y/src/ui-auto-accessible-label/ui-auto-accessible-label.directive.ts @@ -3,7 +3,9 @@ import { ElementRef, HostBinding, Input, + OnChanges, Optional, + SimpleChanges, } from '@angular/core'; import { MatTooltip } from '@angular/material/tooltip'; @@ -23,19 +25,32 @@ You can disable this directive using the boolean ${DISABLE_AUTO_ACCESSIBLE_LABEL selector: ` [mat-fab]:not([${DISABLE_AUTO_ACCESSIBLE_LABEL_ATTRIBUTE}]), [mat-mini-fab]:not([${DISABLE_AUTO_ACCESSIBLE_LABEL_ATTRIBUTE}]), [mat-icon-button]:not([${DISABLE_AUTO_ACCESSIBLE_LABEL_ATTRIBUTE}]), - mat-icon[tabindex]:not([${DISABLE_AUTO_ACCESSIBLE_LABEL_ATTRIBUTE}])`, + mat-icon:not([${DISABLE_AUTO_ACCESSIBLE_LABEL_ATTRIBUTE}])`, }) -export class UiAutoAccessibleLabelDirective { +export class UiAutoAccessibleLabelDirective implements OnChanges { @HostBinding('attr.aria-label') @Input() matTooltip?: string; constructor( - elementRef: ElementRef, + private _elementRef: ElementRef, @Optional() tooltip?: MatTooltip, ) { - if (!tooltip) { - console.warn(MAT_TOOLTIP_MISSING_WARNING, elementRef.nativeElement); + if (!tooltip && _elementRef.nativeElement.tabIndex !== -1) { + console.warn(MAT_TOOLTIP_MISSING_WARNING, _elementRef.nativeElement); + } + } + + ngOnChanges(changes: SimpleChanges) { + if (changes.matTooltip) { + const element = this._elementRef.nativeElement; + if ( + element.tagName === 'MAT-ICON' + && !!changes.matTooltip.currentValue + && element.tabIndex === -1 + ) { + element.tabIndex = 0; + } } } }