Search Result selection (select any of the options from the search results) : Unclear tab functionality

Issue Summary

The tab functionality is unclear to the user.

Note: A similar issues observed on below pages

• All references modal dialog (that becomes appears on activating "View all inbound references" link)

Steps to Reproduce

1. Open the homepage
2. Navigate to the "Assets" link and activate it
3. Navigate to "Search for object" and activate it
4. Navigate to the input field and search for the object
5. Navigate to the links present in the table and activate it
6. Turn on the screen reader and navigate to mentioned tabs

Actual Results

The functionality of the tabs Attributes", "Connected Tickets", "Comments" and "History" in the main content area is unclear for screen reader users. On activating the tabs, the content gets dynamically updated below. Although the dynamic change in the content is easier to understand for sighted users, it is not intuitive for screen reader users. Additionally, the HTML validator generates an error as role="tablist" not defined for the <ul> element of mentioned tabs.

Expected Results

1. Remove role="tab" from <li> and provide to the <a> element of the tabs.
2. Modify the scripts of the tabs to ensure that the tabs are accessible to all users.
3. Replace the <ol> element with <ul> element
4. Set the role for the <ul> element containing tabs as "tablist".
5. Set role="presentation" for <li> elements containing tabs.
6. Set the role for the <a> element used for displaying "Attributes", "Connected Tickets", "Comments" and "History" as a “tab”. 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.)
7. Set aria-selected="true" for the active tab.
8. Specify an "id" attribute for the <div> element used to display the content of each tab. In addition, ensure that the value of the "id" attribute is referenced correctly via the aria-controls attribute of each tab.
9. Set the role for the <div> elements displaying the contents associated with "Attributes", "Connected Tickets", "Comments" and "History" tabs as “tabpanel”.
10. Along with color, use additional visual cues (e.g. bold text formatting, border, etc.) to indicate the selected tab.
11. A working example of accessible tab functionality can be found at: https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html

Screenshot

Screenshot 2: All references modal dialog 

Workaround

Not Available 

Bug Ref: 746258

Bulldog Ref: JSMDC-13214