Accessibility with Tab set

[steveareeno]

Tabset accessibility

Google lighthouse is complaining that a list item <li> must be contained in a list <ul> when it is scanning for accessibility. I checked the html in the console and there is a <ul> tag so I am not sure why lighthouse is not seeing it. Any advice? below is the html for the tabset:

<tabset #pdeTabs type="pills" justified="true" arial-label="Navigation Tabs">
    <tab id="contact" (deselect)="onDeselect($event)" (selectTab)="onSelect($event)">
      <ng-template tabHeading>
        <span class="tab-title hideInPrint" popover="Enter information about you" popoverTitle="Application Step 1" placement="bottom" triggers="mouseenter:mouseleave">1</span><br />
        <span class="d-none d-lg-inline d-xl-inline text-uppercase text-nowrap hideInPrint">Information About You</span>
      </ng-template>
      <app-application-contact (hasValidationErrorsEvent)="setValidationErrorsFlag($event)" #contact></app-application-contact>
    </tab>
    <tab id="income" (deselect)="onDeselect($event)" (selectTab)="onSelect($event)">
      <ng-template tabHeading>
        <span class="tab-title hideInPrint" popover="Enter your employment and income" placement="bottom" popoverTitle="Application Step 2" triggers="mouseenter:mouseleave">2</span><br />
        <span class="d-none d-lg-inline d-xl-inline text-uppercase text-nowrap hideInPrint">Employment and Income</span>
      </ng-template>
      <app-application-employment #employment></app-application-employment>
    </tab>
    <tab id="dependents" (deselect)="onDeselect($event)" (selectTab)="onSelect($event)">
      <ng-template tabHeading>
        <span class="tab-title hideInPrint" popover="Enter your dependents" placement="bottom" popoverTitle="Application Step 3" triggers="mouseenter:mouseleave">3</span><br />
        <span class="d-none d-lg-inline d-xl-inline text-uppercase text-nowrap hideInPrint">Dependents</span></ng-template>
      <app-application-dependents #dependents></app-application-dependents>
    </tab>
    <tab id="assets" (deselect)="onDeselect($event)" (selectTab)="onSelect($event)">
      <ng-template tabHeading>
        <span class="tab-title hideInPrint" popover="Enter your property and assets" popoverTitle="Application Step 4" placement="bottom" triggers="mouseenter:mouseleave">4</span><br />
        <span class="d-none d-lg-inline d-xl-inline text-uppercase text-nowrap hideInPrint">Property and Assets</span></ng-template>
      <app-application-properties #properties></app-application-properties>
    </tab>
    <tab id="expenses" (deselect)="onDeselect($event)" (selectTab)="onSelect($event)">
      <ng-template tabHeading>
        <span class="tab-title hideInPrint" popover="Enter your expenses" popoverTitle="Application Step 5" placement="bottom" triggers="mouseenter:mouseleave">5</span><br />
        <span class="d-none d-lg-inline d-xl-inline text-uppercase text-nowrap hideInPrint">Expenses</span></ng-template>
      <app-application-expenses #expenses></app-application-expenses>
    </tab>
    <tab id="review" (deselect)="onDeselect($event)" (selectTab)="onSelect($event)">
      <ng-template tabHeading>
        <span class="tab-title" popover="Review, sign, and submit your application" popoverTitle="Application Step 6" placement="bottom" triggers="mouseenter:mouseleave">6</span><br />
        <span class="d-none d-lg-inline d-xl-inline text-uppercase text-nowrap hideInPrint">Review</span>
      </ng-template>
      <app-application-review></app-application-review>
    </tab>
  </tabset>

[apotapcukv]

Hi, @steveareeno! We can’t reproduce the issue now to check if it has been fixed or not. If you still can, please do it at https://stackblitz.com/edit/angular-ivy-de1elj?file=tsconfig.json/ and share with us, or please add a recorded video.

[Aryan576]

hey can some tell the solution for the above code i have accessibility problem for roles to tabset tab

[ccondrup]

I'm running into the same issue with Angular 18.2.5 and ngx-bootstrap 18.0.2. The Stackblitz provided by @apotapcukv has become outdated so I have created this Stackblitz on Angular 18, and here is a screengrab from running Lighthouse on it. Seems when the ul element has role=tablist it is no longer regarded as valid parent of li element.