-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Accessibility issue with ngbNav #4398
Comments
Hey, @hussein2690, could you please confirm that what you're suggesting is "we should not put role=tab on the Could you please provide some references to a11y docs/tools you're using? Also you can workaround it:
|
note: maybe the solution would be adding |
This is the same issue reported in #4090 and #4204. The ng-bootstrap examples often use @hussein2690 did mention the relevant testing tool: axe DevTools. For background, see https://www.digitala11y.com/links-vs-buttons-a-perennial-problem/ and |
#4414 is incomplete, but demonstrates the simplest solution for this bug: adding |
For the non-ng-container-based markup a `role="presentation"` should be added on the `li` elements. Fixes ng-bootstrap#4398
For the non-ng-container-based markup a `role="presentation"` should be added on the `li` elements. Fixes ng-bootstrap#4398
For the non-ng-container-based markup a `role="presentation"` should be added on the `li` elements. Fixes ng-bootstrap#4398
For the non-ng-container-based markup a `role="presentation"` should be added on the `li` elements. Fixes #4398
Bug description:
The accessibility test require us to add
role="tablist"
to the<ul>
element and by adding that we have to addrole="tab"
to the<li>
elementAdding
role="tablist"
to the<ul>
and addingrole="tab"
to the<li>
will fix the accessibility issue with<li>
for the issue shown in the screenshot belowHowever this will cause another issue with
<a>
element we are rendering inside the<li>
and that becausengbNavLink
directive will target the<a>
and add anotherrole="tab"
to the<a>
element, so now the<a>
element withrole="tab"
is looking for perant element withrole="tablist"
see screenshot belowLink to minimally-working StackBlitz that reproduces the issue:
https://stackblitz.com/edit/angular-54mh4h?file=src%2Fmain.ts
You can run an accessibility test with a lighthouse or axe DevTools
Versions of Angular, ng-bootstrap
Angular: 13
ng-bootstrap: 11
The text was updated successfully, but these errors were encountered: