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

130479: add aria-selected to selected language + globe button uses a button element

Browse Source
This commit is contained in:
wout
2025-05-05 15:30:55 +02:00
committed by Alexandre Vryghem
parent 404ccd9b0e
commit e9940f4005
3 changed files with 17 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/shared/lang-switch/lang-switch.component.html
View File

@@ -1,17 +1,18 @@
<div ngbDropdown class="navbar-nav" *ngIf="moreThanOneLanguage" display="dynamic" placement="bottom-right"> <div ngbDropdown class="navbar-nav" *ngIf="moreThanOneLanguage" display="dynamic" placement="bottom-right">
<a href="javascript:void(0);" role="button" <button role="button"
[attr.aria-label]="'nav.language' |translate" [attr.aria-label]="'nav.language' |translate"
[title]="'nav.language' | translate" class="px-1" [title]="'nav.language' | translate" class="dropdown-toggle px-1"
(click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
tabindex="0"> tabindex="0">
<i class="fas fa-globe-asia fa-lg fa-fw"></i> <i class="fas fa-globe-asia fa-lg fa-fw"></i>
</a> </button>
<ul ngbDropdownMenu class="dropdown-menu" [attr.aria-label]="'nav.language' |translate"> <div ngbDropdownMenu class="dropdown-menu" role="listbox" [attr.aria-label]="'nav.language' |translate">
<li class="dropdown-item" tabindex="0" #langSelect *ngFor="let lang of translate.getLangs()" <div class="dropdown-item" tabindex="0" role="option" *ngFor="let lang of translate.getLangs()"
(keyup.enter)="useLang(lang)" (keyup.enter)="useLang(lang)"
(click)="useLang(lang)" (click)="useLang(lang)"
[attr.aria-selected]="lang === translate.currentLang"
[class.active]="lang === translate.currentLang"> [class.active]="lang === translate.currentLang">
{{ langLabel(lang) }} {{ langLabel(lang) }}
</li> </div>
</ul> </div>
</div> </div>

1
src/app/shared/lang-switch/lang-switch.component.scss
View File

@@ -3,6 +3,7 @@
} }
.dropdown-toggle { .dropdown-toggle {
all: unset;
color: var(--ds-header-icon-color); color: var(--ds-header-icon-color);
&:hover, &:focus { &:hover, &:focus {

2
src/app/shared/lang-switch/lang-switch.component.spec.ts
View File

@@ -109,7 +109,7 @@ describe('LangSwitchComponent', () => {
})); }));
it('should define the main A HREF in the UI', (() => { it('should define the main A HREF in the UI', (() => {
expect(langSwitchElement.querySelector('a')).not.toBeNull(); expect(langSwitchElement.querySelector('button.dropdown-toggle')).not.toBeNull();
})); }));
describe('when selecting a language', () => { describe('when selecting a language', () => {