Issue Summary

General - The element is not accessible by keyboard alone and there is no conforming accessible version of the same functionality reachable from the non-conforming page.

Elements name:
1. Stages & jobs button
2. Table headers- Name, Location, Copy pattern
3. Edit link and Delete links

Location of the elements:
1. Clickable button, just below the "Default plan configuration" heading link, on the left side navigation, in the main content.
2. Table sorting buttons, just below the "Artifact definitions" heading, in the main content.
3. Edit and delete links, in the "Actions" column, in the tabular data, under the "Artifact definitions" heading, in the main content.

Additional details: While navigating with the tab key, the above-mentioned elements are not receiving the tab key focus.

Note: This issue can be split into three different tickets as mentioned instances have different functionalities and as per that expected result will be different. 

Steps to Reproduce

1. Open the home page.
2. Navigate to the "Build" link in the header and activate it.
3. Navigate to the "All build plans" links and activate it.
4. Navigate to the "View configuration plan" link in the table and activate it
5. Navigate to the left side navigation and activate the link from the "Default stage" section.
6. Navigate to the "Artifacts" link and activate it.
7. Navigate to mentioned instances and try to access them using a keyboard.
8. Observe that mentioned instance is inaccessible using the keyboard.

Actual Results

• The "Stages & jobs" interactive element is not accessible using the keyboard. Additionally, the state is missing. 
• The sorting functionality is associated with "Name", "Location", "Copy Pattern(s)", and so on interactive elements are not accessible.
• User is not able to understand the column header contains sorting functionality as well as what type of sorting is applied.
•  The "Edit" and "Delete" is not accessible using the keyboard.

This made it difficult for keyboard-only and screen-reader users to access the functionality associated with the interactive elements.

Expected Results

1. Code "Stages & jobs" interactive element using native <button> element. Additionally, set the aria-expanded attribute to "false" for the button for the initial state. Ensure that the value of the aria-expanded attribute changes on user interaction via scripting.
2. The "Location", "Copy Pattern(s)", and so on interactive elements must be coded as native <button> elements so that the appropriate role of the button will be announced for screen reader users on focus and they will also receive keyboard focus in tab traversal, and also provide tabindex="0" attribute.
3. When screen reader users navigate through the table columns in “Read“ mode, the current sort order should be announced to them. On activating the sort button, the value of “aria-sort” should be updated programmatically with the focus staying on the sort button itself.
4. Modify the scripts to ensure the buttons are accessible with a keyboard and a mouse to make the functionality accessible for keyboard-only and screen reader users.
5. Refer following link for the implementation:
   https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/
6. Use custom role="button" and tabindex="0" to ensure that this button receives keyboard focus and has an interactive role. 
7. Set the "aria-haspopup" attribute to "true" for the button.
8. Specify "aria-labelledby" attribute for the <a> element of the button and reference it via the “id” attribute of the <span> element of the name of the artifact. 
9. Provide an off-screen description of the sort functionality to help screen reader users understand the purpose of the buttons and what type of sorting is applied. for example: “The Artifact definitions table sorted by Location, Ascending” or “The Artifact definitions table sorted by copy patterns, descending”

Screenshot

Workaround

Not Available

Bug Ref: 460415