Issue Summary

"Reviewing" and "Created" interactive elements are not programmatically determined as a tab. These tabs are missing appropriate roles and attributes.

Steps to Reproduce

1. Using a screen reader, navigate to the "View your 0 unapproved pull requests" in the header section & activate it.
2. Listen that the elements are not identified as tab and the number of tabs are not announced as well.
3. Activate any of the elements.
4. Observe that the related content of the element is displayed.
5. Listen that the selected state for the element is not announced.

Screenshot 

Actual Results

When my pull request is activated, the "Reviewing" and "Created" elements are not programmatically determined as tabs. Also, the number of tabs is not programmatically determined. On activating the elements, the related content gets dynamically updated below and visually an underline appears on selected element to convey the state. Although the dynamic change in the content is easier to understand for sighted users, it is not intuitive for screen reader users.

Expected Results

The interactive elements should be identified as tabs using a screen reader. Also, the number of tabs along with the currently selected tab should be identified.
Apply the following changes:

• Set the role="tablist" for the <div> tag containing the elements that behaves as a tab.
• Specify the 'id' attribute for the container of visible text that determines the name of the tablist. Reference the value of the 'id' attribute correctly via the 'aria-labelledby' attribute of the tablist.
• Set the role="tab" for the <button> tags used for displaying "Reviewing" and "Created". In addition, specify the ARIA attributes for tabs, such as “aria-controls” and “aria-selected”. (The value of the aria-selected attribute needs to change on the basis of the currently active tab.)
• Set aria-selected=” true” for the active tab.
• Specify an 'id' attribute for the <div> tags used to display the content of the respective tab. Reference the value of the 'id' attribute correctly via the 'aria-controls' attribute of each tab.
• Specify an 'id' attribute for the <button> tags used to display each tab. Reference the value of the 'id' attribute correctly via the 'aria-labelledby' attribute of each tab panel.
• Set the role="tab panel" for the <div> tags displaying the contents associated with "Reviewing" and "Created" tabs.
• As a best practice, provide tabindex="0" attribute on the container of the tab panel.

 
More information can be found at https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html

Workaround

Currently, there is no known workaround for this behavior. A workaround will be added here when available.

Environment

MacBook Pro (16-inch, 2019)
macOs Ventura 13.5.1
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest