feat(curriculum) : remove jQuery from legacy applied accessibility (freeCodeCamp#55916)

Co-authored-by: Krzysztof G. <[email protected]>

Author: a2937

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md

@@ -28,7 +28,7 @@ Camper Cat happens to be both a coding ninja and an actual ninja, who is buildin
 Your `img` tag should have an `alt` attribute and it should not be empty.
 
 ```js
-assert($('img').attr('alt'));
+assert.isNotEmpty(document.querySelector('img')?.getAttribute('alt'));
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md

@@ -31,25 +31,25 @@ Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competi
 Your code should add one `input` tag for the date selector field.
 
 ```js
-assert($('input').length == 2);
+assert.lengthOf(document.querySelectorAll('input'), 2);
 ```
 
 Your `input` tag should have a `type` attribute with a value of `date`.
 
 ```js
-assert($('input').attr('type') == 'date');
+assert.equal(document.querySelector('input')?.getAttribute('type'), 'date');
 ```
 
 Your `input` tag should have an `id` attribute with a value of `pickdate`.
 
 ```js
-assert($('input').attr('id') == 'pickdate');
+assert.equal(document.querySelector('input')?.getAttribute('id'),'pickdate');
 ```
 
 Your `input` tag should have a `name` attribute with a value of `date`.
 
 ```js
-assert($('input').attr('name') == 'date');
+assert.equal(document.querySelector('input')?.getAttribute('name'), 'date');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md

@@ -27,7 +27,9 @@ Camper Cat is testing different styles for an important button, but the yellow (
 Your code should change the text `color` for the `button` to the dark blue.
 
 ```js
-assert($('button').css('color') == 'rgb(0, 51, 102)');
+const button = document.querySelector('button');
+const buttonColor = window.getComputedStyle(button).color; 
+assert.equal(buttonColor, 'rgb(0, 51, 102)');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md

@@ -26,13 +26,13 @@ Camper Cat is experimenting with using color for his blog text and background, b
 Your code should only change the lightness value for the text `color` property to a value of 15%.
 
 ```js
-assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
+assert.match(code ,/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi);
 ```
 
 Your code should only change the lightness value for the `background-color` property to a value of 55%.
 
 ```js
-assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
+assert.match(code ,/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi);
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md

@@ -22,26 +22,19 @@ The link text that Camper Cat is using is not very descriptive without the surro
 Your code should move the anchor `a` tags from around the words `Click here` to wrap around the words `information about batteries`.
 
 ```js
-assert(
-  $('a')
-    .text()
-    .match(/^(information about batteries)$/g)
-);
+assert.match(document.querySelector('a')?.textContent, /^(information about batteries)$/g);
 ```
 
 The `a` element should have an `href` attribute with a value of an empty string `""`.
 
 ```js
-assert($('a').attr('href') === '');
+assert.isEmpty(document.querySelector('a')?.getAttribute('href'));
 ```
 
 The `a` element should have a closing tag.
 
 ```js
-assert(
-  code.match(/<\/a>/g) &&
-    code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
-);
+assert.isTrue(code.match(/<\/a>/g)?.length === code.match(/<a href=(''|"")>/g)?.length);
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md

@@ -35,49 +35,49 @@ Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax),
 Your code should have one `audio` tag.
 
 ```js
-assert($('audio').length === 1);
+assert.lengthOf(document.querySelectorAll('audio'),1);
 ```
 
 Your `audio` element should have a closing tag.
 
 ```js
-assert(
-  code.match(/<\/audio>/g).length === 1 &&
-    code.match(/<audio.*>[\s\S]*<\/audio>/g)
-);
+assert.match(code,/<audio.*>[\s\S]*<\/audio>/g);
+assert.lengthOf(code.match(/<\/audio>/g),1);
 ```
 
 The `audio` tag should have the `controls` attribute.
 
 ```js
-assert($('audio').attr('controls'));
+assert.exists(document.querySelector('audio')?.getAttribute('controls'));
 ```
 
 Your code should have one `source` tag.
 
 ```js
-assert($('source').length === 1);
+assert.lengthOf(document.querySelectorAll('source'), 1);
 ```
 
 Your `source` tag should be inside the `audio` tags.
 
 ```js
-assert($('audio').children('source').length === 1);
+const audio = document.querySelector('audio');
+const children = audio.querySelectorAll(`:scope ${'source'}`);
+assert.lengthOf(children,1);
 ```
 
 The value for the `src` attribute on the `source` tag should match the link in the instructions exactly.
 
 ```js
-assert(
-  $('source').attr('src') ===
-    'https://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3'
+assert.equal(
+  document.querySelector('source')?.getAttribute('src'),
+  'https://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3'
 );
 ```
 
 Your code should include a `type` attribute on the `source` tag with a value of audio/mpeg.
 
 ```js
-assert($('source').attr('type') === 'audio/mpeg');
+assert.equal(document.querySelector('source')?.getAttribute('type'), 'audio/mpeg');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md

@@ -34,39 +34,40 @@ Camper Cat is hard at work creating a stacked bar chart showing the amount of ti
 Your code should have one `figure` tag.
 
 ```js
-assert($('figure').length == 1);
+assert.lengthOf(document.querySelectorAll('figure') , 1);
 ```
 
 Your code should have one `figcaption` tag.
 
 ```js
-assert($('figcaption').length == 1);
+assert.lengthOf(document.querySelectorAll('figcaption') , 1);
 ```
 
 Your code should not have any `div` tags.
 
 ```js
-assert($('div').length == 0);
+assert.lengthOf(document.querySelectorAll('div'), 0);
 ```
 
 Your code should not have any `p` tags.
 
 ```js
-assert($('p').length == 0);
+assert.lengthOf(document.querySelectorAll('p') , 0);
 ```
 
 The `figcaption` should be a child of the `figure` tag.
 
 ```js
-assert($('figure').children('figcaption').length == 1);
+const figure = document.querySelector('figure');
+const children = figure?.querySelectorAll(`:scope ${'figcaption'}`);
+assert.lengthOf(children, 1);
 ```
 
 Your `figure` element should have a closing tag.
 
 ```js
-assert(
-  code.match(/<\/figure>/g) &&
-    code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
+assert.isTrue(
+    code.match(/<\/figure>/g)?.length === code.match(/<figure>/g)?.length
 );
 ```
 

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md

@@ -33,13 +33,13 @@ Camper Cat expects a lot of interest in his thoughtful blog posts and wants to i
 Your code should have a `for` attribute on the `label` tag that is not empty.
 
 ```js
-assert($('label').attr('for'));
+assert.isNotEmpty(document.querySelector('label')?.getAttribute('for'));
 ```
 
 Your `for` attribute value should match the `id` value on the email `input`.
 
 ```js
-assert($('label').attr('for') == 'email');
+assert.equal(document.querySelector('label')?.getAttribute('for'), 'email');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md

@@ -22,13 +22,17 @@ Camper Cat's choice of light gray text on a white background for his recent blog
 Your code should change the text `color` for the `body` to the darker gray.
 
 ```js
-assert($('body').css('color') == 'rgb(99, 99, 99)');
+const body = document.querySelector('body');
+const bodyColor = window.getComputedStyle(body).color; 
+assert(bodyColor == 'rgb(99, 99, 99)');
 ```
 
 Your code should not change the `background-color` for the `body`.
 
 ```js
-assert($('body').css('background-color') == 'rgb(255, 255, 255)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body).backgroundColor; 
+assert.equal(backgroundColor , 'rgb(255, 255, 255)');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md

@@ -26,13 +26,13 @@ Camper Cat has some big ideas for his ninja weapons page. Help him set up his ma
 Your code should have one `main` tag.
 
 ```js
-assert($('main').length == 1);
+assert.lengthOf(document.querySelectorAll('main'),1);
 ```
 
 The `main` tags should be between the closing `header` tag and the opening `footer` tag.
 
 ```js
-assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
+assert.match(code,/<\/header>\s*?<main>\s*?<\/main>/gi);
 ```
 
 # --seed--