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>

src/core/components/responses.jsx

@@ -3,6 +3,7 @@ import { fromJS, Iterable } from "immutable"
 import PropTypes from "prop-types"
 import ImPropTypes from "react-immutable-proptypes"
 import { defaultStatusCode, getAcceptControllingResponse } from "core/utils"
+import createHtmlReadyId from "../../helpers/create-html-ready-id"
 
 export default class Responses extends React.Component {
   static propTypes = {
@@ -86,17 +87,22 @@ export default class Responses extends React.Component {
     const acceptControllingResponse = isSpecOAS3 ?
       getAcceptControllingResponse(responses) : null
 
+    const regionId = createHtmlReadyId(`${method}${path}_responses`)
+    const controlId = `${regionId}_select`
+
     return (
       <div className="responses-wrapper">
         <div className="opblock-section-header">
           <h4>Responses</h4>
-            { specSelectors.isOAS3() ? null : <label>
+            { specSelectors.isOAS3() ? null : <label htmlFor={controlId}>
               <span>Response content type</span>
               <ContentType value={producesValue}
-                         onChange={this.onChangeProducesWrapper}
-                         contentTypes={produces}
+                         ariaControls={regionId}
+                         ariaLabel="Response content type"
                          className="execute-content-type"
-                         ariaLabel="Response content type" />
+                         contentTypes={produces}
+                         controlId={controlId}
+                         onChange={this.onChangeProducesWrapper} />
                      </label> }
         </div>
         <div className="responses-inner">
@@ -115,7 +121,7 @@ export default class Responses extends React.Component {
 
           }
 
-          <table className="responses-table">
+          <table aria-live="polite" className="responses-table" id={regionId} role="region">
             <thead>
               <tr className="responses-header">
                 <td className="col_header response-col_status">Code</td>