From 324bf1d9fd791c861c377482ea6404273b94b50b Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Tue, 17 Feb 2026 15:05:20 +0000
Subject: [PATCH 1/2] Adds arrow navigation

---
 .../download-options.component.html           | 14 ++++--
 .../download-options.component.ts             | 47 ++++++++++++++++++-
 2 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html
index d6f6abd71..0dfeff769 100644
--- a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html
+++ b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html
@@ -14,9 +14,15 @@
 limitations under the License.
 -->
 @if (data) {
-  <div class="download-actions">
+  <div
+    role="menu"
+    class="download-actions"
+    [cdkTrapFocus]="isOpenDownloadOptions"
+    (keydown)="handleKeydown($event)">
     @if (isOpenDownloadOptions) {
       <button
+        role="menuitem"
+        appMenuItem
         (click)="downloadPdf(data)"
         class="download-option"
         aria-label="Download PDF report"
@@ -26,9 +32,9 @@
         </mat-icon>
         {{ DownloadOption.PDF }}
       </button>
-    }
-    @if (isOpenDownloadOptions) {
       <app-download-report-zip
+        role="menuitem"
+        appMenuItem
         class="download-option"
         [report]="data.report"
         [export]="data.export"
@@ -43,6 +49,8 @@
       </app-download-report-zip>
     }
     <button
+      role="menuitem"
+      appMenuItem
       (click)="openDownloadOptions()"
       class="download-button"
       [class.download-button-opened]="isOpenDownloadOptions"
diff --git a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts
index 348df6c4d..eabbe1594 100644
--- a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts
+++ b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts
@@ -18,6 +18,9 @@ import {
   Component,
   Input,
   inject,
+  QueryList,
+  ViewChildren,
+  AfterViewInit,
 } from '@angular/core';
 import { DatePipe } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
@@ -28,6 +31,20 @@ import {
 import { DownloadReportZipComponent } from '../../../../components/download-report-zip/download-report-zip.component';
 import { Profile } from '../../../../model/profile';
 import { MatButtonModule } from '@angular/material/button';
+import { CdkTrapFocus, FocusKeyManager } from '@angular/cdk/a11y';
+import { Directive, ElementRef } from '@angular/core';
+import { FocusableOption } from '@angular/cdk/a11y';
+
+@Directive({
+  selector: '[appMenuItem]',
+  standalone: true,
+})
+export class MenuItemDirective implements FocusableOption {
+  constructor(public element: ElementRef) {}
+  focus() {
+    this.element.nativeElement.focus();
+  }
+}
 
 export enum DownloadOption {
   PDF = 'PDF Report',
@@ -37,12 +54,22 @@ export enum DownloadOption {
   selector: 'app-download-options',
   templateUrl: './download-options.component.html',
   styleUrl: './download-options.component.scss',
-  imports: [MatButtonModule, MatIconModule, DownloadReportZipComponent],
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+    DownloadReportZipComponent,
+    CdkTrapFocus,
+    MenuItemDirective,
+  ],
   providers: [DatePipe],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DownloadOptionsComponent {
+export class DownloadOptionsComponent implements AfterViewInit {
+  @ViewChildren(MenuItemDirective) items!: QueryList<MenuItemDirective>;
+
   private datePipe = inject(DatePipe);
+  private keyManager!: FocusKeyManager<MenuItemDirective>;
+
   isOpenDownloadOptions: boolean = false;
   @Input() profiles: Profile[] = [];
   @Input() data!: TestrunStatus;
@@ -95,4 +122,20 @@ export class DownloadOptionsComponent {
   openDownloadOptions(): void {
     this.isOpenDownloadOptions = !this.isOpenDownloadOptions;
   }
+
+  ngAfterViewInit() {
+    this.keyManager = new FocusKeyManager(this.items)
+      .withWrap()
+      .withVerticalOrientation(true);
+  }
+
+  handleKeydown(event: KeyboardEvent) {
+    if (this.isOpenDownloadOptions) {
+      this.keyManager.onKeydown(event);
+
+      if (event.key === 'Tab') {
+        this.isOpenDownloadOptions = false;
+      }
+    }
+  }
 }

From 485f2382db62dd1ff03631c347846e68a156660a Mon Sep 17 00:00:00 2001
From: kurilova <kurilova@google.com>
Date: Thu, 19 Feb 2026 08:15:09 +0000
Subject: [PATCH 2/2] Fix lint issue

---
 .../components/download-options/download-options.component.html  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html
index 0dfeff769..b69b8ace4 100644
--- a/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html
+++ b/modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html
@@ -16,6 +16,7 @@
 @if (data) {
   <div
     role="menu"
+    tabindex="-1"
     class="download-actions"
     [cdkTrapFocus]="isOpenDownloadOptions"
     (keydown)="handleKeydown($event)">