fix: associate HTML labels with inputs (#9599)

Refs #8879 Co-authored-by: morsko1 <morssko1@gmail.com>
swagger-api · Feb 15, 2024 · 16fef96 · 16fef96
1 parent 363b3ab
commit 16fef96
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 29 deletions.
diff --git a/src/core/components/auth/api-key-auth.jsx b/src/core/components/auth/api-key-auth.jsx
@@ -66,10 +66,17 @@ export default class ApiKeyAuth extends React.Component {
           <p>In: <code>{ schema.get("in") }</code></p>
         </Row>
         <Row>
-          <label>Value:</label>
+          <label htmlFor="api_key_value">Value:</label>
           {
             value ? <code> ****** </code>
-                  : <Col><Input type="text" onChange={ this.onChange } autoFocus/></Col>
+                  : <Col>
+                      <Input 
+                        id="api_key_value" 
+                        type="text" 
+                        onChange={ this.onChange } 
+                        autoFocus
+                      />
+                    </Col>
           }
         </Row>
         {

diff --git a/src/core/components/auth/basic-auth.jsx b/src/core/components/auth/basic-auth.jsx
@@ -65,20 +65,34 @@ export default class BasicAuth extends React.Component {
           <Markdown source={ schema.get("description") } />
         </Row>
         <Row>
-          <label>Username:</label>
+          <label htmlFor="auth_username">Username:</label>
           {
             username ? <code> { username } </code>
-                     : <Col><Input type="text" required="required" name="username" onChange={ this.onChange } autoFocus/></Col>
+                     : <Col>
+                          <Input 
+                            id="auth_username" 
+                            type="text" 
+                            required="required" 
+                            name="username" 
+                            onChange={ this.onChange } 
+                            autoFocus
+                          />
+                        </Col>
           }
         </Row>
         <Row>
-          <label>Password:</label>
+          <label htmlFor="auth_password">Password:</label>
             {
               username ? <code> ****** </code>
-                       : <Col><Input autoComplete="new-password"
-                                     name="password"
-                                     type="password"
-                                     onChange={ this.onChange }/></Col>
+                       : <Col>
+                            <Input 
+                              id="auth_password"
+                              autoComplete="new-password"
+                              name="password"
+                              type="password"
+                              onChange={ this.onChange }
+                            />
+                          </Col>
             }
         </Row>
         {

diff --git a/src/core/components/param-body.jsx b/src/core/components/param-body.jsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from "react"
 import PropTypes from "prop-types"
 import { fromJS, List } from "immutable"
 import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"
+import createHtmlReadyId from "core/utils/create-html-ready-id"
 
 const NOOP = Function.prototype
 
@@ -118,6 +119,9 @@ export default class ParamBody extends PureComponent {
       language = "json"
     }
 
+    const regionId = createHtmlReadyId(`${pathMethod[1]}${pathMethod[0]}_parameters`)
+    const controlId = `${regionId}_select`
+
     return (
       <div className="body-param" data-param-name={param.get("name")} data-param-in={param.get("in")}>
         {
@@ -137,14 +141,16 @@ export default class ParamBody extends PureComponent {
                          </Button>
                          </div>
           }
-          <label htmlFor="">
+          <label htmlFor={controlId}>
             <span>Parameter content type</span>
             <ContentType
               value={ consumesValue }
               contentTypes={ consumes }
               onChange={onChangeConsumes}
               className="body-param-content-type"
-              ariaLabel="Parameter content type" />
+              ariaLabel="Parameter content type" 
+              controlId={controlId}
+            />
           </label>
         </div>
 

diff --git a/src/core/components/parameter-include-empty.jsx b/src/core/components/parameter-include-empty.jsx
@@ -38,13 +38,19 @@ export default class ParameterIncludeEmpty extends Component {
 
     return (
       <div>
-        <label className={cx("parameter__empty_value_toggle", {
-          "disabled": isDisabled
-        })}>
-          <input type="checkbox" 
+        <label 
+          htmlFor="include_empty_value" 
+          className={cx("parameter__empty_value_toggle", {
+            "disabled": isDisabled
+          })}
+        >
+          <input 
+            id="include_empty_value"
+            type="checkbox" 
             disabled={isDisabled}
             checked={!isDisabled && isIncluded}
-            onChange={this.onCheckboxChange} />
+            onChange={this.onCheckboxChange} 
+          />
           Send empty value
         </label>
       </div>

diff --git a/src/core/components/parameters/parameters.jsx b/src/core/components/parameters/parameters.jsx
@@ -2,6 +2,7 @@ import React, { Component } from "react"
 import PropTypes from "prop-types"
 import { Map, List } from "immutable"
 import ImPropTypes from "react-immutable-proptypes"
+import createHtmlReadyId from "core/utils/create-html-ready-id"
 
 export default class Parameters extends Component {
 
@@ -120,6 +121,8 @@ export default class Parameters extends Component {
     const isExecute = tryItOutEnabled && allowTryItOut
     const isOAS3 = specSelectors.isOAS3()
 
+    const regionId = createHtmlReadyId(`${pathMethod[1]}${pathMethod[0]}_requests`)
+    const controlId = `${regionId}_select`
 
     const requestBody = operation.get("requestBody")
 
@@ -215,15 +218,17 @@ export default class Parameters extends Component {
             <div className="opblock-section-header">
               <h4 className={`opblock-title parameter__name ${requestBody.get("required") && "required"}`}>Request
                 body</h4>
-              <label>
+              <label id={controlId}>
                 <ContentType
                   value={oas3Selectors.requestContentType(...pathMethod)}
                   contentTypes={requestBody.get("content", List()).keySeq()}
                   onChange={(value) => {
                     this.onChangeMediaType({ value, pathMethod })
                   }}
                   className="body-param-content-type"
-                  ariaLabel="Request content type" />
+                  ariaLabel="Request content type" 
+                  controlId={controlId}
+                />
               </label>
             </div>
             <div className="opblock-description-wrapper">

diff --git a/src/core/plugins/oas3/components/auth/http-auth.jsx b/src/core/plugins/oas3/components/auth/http-auth.jsx
@@ -71,22 +71,37 @@ export default class HttpAuth extends React.Component {
           <Markdown source={ schema.get("description") } />
         </Row>
         <Row>
-          <label>Username:</label>
+          <label htmlFor="auth-basic-username">Username:</label>
           {
             username ? <code> { username } </code>
-              : <Col><Input type="text" required="required" name="username" aria-label="auth-basic-username" onChange={ this.onChange } autoFocus/></Col>
+              : <Col>
+                  <Input 
+                    id="auth-basic-username"
+                    type="text"
+                    required="required"
+                    name="username"
+                    aria-label="auth-basic-username"
+                    onChange={ this.onChange }
+                    autoFocus
+                  />
+                </Col>
           }
         </Row>
         <Row>
-          <label>Password:</label>
+          <label htmlFor="auth-basic-password">Password:</label>
             {
               username ? <code> ****** </code>
-                       : <Col><Input autoComplete="new-password"
-                                     name="password"
-                                     type="password"
-                                     aria-label="auth-basic-password"
-                                     onChange={ this.onChange }/></Col>
-            }
+                       : <Col>
+                            <Input 
+                              id="auth-basic-password"
+                              autoComplete="new-password"
+                              name="password"
+                              type="password"
+                              aria-label="auth-basic-password"
+                              onChange={ this.onChange }
+                            />
+                          </Col>
+          }
         </Row>
         {
           errors.valueSeq().map( (error, key) => {
@@ -110,10 +125,18 @@ export default class HttpAuth extends React.Component {
               <Markdown source={ schema.get("description") } />
             </Row>
             <Row>
-              <label>Value:</label>
+              <label htmlFor="auth-bearer-value">Value:</label>
               {
                 value ? <code> ****** </code>
-              : <Col><Input type="text" aria-label="auth-bearer-value" onChange={ this.onChange } autoFocus/></Col>
+              : <Col>
+                  <Input
+                    id="auth-bearer-value"
+                    type="text"
+                    aria-label="auth-bearer-value"
+                    onChange={ this.onChange }
+                    autoFocus
+                  />
+                </Col>
           }
         </Row>
         {