Tabs are a set of layered sections of content, known as tab panels, that display one panel at a time. Each tab panel is associated with a tab element that, when activated, reveals the corresponding panel on the UI.
To support screen reader users in navigating from a tab to the beginning of content in the active tab panel, the tab panel element contains the tabindex="0"
attribute so that it can be focused when navigating with keyboard and ensures the panel is part of the page’s tab sequence. Following is an image of a tab panel receiving keyboard focus after navigating past the active tab:
It is generally recommended that all tab panels in a tab set be focusable, especially when any panel contains content where the first element is not inherently focusable.
Screen reader announcement behavior can also vary, with some announcing only the tab panel's label when focused, while others may also read the content within, including both static and interactive elements. Because the content of a tab panel can vary widely depending on how it is authored or configured, tab panels in Pega are always focusable to provide a consistent experience for users navigating through tab structures.