chore(curriculum): test input and label are linked (#60909)

This commit is contained in:
Anna
2025-06-18 03:58:43 -04:00
committed by GitHub
parent c43429a9b1
commit 06ab8cd32e

View File

@@ -20,6 +20,7 @@ demoType: onClick
1. You should have a `fieldset` element with class of `radio-group`.
1. Inside `.radio-group` you should have a set of `input` elements with the type `radio` and relevant labels for selecting availability options (e.g., Full-Time, Part-Time). The group `name` should be `availability`.
1. You should have a `textarea` element with the id `message` for entering a message.
1. You should associate every `input` element with a `label` element.
1. You should have a `button` element with the type `submit` for submitting the form.
1. Add a `:focus` pseudo-class to the `input` and `textarea` elements to change their border color when focused.
1. The `input`, `select` and `textarea` elements should have an `:invalid` pseudo-class that changes the border color to red when invalid input is detected.
@@ -83,6 +84,18 @@ You should have a `textarea` element with the id `message` for entering a messag
assert.isNotEmpty(document.querySelectorAll("div.container > form textarea#message"));
```
You should associate every `input` element with a `label` element.
```js
const els = document.querySelectorAll('input');
assert.isNotEmpty(els);
els.forEach(input => {
const label = document.querySelector(`label[for="${input.id}"]`) || input.parentElement;
assert.exists(label);
assert.equal(label.tagName, "LABEL");
})
```
You should have a `button` element with the type `submit` for submitting the form.
```js