Add accessibility improvements to entity page tabs

[kamerynB]

Problem Description: Entity page tabs are missing accessibility features.

Expected Behavior/Solution: The tabs should have specific accessibility tags added to the HTML.

Requirements:

• [x] Add aria-role=tab to tab buttons

Requested Updates:

Tab container will have the following:

• [x] role=tablist

Tab buttons will have the following:

• [x] aria-selected="true" (false when not selected)
• [x] aria-controls="panel-1" (panel-2, panel-3 for subsequent buttons)
• [x] id="tab-1"(tab-2, tab-3 for subsequent buttons)

Tab content will have the following:

• [x] id="panel-1"
• [x] role="tabpanel"
• [x] tabindex="0"
• [ ] aria-labelledby="tab-1"

Needed for promotion: If an item on the list is not needed, it should be crossed off but not removed.

• [x] ~Wireframe/Mockup - Mike~
• [x] ~Committee discussions - Sarah~
• [x] ~Feasibility/Team discussion - Sarah~
• [x] ~Backend requirements - TBD~
• [x] Frontend requirements - Kam
• [ ] Are new regression tests required for QA - Amy
• [x] ~Questions~

UAT/LUX Examples:

• https://lux-front-tst.collections.yale.edu/view/person/34f4eec7-7a03-49c8-b1be-976c2f6ba6ba

Dependencies/Blocks: N/A

Related Github Issues: N/A

Related links: N/A

Wireframe/Mockup: There will be no physical change.

[roamye]

@kamerynB - I tabbed through prod/dev links and can't see the difference from tabbing. Is there a specific section I am looking for when tabbing?

[kamerynB]

@roamye The change is for screen readers. The accessibility team will have to check this again.

[roamye]

These were included in the 08/26 release notes but will need to be closed after accessibility reviews. If new changes are needed another issue can be opened.

[roamye]

From Kara's email on 08/27 - this needs some improvement. Kara's response blow:

For the tabs, the implementation is really close. I suggest following the implementation on MDN: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role

I’m more than happy to meet and go over any of the below: We just need to add role=tablist to the parent container.

And then to each tab button add

aria-selected="true" (false when not selected)

 aria-controls="panel-1" (panel-2, panel-3 for subsequent buttons)

 id="tab-1"(tab-2, tab-3 for subsequent buttons)

Last, we implement the aria on the tab panels.

Each div that holds the panel content (class=sc-kDDrLX hBPwkw) should have:

id="panel-1"
role="tabpanel"
tabindex="0"
aria-labelledby="tab-1"

@kamerynB - will update these changes and leave a comment on this issue once changes have been implemented.

[roamye]

From DEV 9/9 meeting - this should be moved to the 09/23 milestone.