Tabset ul not containing li’s according to lighthouse

Current behavior
When using the tabset, the ul has a role of tabset and the a elements within the li’s have a role of tab.
This has now changed to say the errors reported by @IAfanasov, that li’s are not contained within a ul, even though they are.

~~Expected behavior
No roles are assigned to lists.

This is incorrect Aria behaviour and fails a Google Lighthouse test. See documentation: https://getbootstrap.com/docs/4.3/components/navs/#regarding-accessibility as to why this should be removed.

This was introduced by the following issue (however well intentioned) #1118. All I know is, this is hindering those perfect lighthouse scores we’re all going for under accessibility :D.~~
The problem does seem to be specific to using ng-bootstrap’s tablist and doesn’t occur when typing the HTML out by hand, possibly due to the UL and LIs being part of different components?

1 possible answer(s) on “Tabset ul not containing li’s according to lighthouse

  1. The issue is still present, even in latest sample from the example page.
    Although markup is from HTML correct, having the role=tablist, is what confuses the screen readers.

    Issue can be easily identified with Accesibility from DevTools, AXE or Accessibility Insights for Web.

    image

    The fix seems to be changing the role=”tablist” to role=”list” or removing it altogether.

    A great explanation in this article explain the issue from real users perspective. their solution includes the removal of the role=”tablist”.