gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): require empty p with aria-live (#61876)

Browse Source 
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
pkdvalis
2025-08-22 04:28:06 -04:00
committed by GitHub
parent 6df2f49ad5
commit 2ecd008816
1 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/25-front-end-development/lab-one-time-password-generator/67c562286b29447da020d407.md
+27 -14
View File
@@ -20,7 +20,7 @@ In this lab, you will generate a 6-digit OTP (One-Time Password) and display it
- An `h1` element with the ID `otp-title` and text `"OTP Generator"`.
- An `h2` element with the ID `otp-display` that either displays the message `"Click 'Generate OTP' to get a code"` or shows the generated OTP if one is available.
- A `p` element with the ID `otp-timer` that:
- A `p` element with the ID `otp-timer` and `aria-live` attribute set to a valid value that:
- Starts off empty.
- Displays `"Expires in: X seconds"` after the button is clicked, where `X` represents the remaining time before the OTP expires.
- Shows the message `"OTP expired. Click the button to generate a new OTP."` once the countdown reaches `0`.
@@ -72,13 +72,29 @@ Initially, the `h2` inside `.container` should display the message `"Click 'Gene
assert.strictEqual(document.querySelector('.container h2#otp-display').textContent.trim(), "Click 'Generate OTP' to get a code");
```
Initially, there should be a `.container` element that does not contain any `<p>` elements.
The `.container` element should contain a `p` element with the ID `otp-timer`.
```js
const container = document.querySelector('.container');
assert.exists(container, "The container element should exist");
const pElements = document.querySelectorAll('.container p');
assert.strictEqual(pElements.length, 0, "Initially, there should be no <p> elements inside '.container'");
const pElements = container.querySelectorAll('p');
assert.strictEqual(pElements.length, 1);
assert.strictEqual(pElements[0].id, "otp-timer", "The p element should have the id otp-timer");
```
The `p` element should have an `aria-live` attribute set to `assertive` or `polite`.
```js
const pElement = document.querySelector('.container p');
assert.exists(pElement?.ariaLive);
assert.oneOf(pElement?.ariaLive, ["assertive", "polite"]);
```
Initially, the `p` element should be empty.
```js
const pElement = document.querySelector('.container p');
assert.strictEqual(pElement?.innerText, "", "The `p` element should be empty");
```
The `.container` should contain a `button` element with the ID `generate-otp-button` and text `"Generate OTP"`.
@@ -236,7 +252,7 @@ clock.uninstall()
<head>
<meta charset="UTF-8" />
<title>Color Picker</title>
<title>OTP Generator</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
@@ -397,15 +413,12 @@ export const OTPGenerator = () => {
<h2 id='otp-display'>
{otp ? otp : "Click 'Generate OTP' to get a code"}
</h2>
{isCounting ? (
<p id='otp-timer'>Expires in: {secondsLeft} seconds</p>
) : (
hasGeneratedOtp && (
<p id='otp-timer'>
OTP expired. Click the button to generate a new OTP.
</p>
)
)}
<p id='otp-timer' aria-live='assertive'>
{isCounting
? `Expires in: ${secondsLeft} seconds`
: hasGeneratedOtp &&
"OTP expired. Click the button to generate a new OTP."}
</p>
<button
id='generate-otp-button'
onClick={handleGenerateOtp}