[Solved] aria-hidden="true" incorrectly set on active TabStrip panel when keepTabsMounted is enabled

[nEMO]

Hi Telerik 

When keepTabsMounted prop is enabled on TabStrip, the active panel receives aria-hidden="true" which violates WAI-ARIA specification. The browser overrides this behavior when the panel contains a focused element, but the warning is still thrown:
Blocked aria-hidden on an element because its descendant retained focus.
Steps to reproduce:

Add TabStrip with keepTabsMounted prop
Open browser DevTools → Accessibility tab
Click on active .k-tabstrip-content.k-active element
Observe aria-hidden: true on the active panel

Expected behavior:
Active panel should have aria-hidden="false" or no aria-hidden attribute at all.
Actual behavior:
Active panel has aria-hidden="true" causing browser accessibility warning.
 

[Vessy]

Hello,

I tried to reproduce the reported behavior but wasn't able to. Could you please take a look at my demo page and let me know whether it differs from your actual setup in any way? Are you able to reproduce the same issue there?

• https://stackblitz.com/edit/react-q5cxciub?file=app%2Fapp.tsx 

For reference, here's the result I'm seeing:

Looking forward to your reply,
Vessy
Progress Telerik

[nEMO]

Hi Vessy

To reproduce the warning, a focusable element must be present inside the tab content.
Simple text elements (<p>, <span>, <div>) will not trigger the warning. The warning appears only when the tab contains focusable elements such as <input>, <button>, <select>, or any element with tabIndex.
Steps to reproduce:

Add keepTabsMounted to TabStrip
Place a focusable element (e.g. <input>) inside any TabStripTab
Click the input to give it focus
Switch to another tab
The warning appears:

Blocked aria-hidden on an element because its descendant retained focus.

[Vessy]

Hi,

Thanks a lot for the additional details! The problem at hand is previously resolved by introducing the renderAllContent prop in the Tabstrip which forces the initial rendering of all tabs:

• https://github.com/telerik/kendo-react/issues/1988#issuecomment-2020095833 

You can test it applied here - https://stackblitz.com/edit/react-q5cxciub-b4ekqbcp?file=app%2Fapp.tsx 

Can you apply it at your end and see whether it resolves the issue for you as well? 

[nEMO]

Thank you for the suggestion—using `renderAllContent` does indeed resolve the `aria-hidden` warning.
However, I’ve noticed one drawback: when using `renderAllContent`, all tab content is rendered in the DOM during initialization, regardless of whether the user navigates to those tabs or not. In our case, each tab contains large forms with many focusable elements, which means unnecessary rendering and a potential performance hit.
With keepTabsMounted, only visited tabs remain in the DOM—which is the more optimal option. But this causes an aria-hidden conflict when switching tabs. 

Question: Is there a way to achieve the correct aria-hidden behavior (as in renderAllContent) while retaining the lazy loading of keepTabsMounted? Or is this a known limitation that may be resolved in a future release?

[Vessy]

Thank you for the additional details.

What you are seeing is expected when using keepTabsMounted. Since previously visited tab panels remain in the DOM, the TabStrip applies aria-hidden="true" to inactive panels so they are removed from the accessibility tree. If focus is still within a panel at the moment it becomes hidden, the browser raises the warning because focused content must not be hidden from assistive technologies.

Currently, the only way to avoid the aria-hidden attributes being rendered is to set renderAllContent={true}. This uses a different rendering/accessibility strategy and therefore does not trigger the warning. At this time, there is no option that combines the lazy-loading behavior of keepTabsMounted with the same accessibility behavior provided by renderAllContent.

[nEMO]

I can reproduce the warning without switching tabs at all:

1. Open TabStrip with keepTabsMounted
2. Tab 1 is active
3. Click any input inside Tab 1
4. Warning appears immediately

Inspecting the DOM shows aria-hidden="true" is set on the 
active tab panel (.k-tabstrip-content.k-active), which seems 
incorrect — active panels should not have aria-hidden="true".

renderAllContent fixes this because it sets aria-hidden="false" 
on the active panel correctly.

[Vessy]

Hey,

Thank you for the follow-up. After a further investigation, I can confirm that this is a bug in the TabStrip, I have logged it in the link below:

• https://github.com/telerik/kendo-react/issues/3705

I have also updated your Telerik points accordingly.