Project Automation: Missing keyboard support to select Rules in automation

Issue Summary

Missing keyboard support to select the Rules for the automation main content area of Automation.

Steps to Reproduce

1. Select any Project from the Projects header.
2. In the available Project, select the Project settings from the sidebar in the bottom section.
3. In the Project settings nav bar, select Automation.
4. For the available Automation main content area, navigate to the List to switch between All rules, Project rules, and Global rules using Keyboard and screen reader.

Actual Results

In the main content area of the Automation setting, the interactive elements such as All rules, Project rules, and Global rules are inaccessible by the screen reader and keyboard-only user. These elements can be accessed with a mouse, but cannot be accessed with keyboard and screen reader users. Hence this makes the user difficult to use/access the available content on the page.

Expected Results

Ensure the mentioned elements receive screen reader and keyboard focus and could be activated.

Implement the following to make the element accessible:

• Code the elements into an <button> element.
• Provide the structure of the elements in a tab format.
• Provide the role="tablist" to the parent <div> element, role="tab" to the <button> element, and the role="tabpanel" to the section which is available on activating the tab button.
• User should be able to navigate between the tabs with arrow keys and the tabs should be activated on "Enter" key press.

Refer to the following code snippet:
 

<div class="sc-bvTASY cQyQWO"> 
<div role="tablist" class="sc-cgHJcJ fGWLPz"> 
<button role="tab" aria-selected="false" class="sc-eNPDpu bkpETE"aria-current="page"> All rules</button> 
<button role="tab" aria-selected="false" class="sc-eNPDpu bkpETE"> Project rules</button> 
<button role="tab" aria-selected="false" class="sc-eNPDpu bkpETE"> Global rules</button>
(..)
<div role="tabpanel" class="sc-cqpYsc fKfHEi">
</div> </div>

Refer to the following link for a better implementation: https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html 

Screenshot

Screen recording

Screen Recording 2022-11-28 at 4.17.18 PM.mov

Workaround

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