Skip to content

Commit 16fef96

Browse files
glowcloudmorsko1
glowcloud
and
morsko1
authored
fix: associate HTML labels with inputs (#9599)
Refs #8879 Co-authored-by: morsko1 <[email protected]>
1 parent 363b3ab commit 16fef96

File tree

6 files changed

+90
-29
lines changed

6 files changed

+90
-29
lines changed

‎src/core/components/auth/api-key-auth.jsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,17 @@ export default class ApiKeyAuth extends React.Component {
6666
<p>In: <code>{ schema.get("in") }</code></p>
6767
</Row>
6868
<Row>
69-
<label>Value:</label>
69+
<label htmlFor="api_key_value">Value:</label>
7070
{
7171
value ? <code> ****** </code>
72-
: <Col><Input type="text" onChange={ this.onChange } autoFocus/></Col>
72+
: <Col>
73+
<Input
74+
id="api_key_value"
75+
type="text"
76+
onChange={ this.onChange }
77+
autoFocus
78+
/>
79+
</Col>
7380
}
7481
</Row>
7582
{

‎src/core/components/auth/basic-auth.jsx‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -65,20 +65,34 @@ export default class BasicAuth extends React.Component {
6565
<Markdown source={ schema.get("description") } />
6666
</Row>
6767
<Row>
68-
<label>Username:</label>
68+
<label htmlFor="auth_username">Username:</label>
6969
{
7070
username ? <code> { username } </code>
71-
: <Col><Input type="text" required="required" name="username" onChange={ this.onChange } autoFocus/></Col>
71+
: <Col>
72+
<Input
73+
id="auth_username"
74+
type="text"
75+
required="required"
76+
name="username"
77+
onChange={ this.onChange }
78+
autoFocus
79+
/>
80+
</Col>
7281
}
7382
</Row>
7483
<Row>
75-
<label>Password:</label>
84+
<label htmlFor="auth_password">Password:</label>
7685
{
7786
username ? <code> ****** </code>
78-
: <Col><Input autoComplete="new-password"
79-
name="password"
80-
type="password"
81-
onChange={ this.onChange }/></Col>
87+
: <Col>
88+
<Input
89+
id="auth_password"
90+
autoComplete="new-password"
91+
name="password"
92+
type="password"
93+
onChange={ this.onChange }
94+
/>
95+
</Col>
8296
}
8397
</Row>
8498
{

‎src/core/components/param-body.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { PureComponent } from "react"
22
import PropTypes from "prop-types"
33
import { fromJS, List } from "immutable"
44
import { getKnownSyntaxHighlighterLanguage } from "core/utils/jsonParse"
5+
import createHtmlReadyId from "core/utils/create-html-ready-id"
56

67
const NOOP = Function.prototype
78

@@ -118,6 +119,9 @@ export default class ParamBody extends PureComponent {
118119
language = "json"
119120
}
120121

122+
const regionId = createHtmlReadyId(`${pathMethod[1]}${pathMethod[0]}_parameters`)
123+
const controlId = `${regionId}_select`
124+
121125
return (
122126
<div className="body-param" data-param-name={param.get("name")} data-param-in={param.get("in")}>
123127
{
@@ -137,14 +141,16 @@ export default class ParamBody extends PureComponent {
137141
</Button>
138142
</div>
139143
}
140-
<label htmlFor="">
144+
<label htmlFor={controlId}>
141145
<span>Parameter content type</span>
142146
<ContentType
143147
value={ consumesValue }
144148
contentTypes={ consumes }
145149
onChange={onChangeConsumes}
146150
className="body-param-content-type"
147-
ariaLabel="Parameter content type" />
151+
ariaLabel="Parameter content type"
152+
controlId={controlId}
153+
/>
148154
</label>
149155
</div>
150156

‎src/core/components/parameter-include-empty.jsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,19 @@ export default class ParameterIncludeEmpty extends Component {
3838

3939
return (
4040
<div>
41-
<label className={cx("parameter__empty_value_toggle", {
42-
"disabled": isDisabled
43-
})}>
44-
<input type="checkbox"
41+
<label
42+
htmlFor="include_empty_value"
43+
className={cx("parameter__empty_value_toggle", {
44+
"disabled": isDisabled
45+
})}
46+
>
47+
<input
48+
id="include_empty_value"
49+
type="checkbox"
4550
disabled={isDisabled}
4651
checked={!isDisabled && isIncluded}
47-
onChange={this.onCheckboxChange} />
52+
onChange={this.onCheckboxChange}
53+
/>
4854
Send empty value
4955
</label>
5056
</div>

‎src/core/components/parameters/parameters.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from "react"
22
import PropTypes from "prop-types"
33
import { Map, List } from "immutable"
44
import ImPropTypes from "react-immutable-proptypes"
5+
import createHtmlReadyId from "core/utils/create-html-ready-id"
56

67
export default class Parameters extends Component {
78

@@ -120,6 +121,8 @@ export default class Parameters extends Component {
120121
const isExecute = tryItOutEnabled && allowTryItOut
121122
const isOAS3 = specSelectors.isOAS3()
122123

124+
const regionId = createHtmlReadyId(`${pathMethod[1]}${pathMethod[0]}_requests`)
125+
const controlId = `${regionId}_select`
123126

124127
const requestBody = operation.get("requestBody")
125128

@@ -215,15 +218,17 @@ export default class Parameters extends Component {
215218
<div className="opblock-section-header">
216219
<h4 className={`opblock-title parameter__name ${requestBody.get("required") && "required"}`}>Request
217220
body</h4>
218-
<label>
221+
<label id={controlId}>
219222
<ContentType
220223
value={oas3Selectors.requestContentType(...pathMethod)}
221224
contentTypes={requestBody.get("content", List()).keySeq()}
222225
onChange={(value) => {
223226
this.onChangeMediaType({ value, pathMethod })
224227
}}
225228
className="body-param-content-type"
226-
ariaLabel="Request content type" />
229+
ariaLabel="Request content type"
230+
controlId={controlId}
231+
/>
227232
</label>
228233
</div>
229234
<div className="opblock-description-wrapper">

‎src/core/plugins/oas3/components/auth/http-auth.jsx‎

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -71,22 +71,37 @@ export default class HttpAuth extends React.Component {
7171
<Markdown source={ schema.get("description") } />
7272
</Row>
7373
<Row>
74-
<label>Username:</label>
74+
<label htmlFor="auth-basic-username">Username:</label>
7575
{
7676
username ? <code> { username } </code>
77-
: <Col><Input type="text" required="required" name="username" aria-label="auth-basic-username" onChange={ this.onChange } autoFocus/></Col>
77+
: <Col>
78+
<Input
79+
id="auth-basic-username"
80+
type="text"
81+
required="required"
82+
name="username"
83+
aria-label="auth-basic-username"
84+
onChange={ this.onChange }
85+
autoFocus
86+
/>
87+
</Col>
7888
}
7989
</Row>
8090
<Row>
81-
<label>Password:</label>
91+
<label htmlFor="auth-basic-password">Password:</label>
8292
{
8393
username ? <code> ****** </code>
84-
: <Col><Input autoComplete="new-password"
85-
name="password"
86-
type="password"
87-
aria-label="auth-basic-password"
88-
onChange={ this.onChange }/></Col>
89-
}
94+
: <Col>
95+
<Input
96+
id="auth-basic-password"
97+
autoComplete="new-password"
98+
name="password"
99+
type="password"
100+
aria-label="auth-basic-password"
101+
onChange={ this.onChange }
102+
/>
103+
</Col>
104+
}
90105
</Row>
91106
{
92107
errors.valueSeq().map( (error, key) => {
@@ -110,10 +125,18 @@ export default class HttpAuth extends React.Component {
110125
<Markdown source={ schema.get("description") } />
111126
</Row>
112127
<Row>
113-
<label>Value:</label>
128+
<label htmlFor="auth-bearer-value">Value:</label>
114129
{
115130
value ? <code> ****** </code>
116-
: <Col><Input type="text" aria-label="auth-bearer-value" onChange={ this.onChange } autoFocus/></Col>
131+
: <Col>
132+
<Input
133+
id="auth-bearer-value"
134+
type="text"
135+
aria-label="auth-bearer-value"
136+
onChange={ this.onChange }
137+
autoFocus
138+
/>
139+
</Col>
117140
}
118141
</Row>
119142
{

0 commit comments

Comments
 (0)