Tabs issue from Deque aXe: "Interactive controls must not be nested" + id not assigned

[mmazanec22]

Overview of the problem

Oruga version: 0.5.10 Vuejs version: 3.2.45 OS/Browser: Chrome and Edge on Linux (via Nighwatch e2e tests on Selenium Grid)

Description

When running Deque's aXe automated accessibility checks on my app, I got the error "aXe rule: nested-interactive - Interactive controls must not be nested" for elements div[aria-controls="currentCard-content"] and div[aria-controls="newCard-content"]. currentCard and newCard respectively are the values passed to o-tab-item within o-tabs.

It looks like this issue is caused by aria-controls being assigned to the div containing the button rather than the button itself, which read to aXe as nested controls. I am not sure how this would be perceived by a screen reader user.

I also had to manually add id=currentCard-content to my tab content, so any dev who isn't doing this will not have their content programmatically associated with aria-controls.

Steps to reproduce

Run aXe against a page with Oruga tabs and tab items.

Expected behavior

• Interactive controls are not nested
• Tab content and control are programmatically associated by Oruga library without developer needing to manually find and fix this issue

Actual behavior

• Interactive controls are nested
• ID is not assigned to tab content