dan/oxc
1
0
Fork 0
mirror of https://github.com/danbulant/oxc synced 2026-05-19 04:08:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(linter/jsx-a11y): add label-has-associated-control (#5163)

Browse source
This commit is contained in:
Billy Levin 2024-08-27 04:33:55 +01:00 committed by GitHub
parent b479afdafc
commit a6e97690a7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 2212 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Cargo.lock generated
View file

@ -1619,6 +1619,7 @@ dependencies = [
"bitflags 2.6.0",
"convert_case",
"dashmap 6.0.1",
"globset",
"insta",
"itertools",
"json-strip-comments",

1
crates/oxc_linter/Cargo.toml
View file

@ -52,6 +52,7 @@ once_cell = { workspace = true }
memchr = { workspace = true }
json-strip-comments = { workspace = true }
schemars = { workspace = true, features = ["indexmap2"] }
globset = { workspace = true }
simdutf8 = { workspace = true }
[dev-dependencies]

2
crates/oxc_linter/src/rules.rs
View file

@ -357,6 +357,7 @@ mod jsx_a11y {
pub mod html_has_lang;
pub mod iframe_has_title;
pub mod img_redundant_alt;
pub mod label_has_associated_control;
pub mod lang;
pub mod media_has_caption;
pub mod mouse_events_have_key_events;
@ -793,6 +794,7 @@ oxc_macros::declare_all_lint_rules! {
jsx_a11y::lang,
jsx_a11y::iframe_has_title,
jsx_a11y::img_redundant_alt,
jsx_a11y::label_has_associated_control,
jsx_a11y::media_has_caption,
jsx_a11y::mouse_events_have_key_events,
jsx_a11y::no_access_key,

1591
crates/oxc_linter/src/rules/jsx_a11y/label_has_associated_control.rs Normal file
View file

File diff suppressed because it is too large Load diff

617
crates/oxc_linter/src/snapshots/label_has_associated_control.snap Normal file
View file

@ -0,0 +1,617 @@
---
source: crates/oxc_linter/src/tester.rs
---
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id"><span><span><span>A label</span></span></span></label>
· ───────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id" aria-label="A label" />
· ──────────────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id" aria-labelledby="A label" />
· ───────────────────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel htmlFor="js_id" aria-label="A label" />
· ────────────────────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel htmlFor="js_id" label="A label" />
· ───────────────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel htmlFor="js_id" aria-label="A label" />
· ────────────────────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id" label="A label" />
· ─────────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label>A label<input /></label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label>A label<textarea /></label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><img alt="A label" /><input /></label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><img aria-label="A label" /><input /></label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span>A label<input /></span></label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><span>A label<input /></span></span></label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
× Unterminated string
╭─[label_has_associated_control.tsx:1:71]
1 │ <label><span><span><span>A label<input /></span></span></span></label>'
· ─
╰────
× Expected a semicolon or an implicit semicolon after a statement, but found none
╭─[label_has_associated_control.tsx:1:71]
1 │ <label><span><span><span>A label<input /></span></span></span></label>'
· ▲
╰────
help: Try insert a semicolon here
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><span><span><span>A label</span><input /></span></span></span></label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><span><span><span aria-label="A label" /><input /></span></span></span></label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><span><span><input aria-label="A label" /></span></span></span></label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span>A label<CustomInput /></span></label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span>A label<CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span label="A label"><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span>A label<CustomInput /></span></label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span>A label<CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id" />
· ─────────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id"><input /></label>
· ───────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id"><textarea /></label>
· ───────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label>A label</label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:6]
1 │ <div><label /><input /></div>
· ─────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:6]
1 │ <div><label>A label</label><input /></div>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel aria-label="A label" />
· ────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel label="A label" />
· ───────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel aria-label="A label" />
· ────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label label="A label" />
· ─────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><CustomInput /></span></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><CustomInput /></span></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id" />
· ─────────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id"><input /></label>
· ───────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id"><textarea /></label>
· ───────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label>A label</label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:6]
1 │ <div><label /><input /></div>
· ─────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:6]
1 │ <div><label>A label</label><input /></div>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel aria-label="A label" />
· ────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel label="A label" />
· ───────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel aria-label="A label" />
· ────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label label="A label" />
· ─────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><CustomInput /></span></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><CustomInput /></span></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id" />
· ─────────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id"><input /></label>
· ───────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id"><textarea /></label>
· ───────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label>A label</label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:6]
1 │ <div><label /><input /></div>
· ─────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:6]
1 │ <div><label>A label</label><input /></div>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel aria-label="A label" />
· ────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel label="A label" />
· ───────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel aria-label="A label" />
· ────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label label="A label" />
· ─────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><CustomInput /></span></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><CustomInput /></span></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id" />
· ─────────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id"><input /></label>
· ───────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label htmlFor="js_id"><textarea /></label>
· ───────────────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label>A label</label>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:6]
1 │ <div><label /><input /></div>
· ─────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:6]
1 │ <div><label>A label</label><input /></div>
· ───────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel aria-label="A label" />
· ────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel label="A label" />
· ───────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel aria-label="A label" />
· ────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label label="A label" />
· ─────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><CustomInput /></span></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <label><span><CustomInput /></span></label>
· ───────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must have accessible text.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel><span><CustomInput /></span></CustomLabel>
· ─────────────
╰────
help: Ensure the label either has text inside it or is accessibly labelled using an attribute such as `aria-label`, or `aria-labelledby`. You can mark more attributes as accessible labels by configuring the `labelAttributes` option.
⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
╭─[label_has_associated_control.tsx:1:1]
1 │ <CustomLabel aria-label="A label" />
· ────────────────────────────────────
╰────
help: Either give the label a `htmlFor` attribute with the id of the associated control, or wrap the label around the control.