From 9ddd75dbdf2f3db1eafd4bd132ea5cdc6216d463 Mon Sep 17 00:00:00 2001
From: Adam Doan <adam.c.doan@gmail.com>
Date: Thu, 11 May 2023 11:50:28 +0000
Subject: [PATCH 1/2] Use more semantically appropriate elements and explicit
 names

---
 .../view-mode-switch.component.html            | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/shared/view-mode-switch/view-mode-switch.component.html b/src/app/shared/view-mode-switch/view-mode-switch.component.html
index 5f70bc699c..45d219eb91 100644
--- a/src/app/shared/view-mode-switch/view-mode-switch.component.html
+++ b/src/app/shared/view-mode-switch/view-mode-switch.component.html
@@ -1,5 +1,5 @@
 <div class="btn-group" data-toggle="buttons">
-    <a *ngIf="isToShow(viewModeEnum.ListElement)"
+    <button *ngIf="isToShow(viewModeEnum.ListElement)"
        routerLink="."
        [queryParams]="{view: 'list'}"
        queryParamsHandling="merge"
@@ -8,9 +8,9 @@
        [class.active]="currentMode === viewModeEnum.ListElement"
        class="btn btn-secondary"
        [attr.data-test]="'list-view' | dsBrowserOnly">
-          <i class="fas fa-list" title="{{'search.view-switch.show-list' | translate}}"></i>
-    </a>
-    <a *ngIf="isToShow(viewModeEnum.GridElement)"
+       <span class="fas fa-list"></span><span class="sr-only">{{'search.view-switch.show-list' | translate}}</span>
+    </button>
+    <button *ngIf="isToShow(viewModeEnum.GridElement)"
        routerLink="."
        [queryParams]="{view: 'grid'}"
        queryParamsHandling="merge"
@@ -19,9 +19,9 @@
        [class.active]="currentMode === viewModeEnum.GridElement"
        class="btn btn-secondary"
        [attr.data-test]="'grid-view' | dsBrowserOnly">
-          <i class="fas fa-th-large" title="{{'search.view-switch.show-grid' | translate}}"></i>
-    </a>
-    <a *ngIf="isToShow(viewModeEnum.DetailedListElement)"
+       <span class="fas fa-th-large"></span><span class="sr-only">{{'search.view-switch.show-grid' | translate}}</span>
+    </button>
+    <button *ngIf="isToShow(viewModeEnum.DetailedListElement)"
        routerLink="."
        [queryParams]="{view: 'detailed'}"
        queryParamsHandling="merge"
@@ -30,6 +30,6 @@
        [class.active]="currentMode === viewModeEnum.DetailedListElement"
        class="btn btn-secondary"
        [attr.data-test]="'detail-view' | dsBrowserOnly">
-      <i class="far fa-square" title="{{'search.view-switch.show-detail' | translate}}"></i>
-    </a>
+      <span class="far fa-square"></span><span class="sr-only">{{'search.view-switch.show-detail' | translate}}</span>
+    </button>
 </div>

From bd9f70acc8993912a368fd6f822cdfebc15b3b75 Mon Sep 17 00:00:00 2001
From: Adam Doan <adam.c.doan@gmail.com>
Date: Thu, 11 May 2023 12:57:44 +0000
Subject: [PATCH 2/2] Update tests

---
 .../view-mode-switch/view-mode-switch.component.spec.ts       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/shared/view-mode-switch/view-mode-switch.component.spec.ts b/src/app/shared/view-mode-switch/view-mode-switch.component.spec.ts
index 5780ea5cf3..248a843316 100644
--- a/src/app/shared/view-mode-switch/view-mode-switch.component.spec.ts
+++ b/src/app/shared/view-mode-switch/view-mode-switch.component.spec.ts
@@ -61,7 +61,7 @@ describe('ViewModeSwitchComponent', () => {
       searchService.setViewMode(ViewMode.ListElement);
       tick();
       fixture.detectChanges();
-      const debugElements = fixture.debugElement.queryAll(By.css('a'));
+      const debugElements = fixture.debugElement.queryAll(By.css('button'));
       listButton = debugElements[0].nativeElement;
       gridButton = debugElements[1].nativeElement;
     }));
@@ -96,7 +96,7 @@ describe('ViewModeSwitchComponent', () => {
       searchService.setViewMode(ViewMode.ListElement);
       tick();
       fixture.detectChanges();
-      const debugElements = fixture.debugElement.queryAll(By.css('a'));
+      const debugElements = fixture.debugElement.queryAll(By.css('button'));
       listButton = debugElements[0].nativeElement;
       detailButton = debugElements[1].nativeElement;
     }));