fix(curriculum): replace D.O.B. acronym in accessibility quiz (freeCodeCamp#54829)

Co-authored-by: Naomi the Technomancer <[email protected]>

Author: Supravisor

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md

@@ -93,7 +93,7 @@ assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
             <input id="student-email" />
           </div>
           <div class="info">
-            <label for="birth-date">D.O.B.:</label>
+            <label for="birth-date">Date of Birth:</label>
             <input id="birth-date" />
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md

@@ -60,7 +60,7 @@ assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
             <input type="email" name="student-email" id="student-email" />
           </div>
           <div class="info">
-            <label for="birth-date">D.O.B.:</label>
+            <label for="birth-date">Date of Birth:</label>
             <input type="date" name="birth-date" id="birth-date" />
           </div>
         </section>

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md

@@ -7,28 +7,76 @@ dashedName: step-23
 
 # --description--
 
-Arguably, `D.O.B.` is 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 label, is to add text only a screen reader can read.
+Within the second `section` element, add two `div` elements with a class of `question-block`.
 
-Append a `span` element with a class of `sr-only` to the current text content of the third `label` element.
+Then, within each `div.question-block` element, add one `h3` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
 
 # --hints--
 
-You should add a `span` element within the third `label` element.
+You should nest two `div` elements within the second `section` element.
 
 ```js
-assert.exists(document.querySelector('.info:nth-of-type(3) > label > span'));
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2);
 ```
 
-You should give the `span` element a class of `sr-only`.
+You should give the first new `div` element a class of `question-block`.
 
 ```js
-assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only');
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block');
 ```
 
-You should place the `span` after the text content `D.O.B.`.
+You should give the second new `div` element a class of `question-block`.
 
 ```js
-assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\.<span/);
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
+```
+
+You should nest one `h3` element within each `div.question-block` element.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.length, 2);
+```
+
+You should give the first `h3` element text of `1`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[0]?.textContent, '1');
+```
+
+You should give the second `h3` element text of `2`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > h3')?.[1]?.textContent, '2');
+```
+
+You should nest one `fieldset` element within each `div.question-block` element.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
+```
+
+You should place the first `fieldset` element after the first `h3` element.
+
+```js
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > h3 + fieldset'));
+```
+
+You should place the second `fieldset` element after the second `h3` element.
+
+```js
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > h3 + fieldset'));
+```
+
+You should give the first `fieldset` element a class of `question`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question');
+```
+
+You should give the second `fieldset` element a class of `question`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question');
 ```
 
 # --seed--
@@ -69,16 +117,17 @@ assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML,
             <label for="student-email">Email:</label>
             <input type="email" name="student-email" id="student-email" />
           </div>
---fcc-editable-region--
           <div class="info">
-            <label for="birth-date">D.O.B.</label>
+            <label for="birth-date">Date of Birth:</label>
             <input type="date" name="birth-date" id="birth-date" />
           </div>
---fcc-editable-region--
         </section>
+--fcc-editable-region--
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
+
         </section>
+--fcc-editable-region--
         <section role="region" aria-labelledby="css-questions">
           <h2 id="css-questions">CSS</h2>
         </section>
@@ -136,4 +185,16 @@ h2 {
   border-bottom: 4px solid #dfdfe2;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 ```

curriculum/challenges/english/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md

@@ -7,14 +7,34 @@ dashedName: step-24
 
 # --description--
 
-Within the `span` element, add the text `(Date of Birth)`.
+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.
+
+Append a `span` element with a `class` of `sr-only` to each of the `h3` elements.
 
 # --hints--
 
-You should give the `span` element the text `(Date of Birth)`.
+You should add a `span` element within the first `h3` element.
+
+```js
+assert.exists(document.querySelector('h3 > span'));
+```
+
+You should give the first `span` element a `class` of `sr-only`.
 
 ```js
-assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.textContent, '(Date of Birth)');
+assert.equal(document.querySelector('span')?.className, 'sr-only');
+```
+
+You should add a `span` element within the second `h3` element.
+
+```js
+assert.exists(document.querySelectorAll('h3 > span')[1]);
+```
+
+You should give the second `span` element a `class` of `sr-only`.
+
+```js
+assert.equal(document.querySelectorAll('span')[1]?.className, 'sr-only');
 ```
 
 # --seed--
@@ -55,15 +75,23 @@ assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.text
             <label for="student-email">Email:</label>
             <input type="email" name="student-email" id="student-email" />
           </div>
---fcc-editable-region--
           <div class="info">
-            <label for="birth-date">D.O.B.<span class="sr-only"></span></label>
+            <label for="birth-date">Date of Birth:</label>
             <input type="date" name="birth-date" id="birth-date" />
           </div>
---fcc-editable-region--
         </section>
         <section role="region" aria-labelledby="html-questions">
           <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+--fcc-editable-region--
+            <h3>1</h3>
+            <fieldset class="question"></fieldset>
+          </div>
+          <div class="question-block">
+            <h3>2</h3>
+--fcc-editable-region--
+            <fieldset class="question"></fieldset>
+          </div>
         </section>
         <section role="region" aria-labelledby="css-questions">
           <h2 id="css-questions">CSS</h2>
@@ -122,4 +150,16 @@ h2 {
   border-bottom: 4px solid #dfdfe2;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 ```