An element with role=tab must be contained in, or owned by, an element with role=tablist.

[YiiRocks]

What steps will reproduce the problem?

Use yii\bootstrap4\Tabs.

What's expected?

Correct validation on Nu Html Checker

What do you get instead?

An element with role=tab must be contained in, or owned by, an element with role=tablist.

Additional info

Q	A
Yii vesion	2.0.19
PHP version	7.3.5
Operating system	Debian 4.4.178-1~ui80+1

[machour]

Can you show the produced HTML?

[YiiRocks]

echo yii\bootstrap4\Tabs::widget([
    'items' => [
        [
            'label' => 'One',
            'content' => '1. Anim pariatur cliche...',
            'active' => true
        ],
        [
            'label' => 'Two',
            'content' => '2. Anim pariatur cliche...',
            'options' => ['id' => 'myveryownID'],
        ],
        [
            'label' => 'Example',
            'url' => 'http://www.example.com',
        ],
        [
            'label' => 'Dropdown',
            'items' => [
                [
                    'label' => 'DropdownA',
                    'content' => 'DropdownA, Anim pariatur cliche...',
                ],
                [
                    'label' => 'DropdownB',
                    'content' => 'DropdownB, Anim pariatur cliche...',
                ],
                [
                    'label' => 'External Link',
                    'url' => 'http://www.example.com',
                ],
            ],
        ],
    ],
]);

produces

<ul id="w0" class="nav nav-tabs"><li class="nav-item active"><a class="nav-link active" href="#w0-tab0" data-toggle="tab" role="tab" aria-controls="w0-tab0" aria-selected="true">One</a></li>
<li class="nav-item"><a class="nav-link" href="#myveryownID" data-toggle="tab" role="tab" aria-controls="myveryownID" aria-selected="false">Two</a></li>
<li class="nav-item"><a class="nav-link" href="http://www.example.com">Example</a></li>
<li class="dropdown nav-item"><a class="dropdown-toggle nav-link" href="#" data-toggle="dropdown">Dropdown</a><div id="w1" class="dropdown-menu"><a class="dropdown-item" href="#w0-dd3-tab0" data-toggle="tab" role="tab" aria-controls="w0-dd3-tab0" aria-selected="false">DropdownA</a>
<a class="dropdown-item" href="#w0-dd3-tab1" data-toggle="tab" role="tab" aria-controls="w0-dd3-tab1" aria-selected="false">DropdownB</a>
<a class="dropdown-item" href="http://www.example.com">External Link</a></div></li></ul>
<div class="tab-content"><div id="w0-tab0" class="tab-pane active">1. Anim pariatur cliche...</div>
<div id="myveryownID" class="tab-pane">2. Anim pariatur cliche...</div>
<div id="w0-dd3-tab0" class="tab-pane">DropdownA, Anim pariatur cliche...</div>
<div id="w0-dd3-tab1" class="tab-pane">DropdownB, Anim pariatur cliche...</div></div>

[YiiRocks]

Independent from issue above, <li class="nav-item active"> should not contain the active class. See Tabs.

[YiiRocks]

As an addition, maybe the disabled/aria-disabled="true" status could be added as well. I don't need it, but the class would be more complete with it.

[samdark]

@Thoulah independent issues are better to be reported via independent tickets.