Accessibility issue with ngbNav

[hussein2690]

Bug description:

The accessibility test require us to add role="tablist" to the <ul> element and by adding that we have to add role="tab" to the <li> element

Adding role="tablist" to the <ul> and adding role="tab" to the<li> will fix the accessibility issue with <li> for the issue shown in the screenshot below

However this will cause another issue with <a> element we are rendering inside the <li> and that because ngbNavLink directive will target the <a> and add another role="tab" to the <a> element, so now the <a> element with role="tab" is looking for perant element with role="tablist" see screenshot below

<ul ngbNav #navWide="ngbNav" role="tablist" [destroyOnHide]="false" tabResponsive class="nav-tabs" [(activeId)]="showFirstTab">
       <li ngbNavItem [ngbNavItem]="1" role="tab" >
            <a ngbNavLink>
                     Test
             </a>
        </li>
</ul>

Link 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

[maxokorokov]

Hey, @hussein2690, could you please confirm that what you're suggesting is "we should not put role=tab on the <a>, element, but should put it on the <li> instead"?

Could you please provide some references to a11y docs/tools you're using?

Also you can workaround it:

• by disabling role generation with [roles]="false" and putting them manually → https://ng-bootstrap.github.io/#/components/nav/api#NgbNav
• by using alternative markup without <ul> <li> elements I guess → https://ng-bootstrap.github.io/#/components/nav/examples#markup

[maxokorokov]

note: maybe the solution would be adding role=presentation on the <li> element as in https://getbootstrap.com/docs/5.1/components/navs-tabs/#javascript-behavior

[stephanieleary]

This is the same issue reported in #4090 and #4204. The ng-bootstrap examples often use <a> tags when they should use <button> The Bootstrap 5 nav examples do not exhibit the same errors because they are using <button>. #4206 addresses this by making it possible to use <button> in a nav item, but the docs and existing code will need to be updated , or role="tab" should be moved to the ngbNavItem directive. Having everyone update their code to <button> will be more consistent with Bootstrap 5 markup, but makes for an annoying upgrade.

@hussein2690 did mention the relevant testing tool: axe DevTools.

For background, see https://www.digitala11y.com/links-vs-buttons-a-perennial-problem/ and
https://speakerdeck.com/marcysutton/the-links-vs-buttons-showdown?slide=17 for guidelines on when to use which. The short version is: links when the user will be taken to another page with a full refresh, buttons when the user will stay on the current page but some content will change.

[stephanieleary]

#4414 is incomplete, but demonstrates the simplest solution for this bug: adding <button> to the selector for [ngbNavLink], and adding role="presentation" to [ngbNavItem].