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): changed theme switcher value (#62202)

Browse Source
This commit is contained in:
Clarence Bakosi
2025-09-14 08:18:04 +01:00
committed by GitHub
parent a6596b8836
commit e3d68d5c52
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/lab-theme-switcher/687ad7be1ff45032ccf1d92f.md
+7 -7
View File
@@ -25,7 +25,7 @@ In this lab, you will build an app that switches between different themes. When
- A `role` attribute set to `"menu"`.
- An `aria-labelledby` attribute set to `"theme-switcher-button"`.
- A `hidden` attribute.
4. Your `ul` element should have at least two `li` elements with a `role` attribute set to `"menu-item"` and text of your choice representing a different theme.
4. Your `ul` element should have at least two `li` elements with a `role` attribute set to `"menuitem"` and text of your choice representing a different theme.
5. Each of your `li` elements should have an `id` attribute that starts with `theme-` and ends with the theme you set for the `li` element text. For example, if one of your themes is `Light` then your `id` should be `theme-light`.
6. You should have an element with an `aria-live` attribute set to `"polite"`.
7. You should have a `themes` array with at least two objects that each contain a `name` and `message` property. The `name` will represent a different theme and the `message` will display when the theme switches. You are free to come up with `name` and `message` values of your choice but the `name` values should match one of the options you set in your `li` items.
@@ -131,13 +131,13 @@ const listItems = document.querySelectorAll("ul li");
assert.isAtLeast(listItems?.length, 2);
```
Each of your `li` elements should have a `role` attribute set to `"menu-item"`.
Each of your `li` elements should have a `role` attribute set to `"menuitem"`.
```js
const listItems = document.querySelectorAll("ul li");
assert.isNotEmpty(listItems);
listItems.forEach(li => {
assert.equal(li?.getAttribute("role"), "menu-item");
assert.equal(li?.getAttribute("role"), "menuitem");
})
```
@@ -373,10 +373,10 @@ li {
aria-labelledby="theme-switcher-button"
hidden
>
<li class="dropdown-item" id="theme-light" role="menu-item">Light</li>
<li class="dropdown-item" id="theme-dark" role="menu-item">Dark</li>
<li class="dropdown-item" id="theme-ocean" role="menu-item">Ocean</li>
<li class="dropdown-item" id="theme-nord" role="menu-item">Nord</li>
<li class="dropdown-item" id="theme-light" role="menuitem">Light</li>
<li class="dropdown-item" id="theme-dark" role="menuitem">Dark</li>
<li class="dropdown-item" id="theme-ocean" role="menuitem">Ocean</li>
<li class="dropdown-item" id="theme-nord" role="menuitem">Nord</li>
</ul>
<div id="status" aria-live="polite"></div>