fix(top-bar-navigation): Highlight top bar actions with keyboard focus.

Fixes #692

libs/barista-components/top-bar-navigation/src/top-bar-navigation.scss

@@ -40,6 +40,7 @@ $space: 12px;
   );
   @include dt-interactive-reset();
   @include dt-text-ellipsis();
+  @include dt-cdkmonitor-focus-style();
   box-sizing: border-box;
   display: flex;
   align-items: center;

libs/barista-components/top-bar-navigation/src/top-bar-navigation.spec.ts

@@ -103,6 +103,17 @@ describe('DtTopBarNavigation', () => {
 
       expect(nav.getAttribute('aria-label')).toBe('Main');
     });
+
+    it('should be highlighted when focused', () => {
+      const fixture = TestBed.createComponent(TopBarWithAction);
+      fixture.detectChanges();
+
+      const button: HTMLElement = fixture.debugElement.query(By.css('button'))
+        .nativeElement;
+      button.focus();
+
+      expect(button.classList).toContain('cdk-program-focused');
+    });
   });
 });
 

libs/barista-components/top-bar-navigation/src/top-bar-navigation.ts

@@ -14,13 +14,16 @@
  * limitations under the License.
  */
 
+import { FocusMonitor } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import {
   ChangeDetectionStrategy,
   Component,
   Directive,
   Input,
   ViewEncapsulation,
+  ElementRef,
+  OnDestroy,
 } from '@angular/core';
 
 /**
@@ -83,7 +86,7 @@ export class DtTopBarNavigationItem {
     '[class.dt-top-bar-action-has-problem]': 'hasProblem',
   },
 })
-export class DtTopBarAction {
+export class DtTopBarAction implements OnDestroy {
   /** Indicates if the item has a problem state */
   @Input()
   get hasProblem(): boolean {
@@ -94,4 +97,15 @@ export class DtTopBarAction {
   }
   /** The current state if an item has a problem */
   private _hasProblem = false;
+
+  constructor(
+    private _elementRef: ElementRef,
+    private _focusMonitor: FocusMonitor,
+  ) {
+    this._focusMonitor.monitor(this._elementRef.nativeElement, true);
+  }
+
+  ngOnDestroy(): void {
+    this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
+  }
 }