Issue Summary

On pull request page, the role & state Information is not available for the links such as "Overview", "Diff", "Commits" & "Builds", etc.

Steps to Reproduce

1. Turn on the screen reader.
2. Navigate to any pull request page.
3. Navigate to the "Overview", "Diff", "Commits" & "Builds", etc links.
4. Observe that the link is selected but the screen reader doesn’t announce the same.

Actual Results

While navigating with a screen reader, when user navigate to the "Overview", "Diff", "Commits" & "Builds", etc links the screen reader doesn’t announce the currently selected link. 

Moreover visually the component behaves like a tab panel elements but this is not conveyed to the screen reader users.

This makes screen reader users difficult to perceive the Information effectively.

Expected Results

The screen reader should convey the tabpanel functionality & the selected tab element effectively.

Apply following fixes.

• Provide role="tablist" to the <ul class="tabs-menu"> element along with an accessible label.
• Provide role="tab" to all the <a> elements present inside the list.
• Provide aria-selected="true" to the currently selected link <a> element.
• Provide aria-selected="false" to non-active link elements.
• Provide role="tabapanel" to the <div class="tabs-pane"> element along with an aria-labelledby attribute with the id of the selected tab element.

Refer to the following example from W3C of Tabpanel implementation

https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html 

Screenshot

Screen recording

Screen Recording 2022-07-11 at 12.34.30 PM.mov

Workaround

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