Use more semantically appropriate elements and explicit names

Author: doana

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>