hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +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

29
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">
<a href="javascript:void(0);" role="button"
[attr.aria-label]="'nav.language' |translate"
[title]="'nav.language' | translate" class="px-1"
(click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
tabindex="0">
<button role="button"
[attr.aria-label]="'nav.language' |translate"
[title]="'nav.language' | translate" class="dropdown-toggle px-1"
(click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
tabindex="0">
<i class="fas fa-globe-asia fa-lg fa-fw"></i>
</a>
<ul ngbDropdownMenu class="dropdown-menu" [attr.aria-label]="'nav.language' |translate">
<li class="dropdown-item" tabindex="0" #langSelect *ngFor="let lang of translate.getLangs()"
(keyup.enter)="useLang(lang)"
(click)="useLang(lang)"
[class.active]="lang === translate.currentLang">
{{ langLabel(lang) }}
</li>
</ul>
</button>
<div ngbDropdownMenu class="dropdown-menu" role="listbox" [attr.aria-label]="'nav.language' |translate">
<div class="dropdown-item" tabindex="0" role="option" *ngFor="let lang of translate.getLangs()"
(keyup.enter)="useLang(lang)"
(click)="useLang(lang)"
[attr.aria-selected]="lang === translate.currentLang"
[class.active]="lang === translate.currentLang">
{{ langLabel(lang) }}
</div>
</div>
</div>

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

@@ -3,6 +3,7 @@
}
.dropdown-toggle {
all: unset;
color: var(--ds-header-icon-color);
&: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', (() => {
expect(langSwitchElement.querySelector('a')).not.toBeNull();
expect(langSwitchElement.querySelector('button.dropdown-toggle')).not.toBeNull();
}));
describe('when selecting a language', () => {