Use more semantically appropriate elements and explicit names

This commit is contained in:
Adam Doan
2023-05-11 11:50:28 +00:00
parent c914b42de2
commit 9ddd75dbdf

View File

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