fix(sort): no focus indication for active header

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';
@@ -138,7 +140,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
@@ -163,6 +171,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() {
@@ -179,6 +194,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;