fix: add aria label to select element for content types (#7133)

Co-authored-by: ediiotero <[email protected]>
Co-authored-by: Mike Lumetta <[email protected]>

Author: 3 people

src/core/components/content-type.jsx

@@ -11,7 +11,8 @@ export default class ContentType extends React.Component {
     contentTypes: PropTypes.oneOfType([ImPropTypes.list, ImPropTypes.set, ImPropTypes.seq]),
     value: PropTypes.string,
     onChange: PropTypes.func,
-    className: PropTypes.string
+    className: PropTypes.string,
+    ariaLabel: PropTypes.string
   }
 
   static defaultProps = {
@@ -40,14 +41,14 @@ export default class ContentType extends React.Component {
   onChangeWrapper = e => this.props.onChange(e.target.value)
 
   render() {
-    let { contentTypes, className, value } = this.props
+    let { contentTypes, className, value, ariaLabel } = this.props
 
     if ( !contentTypes || !contentTypes.size )
       return null
 
     return (
       <div className={ "content-type-wrapper " + ( className || "" ) }>
-        <select className="content-type" value={value || ""} onChange={this.onChangeWrapper} >
+        <select className="content-type" aria-label={ariaLabel} value={value || ""} onChange={this.onChangeWrapper} >
           { contentTypes.map( (val) => {
             return <option key={ val } value={ val }>{ val }</option>
           }).toArray()}

src/core/components/param-body.jsx

@@ -133,7 +133,12 @@ export default class ParamBody extends PureComponent {
           }
           <label htmlFor="">
             <span>Parameter content type</span>
-            <ContentType value={ consumesValue } contentTypes={ consumes } onChange={onChangeConsumes} className="body-param-content-type" />
+            <ContentType 
+              value={ consumesValue } 
+              contentTypes={ consumes } 
+              onChange={onChangeConsumes} 
+              className="body-param-content-type" 
+              ariaLabel="Parameter content type" />
           </label>
         </div>
 

src/core/components/parameters/parameters.jsx

@@ -220,7 +220,8 @@ export default class Parameters extends Component {
                   onChange={(value) => {
                     this.onChangeMediaType({ value, pathMethod })
                   }}
-                  className="body-param-content-type" />
+                  className="body-param-content-type" 
+                  ariaLabel="Request content type" />
               </label>
             </div>
             <div className="opblock-description-wrapper">

src/core/components/response.jsx

@@ -197,6 +197,7 @@ export default class Response extends React.Component {
                       : Seq()
                   }
                   onChange={this._onContentTypeChange}
+                  ariaLabel="Media Type"
                 />
                 {controlsAcceptHeader ? (
                   <small className="response-control-media-type__accept-message">

src/core/components/responses.jsx

@@ -95,7 +95,8 @@ export default class Responses extends React.Component {
               <ContentType value={producesValue}
                          onChange={this.onChangeProducesWrapper}
                          contentTypes={produces}
-                         className="execute-content-type"/>
+                         className="execute-content-type"
+                         ariaLabel="Response content type" />
                      </label> }
         </div>
         <div className="responses-inner">