fix(sort): no focus indication for active header (#17735)

Currently we rely on the arrow being toggled as focus indication in the sort header, but if the header is active, the arrow will always be visible so the user won't have a way of telling where focus is. These changes add an outline around the text for keyboard and programmatic focus.

Fixes #17716.

Author: crisbeto

src/material/sort/BUILD.bazel

@@ -19,6 +19,7 @@ ng_module(
     assets = [":sort-header.css"] + glob(["**/*.html"]),
     module_name = "@angular/material/sort",
     deps = [
+        "//src/cdk/a11y",
         "//src/cdk/coercion",
         "//src/material/core",
         "@npm//@angular/animations",

src/material/sort/sort-header.html

@@ -3,9 +3,7 @@
      [class.mat-sort-header-position-before]="arrowPosition == 'before'">
   <button class="mat-sort-header-button" type="button"
           [attr.disabled]="_isDisabled() || null"
-          [attr.aria-label]="_intl.sortButtonLabel(id)"
-          (focus)="_setIndicatorHintVisible(true)"
-          (blur)="_setIndicatorHintVisible(false)">
+          [attr.aria-label]="_intl.sortButtonLabel(id)">
     <ng-content></ng-content>
   </button>
 

src/material/sort/sort-header.scss

@@ -32,6 +32,13 @@ $mat-sort-header-arrow-hint-opacity: 0.38;
   font: inherit;
   color: currentColor;
 
+  // Usually we could rely on the arrow showing up to be focus indication, but if a header is
+  // active, the arrow will always be shown so the user has no way of telling the difference.
+  [mat-sort-header].cdk-keyboard-focused &,
+  [mat-sort-header].cdk-program-focused & {
+    border-bottom: solid 1px currentColor;
+  }
+
   // The `outline: 0` from above works on all browsers, however Firefox also
   // adds a special `focus-inner` which we have to disable explicitly. See:
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Firefox

src/material/sort/sort-header.ts

@@ -17,8 +17,10 @@ import {
   Optional,
   ViewEncapsulation,
   Inject,
+  ElementRef,
 } from '@angular/core';
 import {CanDisable, CanDisableCtor, mixinDisabled} from '@angular/material/core';
+import {FocusMonitor} from '@angular/cdk/a11y';
 import {merge, Subscription} from 'rxjs';
 import {MatSort, MatSortable} from './sort';
 import {matSortAnimations} from './sort-animations';
@@ -139,7 +141,13 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
               changeDetectorRef: ChangeDetectorRef,
               @Optional() public _sort: MatSort,
               @Inject('MAT_SORT_HEADER_COLUMN_DEF') @Optional()
-                  public _columnDef: MatSortHeaderColumnDef) {
+                  public _columnDef: MatSortHeaderColumnDef,
+              /**
+               * @deprecated _focusMonitor and _elementRef to become required parameters.
+               * @breaking-change 10.0.0
+               */
+              private _focusMonitor?: FocusMonitor,
+              private _elementRef?: ElementRef<HTMLElement>) {
     // Note that we use a string token for the `_columnDef`, because the value is provided both by
     // `material/table` and `cdk/table` and we can't have the CDK depending on Material,
     // and we want to avoid having the sort header depending on the CDK table because
@@ -164,6 +172,13 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
 
           changeDetectorRef.markForCheck();
         });
+
+    if (_focusMonitor && _elementRef) {
+      // We use the focus monitor because we also want to style
+      // things differently based on the focus origin.
+      _focusMonitor.monitor(_elementRef, true)
+          .subscribe(origin => this._setIndicatorHintVisible(!!origin));
+    }
   }
 
   ngOnInit() {
@@ -180,6 +195,11 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
   }
 
   ngOnDestroy() {
+    // @breaking-change 10.0.0 Remove null check for _focusMonitor and _elementRef.
+    if (this._focusMonitor && this._elementRef) {
+      this._focusMonitor.stopMonitoring(this._elementRef);
+    }
+
     this._sort.deregister(this);
     this._rerenderSubscription.unsubscribe();
   }

tools/public_api_guard/material/sort.d.ts

@@ -61,7 +61,8 @@ export declare class MatSortHeader extends _MatSortHeaderMixinBase implements Ca
     disableClear: boolean;
     id: string;
     start: 'asc' | 'desc';
-    constructor(_intl: MatSortHeaderIntl, changeDetectorRef: ChangeDetectorRef, _sort: MatSort, _columnDef: MatSortHeaderColumnDef);
+    constructor(_intl: MatSortHeaderIntl, changeDetectorRef: ChangeDetectorRef, _sort: MatSort, _columnDef: MatSortHeaderColumnDef,
+    _focusMonitor?: FocusMonitor | undefined, _elementRef?: ElementRef<HTMLElement> | undefined);
     _getAriaSortAttribute(): "ascending" | "descending" | null;
     _getArrowDirectionState(): string;
     _getArrowViewState(): string;