Skip to content
Snippets Groups Projects
Commit c3c0d98e authored by OZGCloud's avatar OZGCloud
Browse files

Merge pull request 'OZG-6631-screenreader-improvement' (#766) from...

Merge pull request 'OZG-6631-screenreader-improvement' (#766) from OZG-6631-screenreader-improvement into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/766


Reviewed-by: default avatarOZGCloud <ozgcloud@mgm-tp.com>
parents 930ae920 12154411
Branches
Tags
No related merge requests found
...@@ -61,4 +61,12 @@ describe('NavItemComponent', () => { ...@@ -61,4 +61,12 @@ describe('NavItemComponent', () => {
}); });
}); });
}); });
describe('template', () => {
describe('host element role attribute', () => {
it('should be "menuitem"', () => {
expect(fixture.nativeElement.getAttribute('role')).toBe('menuitem');
});
});
});
}); });
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core'; import { Component, HostBinding, Input } from '@angular/core';
import { RouterLink, RouterLinkActive } from '@angular/router'; import { RouterLink, RouterLinkActive } from '@angular/router';
@Component({ @Component({
...@@ -14,7 +14,6 @@ import { RouterLink, RouterLinkActive } from '@angular/router'; ...@@ -14,7 +14,6 @@ import { RouterLink, RouterLinkActive } from '@angular/router';
'border border-transparent hover:border-primary', 'border border-transparent hover:border-primary',
'outline-2 outline-offset-4 outline-focus focus-visible:border-background-200', 'outline-2 outline-offset-4 outline-focus focus-visible:border-background-200',
]" ]"
role="menuitem"
[attr.data-test-id]="'link-to-' + to" [attr.data-test-id]="'link-to-' + to"
> >
<ng-content select="[icon]" /> <ng-content select="[icon]" />
...@@ -24,4 +23,6 @@ import { RouterLink, RouterLinkActive } from '@angular/router'; ...@@ -24,4 +23,6 @@ import { RouterLink, RouterLinkActive } from '@angular/router';
export class NavItemComponent { export class NavItemComponent {
@Input({ required: true }) caption!: string; @Input({ required: true }) caption!: string;
@Input() to: string; @Input() to: string;
@HostBinding('attr.role') role = 'menuitem';
} }
...@@ -23,7 +23,7 @@ import { twMerge } from 'tailwind-merge'; ...@@ -23,7 +23,7 @@ import { twMerge } from 'tailwind-merge';
*ngIf="isPopupOpen" *ngIf="isPopupOpen"
class="absolute max-h-120 min-w-44 max-w-80 animate-fadeIn overflow-y-auto rounded shadow-lg shadow-grayborder focus:outline-none" class="absolute max-h-120 min-w-44 max-w-80 animate-fadeIn overflow-y-auto rounded shadow-lg shadow-grayborder focus:outline-none"
[ngClass]="alignTo === 'left' ? 'right-0' : 'left-0'" [ngClass]="alignTo === 'left' ? 'right-0' : 'left-0'"
role="dialog" role="menu"
aria-modal="true" aria-modal="true"
tabIndex="-1" tabIndex="-1"
cdkTrapFocus cdkTrapFocus
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment