hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-17 23:13:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2241 from doana/view-mode-switch-accessibility

Browse Source 
View mode switch accessibility
This commit is contained in:
Tim Donohue
2023-05-11 16:53:45 -05:00
committed by GitHub
parent 84d8a61f83 bd9f70acc8
commit 959f826d64
2 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/shared/view-mode-switch/view-mode-switch.component.html
View File

@@ -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>

4
src/app/shared/view-mode-switch/view-mode-switch.component.spec.ts
View File

@@ -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;
}));