mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-04 17:01:16 -05:00
fix(curriculum): update the tests and instructions of the step 24 workshop accessibility quiz challenge (#60766)
This commit is contained in:
@@ -9,7 +9,7 @@ dashedName: step-24
|
||||
|
||||
The question numbers are not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the element, is to add text only a screen reader can read.
|
||||
|
||||
Nest a `span` element with a `class` of `sr-only` after the number in each of the `h3` elements.
|
||||
Nest a `span` element with a `class` of `sr-only` before the number in each of the `h3` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -37,6 +37,18 @@ You should give the second `span` element a `class` of `sr-only`.
|
||||
assert.equal(document.querySelectorAll('span')[1]?.className, 'sr-only');
|
||||
```
|
||||
|
||||
You should add the `span` element before the number 1 within the first `h3` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('span')?.nextSibling?.textContent, '1');
|
||||
```
|
||||
|
||||
You should add the `span` element before the number 2 within the second `h3` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('span')[1]?.nextSibling?.textContent, '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
Reference in New Issue
Block a user