jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-03-10 19:01:13 -04:00
Code Issues Projects Releases Wiki Activity

fix(curriculum): duplicate ids in RWD accessibility quiz (#51967)

Browse Source
This commit is contained in:
Bruce Blaser
2023-11-09 02:51:41 -08:00
committed by GitHub
parent 65673ee2fc
commit 3932fb4cc4
29 changed files with 78 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
View File

@@ -11,13 +11,26 @@ As with the other `input` and `label` elements, link the `textarea` to its corre
# --hints--
You should give the `label` element a `for` attribute.
You should give the `textarea` element an `id` attribute.
```js
assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor);
assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id);
```
You should give the `textarea` element an `id` attribute matching the `for` attribute of the `label` element.
You cannot include spaces in the `id` for the `textarea` element.
```js
assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id, /^\S+$/);
```
You must choose a different `id` for the `textarea` element because another element is using that `id`.
```js
const textareaId = document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id;
assert.equal(document.querySelectorAll(`[id='${textareaId.replaceAll(/(['\\])/g, "\\$1")}']`).length, 1);
```
You should give the `label` element a `for` attribute matching the `id` of the `textarea` element.
```js
assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id);
@@ -29,6 +42,12 @@ You should give the `textarea` element a `name` attribute.
assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name);
```
You should use at least one non-space character in the `name` attribute for the `textarea`.
```js
assert.match(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name, /\S/);
```
# --seed--
## --seed-contents--

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
View File

@@ -148,10 +148,10 @@ assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? doc
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
View File

@@ -131,10 +131,10 @@ assert.exists(document.querySelector('footer > address'));
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
View File

@@ -132,10 +132,10 @@ assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Fr
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
View File

@@ -138,10 +138,10 @@ assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
View File

@@ -163,10 +163,10 @@ assert.equal(display, 'block');
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
View File

@@ -160,10 +160,10 @@ for (let elem of document.querySelectorAll('li > a')) {
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
View File

@@ -156,10 +156,10 @@ assert.equal(cursor, 'pointer');
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
View File

@@ -143,10 +143,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
View File

@@ -145,10 +145,10 @@ assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
View File

@@ -156,10 +156,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
View File

@@ -161,10 +161,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
View File

@@ -129,10 +129,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px')
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
View File

@@ -147,10 +147,10 @@ assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddi
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
View File

@@ -227,10 +227,10 @@ assert.isAtLeast(valInPx, 13);
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
View File

@@ -140,10 +140,10 @@ assert.equal(textAlign, 'left');
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
View File

@@ -140,10 +140,10 @@ assert.equal(minWidth, '55px');
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
View File

@@ -144,10 +144,10 @@ document.querySelectorAll('.info label').forEach(el => {
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
View File

@@ -161,10 +161,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAl
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
View File

@@ -147,10 +147,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
View File

@@ -137,10 +137,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBotto
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
View File

@@ -143,10 +143,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding,
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
View File

@@ -175,10 +175,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px so
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
View File

@@ -141,10 +141,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent,
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
View File

@@ -155,10 +155,10 @@ assert.isAtLeast(contrast(backgroundColour, aColour), 7);
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
View File

@@ -153,10 +153,10 @@ assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
View File

@@ -131,10 +131,10 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smo
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
View File

@@ -147,10 +147,10 @@ assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>

4
curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
View File

@@ -149,10 +149,10 @@ assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.len
</select>
</div>
<div class="question-block">
<label for="css-questions">Do you have any questions:</label>
<label for="css-textarea">Do you have any questions:</label>
</div>
<div class="answer">
<textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
<textarea id="css-textarea" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
</div>
</div>
</section>