Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: associate HTML labels with inputs #9599

Merged
merged 3 commits into from
Feb 15, 2024
Merged

fix: associate HTML labels with inputs #9599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9cb71a3
fix: associate api key input with label
morsko1 Oct 3, 2023
c6cc48c
fix: associate HTML labels with inputs
glowcloud Feb 15, 2024
59f89a3
Merge branch 'master' into issue-8879
char0n Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions src/core/components/auth/api-key-auth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
{
Expand Down
28 changes: 21 additions & 7 deletions src/core/components/auth/basic-auth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
{
Expand Down
10 changes: 8 additions & 2 deletions src/core/components/param-body.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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")}>
{
Expand All @@ -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>

Expand Down
16 changes: 11 additions & 5 deletions src/core/components/parameter-include-empty.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 7 additions & 2 deletions src/core/components/parameters/parameters.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down Expand Up @@ -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")

Expand Down Expand Up @@ -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">
Expand Down
45 changes: 34 additions & 11 deletions src/core/plugins/oas3/components/auth/http-auth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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>
{
Expand Down
Loading