Configure Page Layout: Unclear functionality of tab

Issue Summary

The tab functionality is unclear for the screen reader and keyboard only user. 

Steps to Reproduce

1. Open the homepage
2. Navigate to the "Assets" link and activate it
3. Navigate to "Object Schemas" and activate it
4. Navigate to the links present in the table and activate it
5. Navigate to "Object Type" dropdown and activate "Configure" option from it
6. Navigate to "Configure page layout" button and activate it
7. 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, incorrect nesting is used to code mentioned tabs.

Expected Results

1. Code interactive element such as "Attributes", "Connected Tickets", "Comments" and "History" using native <button> element.
2. Remove role="tab" and "title" attribute from <li> and provide to the <button> element of the tabs.
3. Modify the scripts of the tabs to ensure that the tabs are accessible to all users.
4. Replace the <ol> element with <ul> element.
5. Code <li> element just after the parent <ul> element instead of <div>
6. Set role="presentation" for <li> elements containing tabs.
7. Set the role for the <button> 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.)
8. Set aria-selected="true" for the active tab.
9. 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.
10. Set the role for the <div> elements displaying the contents associated with "Attributes", "Connected Tickets", "Comments" and "History" tabs as “tabpanel”.
11. Along with color, use additional visual cues (e.g. bold text formatting, border, etc.) to indicate the selected tab.
12. A working example of accessible tab functionality can be found at: https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs- manual.html
13. Use key combination such as "Shift + F2" for editing labels and to make it accessible for keyboard only user and add instruction "Use Shift + F2 keys to edit the tab labels"on the page. 
14. There should be instructions on the page providing Information on accessing drag & drop functionality with the keyboard such as "Press space bar to start a drag. When dragging you can use the arrow keys to move the item around and escape to cancel.".

Screenshot

Screen Recording

Screen Recording 2023-03-01 at 1.44.47 PM.mov

Workaround

Currently there is no known workaround for this behaviour.