feat: Accessibility improvements (#7224)

* feat: adds a11y for ContentType & Responses region

* feat: adds a11y to expandable/collapsible elements

* fix: add aria label to select element for content types

* fix: add aria label prop to contentType component

* Change optag to h3 for better tag hierarchy


Co-authored-by: ediiotero <eddie.otero@oddball.io>
Co-authored-by: Mike Lumetta <mike.lumetta@adhocteam.us>
Co-authored-by: Alexander Valencia <alex.valencia@adhocteam.us>

test/e2e-cypress/tests/features/model-collapse.js

@@ -18,16 +18,16 @@ function ModelCollapseTest(baseUrl, urlFragment) {
     .get("#model-Pet")
     .should("exist")
   })
-  
+
   it("Models section should collapse and expand when toggled", () => {
     cy.visit(baseUrl)
-    .get(".models h4")
+    .get(".models h4 .models-control")
     .click()
     .get(".models")
     .should("not.have.class", "is-open")
     .get("#model-Order")
     .should("not.exist")
-    .get(".models h4")
+    .get(".models h4 .models-control")
     .click()
     .get(".models")
     .should("have.class", "is-open")
@@ -35,28 +35,15 @@ function ModelCollapseTest(baseUrl, urlFragment) {
     .should("exist")
   })
 
-  it("Model should collapse and expand when toggled clicking title", () => {
+  it("Model should collapse and expand when toggled clicking button", () => {
     cy.visit(baseUrl)
-    .get("#model-User .model-box .pointer:nth-child(1)")
+    .get("#model-User .model-box .model-box-control")
     .click()
     .get("#model-User .model-box .model .inner-object")
     .should("exist")
-    .get("#model-User .model-box .pointer:nth-child(1)")
-    .click()
-    .get("#model-User .model-box .model .inner-object")
-    .should("not.exist")
-  })
-
-  it("Model should collapse and expand when toggled clicking arrow", () => {
-    cy.visit(baseUrl)
-    .get("#model-User .model-box .pointer:nth-child(2)")
-    .click()
-    .get("#model-User .model-box .model .inner-object")
-    .should("exist")
-    .get("#model-User .model-box .pointer:nth-child(2)")
+    .get("#model-User .model-box .model-box-control")
     .click()
     .get("#model-User .model-box .model .inner-object")
     .should("not.exist")
   })
 }
-

test/unit/components/operation-tag.jsx

@@ -44,6 +44,7 @@ describe("<OperationTag/>", function(){
 
     const opblockTag = wrapper.find(".opblock-tag")
     expect(opblockTag.length).toEqual(1)
+    expect(opblockTag.getNode().type).toEqual("h3")
 
     const renderedLink = wrapper.find("Link")
     expect(renderedLink.length).toEqual(1)