The Downlaod ZIP action can not be performed using the keaboard

modules/ui/src/app/components/download-report-zip/download-report-zip.component.ts

@@ -16,6 +16,7 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  HostBinding,
   HostListener,
   Input,
   OnDestroy,
@@ -44,6 +45,8 @@ export class DownloadReportZipComponent implements OnDestroy {
   @Input() url: string | null | undefined = null;
 
   @HostListener('click', ['$event.target'])
+  @HostListener('keydown.enter', ['$event'])
+  @HostListener('keydown.space', ['$event'])
   onClick() {
     const dialogRef = this.dialog.open(DownloadZipModalComponent, {
       ariaLabel: 'Download zip',
@@ -77,6 +80,9 @@ export class DownloadReportZipComponent implements OnDestroy {
       });
   }
 
+  @HostBinding('tabIndex')
+  readonly tabIndex = 0;
+
   ngOnDestroy() {
     this.destroy$.next(true);
     this.destroy$.unsubscribe();

modules/ui/src/app/components/download-zip-modal/download-zip-modal.component.html

@@ -54,6 +54,7 @@
       class="download-button"
       color="primary"
       mat-flat-button
+      aria-label="Download"
       type="button">
       Download
     </button>
@@ -69,7 +70,7 @@
     color="primary"
     mat-button
     type="button"
-    m
+    aria-label="Download ZIP file without Risk Assessment"
     class="download-button">
     Download Anyway
   </button>

modules/ui/src/app/pages/reports/reports.component.html

@@ -155,11 +155,13 @@ <h2 class="title">Reports</h2>
                 [url]="data.report"
                 [hasProfiles]="vm.hasProfiles"
                 [profiles]="vm.profiles">
-                <mat-icon
-                  class="download-report-icon"
-                  fontSet="material-symbols-outlined">
-                  archive
-                </mat-icon>
+                <span class="download-report-zip-icon-container">
+                  <mat-icon
+                    class="download-report-icon"
+                    fontSet="material-symbols-outlined">
+                    archive
+                  </mat-icon>
+                </span>
               </app-download-report-zip>
               <app-delete-report
                 *ngIf="data?.device"

modules/ui/src/app/pages/reports/reports.component.scss

@@ -169,3 +169,8 @@
   line-height: 20px;
   font-size: 14px;
 }
+
+.download-report-zip-icon-container {
+  display: inline-block;
+  padding-top: 5px;
+}

modules/ui/src/app/pages/testrun/components/download-options/download-options.component.html

@@ -29,18 +29,22 @@
       </mat-icon>
       <span>{{ DownloadOption.PDF }}</span>
     </mat-option>
-    <mat-option class="download-option zip">
-      <app-download-report-zip
-        [url]="data.report"
-        [hasProfiles]="hasProfiles"
-        [profiles]="profiles">
+    <app-download-report-zip
+      id="downloadReportZip"
+      class="download-option zip"
+      [url]="data.report"
+      [hasProfiles]="hasProfiles"
+      [profiles]="profiles">
+      <mat-option
+        (onSelectionChange)="onZipSelected($event)"
+        (click)="$event.stopPropagation()">
         <mat-icon
           class="download-report-icon"
           fontSet="material-symbols-outlined">
           archive
         </mat-icon>
         <span>{{ DownloadOption.ZIP }}</span>
-      </app-download-report-zip>
-    </mat-option>
+      </mat-option>
+    </app-download-report-zip>
   </mat-select>
 </mat-form-field>

modules/ui/src/app/pages/testrun/components/download-options/download-options.component.ts

@@ -13,7 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
@@ -48,6 +54,7 @@ export enum DownloadOption {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DownloadOptionsComponent {
+  @ViewChild('downloadReportZip') downloadReportZip!: ElementRef;
   @Input() hasProfiles: boolean = false;
   @Input() profiles: Profile[] = [];
   @Input() data!: TestrunStatus;
@@ -65,6 +72,15 @@ export class DownloadOptionsComponent {
     }
   }
 
+  onZipSelected(event: MatOptionSelectionChange) {
+    if (event.isUserInput) {
+      const uploadCertificatesButton = document.querySelector(
+        '#downloadReportZip'
+      ) as HTMLElement;
+      uploadCertificatesButton.dispatchEvent(new MouseEvent('click'));
+    }
+  }
+
   createLink(data: TestrunStatus, type: string) {
     if (!data.report) {
       return;