Skip to content

[pull] main from mdn:main #563

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 7 commits into from
Feb 3, 2026
Merged

[pull] main from mdn:main #563

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f8a1f3c
chore(package): remove npm notice (#42995)
caugner Feb 3, 2026
768d15e
chore(deps-dev): bump cspell from 9.6.2 to 9.6.3 (#43007)
dependabot[bot] Feb 3, 2026
0332ba8
chore(deps): bump @mdn/fred from 2.1.0 to 2.2.0 (#43005)
dependabot[bot] Feb 3, 2026
2bda943
Reorder accessibility test your skills for consistency (#42964)
chrisdavidmills Feb 3, 2026
21d2342
Document the ::search-text pseudo (#42870)
chrisdavidmills Feb 3, 2026
a623d44
Reorder basic CSS test your skills for consistency (#42951)
chrisdavidmills Feb 3, 2026
e05034b
chore(deps-dev): bump tempy from 3.1.2 to 3.2.0 (#43006)
dependabot[bot] Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 49 additions & 8 deletions ...web_development/core/accessibility/test_your_skills/css_and_javascript/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ To complete the task, create new rules to make the links look and behave like li

<!-- Code shared across examples -->

```css hidden live-sample___css-js-ally-1 live-sample___css-js-ally-2 live-sample___css-js-ally-3
```css hidden live-sample___css-js-ally-1 live-sample___css-js-ally-2 live-sample___css-js-ally-3 live-sample___css-js-ally-1-finish live-sample___css-js-ally-2-finish
body {
background-color: white;
color: #333333;
Expand All @@ -41,7 +41,13 @@ body {

<!-- Example-specific code -->

```html live-sample___css-js-ally-1
The starting point of the task looks like this:

{{ EmbedLiveSample("css-js-ally-1", "100%", 200) }}

Here's the underlying code for this starting point:

```html live-sample___css-js-ally-1 live-sample___css-js-ally-1-finish
<ul>
<li><a href="">Animals</a></li>
<li><a href="">Computers</a></li>
Expand All @@ -64,7 +70,9 @@ a {
/* Add your code here */
```

{{ EmbedLiveSample("css-js-ally-1", "100%", 200) }}
When the task is complete, the links should look something like this:

{{ EmbedLiveSample("css-js-ally-1-finish", "100%", 200) }}

<details>
<summary>Click here to show the solution</summary>
Expand All @@ -87,6 +95,25 @@ li a:focus {
}
```

```css hidden live-sample___css-js-ally-1-finish
a {
text-decoration: none;
color: #666666;
outline: none;
}

li a {
text-decoration: underline;
color: rgb(150 0 0);
}

li a:hover,
li a:focus {
text-decoration: none;
color: red;
}
```

</details>

## CSS accessibility 2
Expand All @@ -99,9 +126,15 @@ To complete the task:
2. Update the CSS with new values for the color and font-size to fix the problem.
3. Test the code to make sure the problem is now fixed. Explain what tools or methods you used to select the new values and test the code.

The starting point of the task looks like this:

{{ EmbedLiveSample("css-js-ally-2", "100%", 240) }}

Here's the underlying code for this starting point:

<!-- spellchecker: disable -->

```html live-sample___css-js-ally-2
```html live-sample___css-js-ally-2 live-sample___css-js-ally-2-finish
<main>
<h1>I am the eggman</h1>

Expand Down Expand Up @@ -156,7 +189,9 @@ p {
}
```

{{ EmbedLiveSample("css-js-ally-2", "100%", 240) }}
The updated content should look like this:

{{ EmbedLiveSample("css-js-ally-2-finish", "100%", 600) }}

<details>
<summary>Click here to show the solution</summary>
Expand All @@ -173,7 +208,7 @@ p {

For the updated code, something like this would fix the color contrast:

```css
```css live-sample___css-js-ally-2-finish
main {
padding: 20px;
background-color: red;
Expand All @@ -188,7 +223,7 @@ p {

And something like this would work for the font sizing:

```css
```css live-sample___css-js-ally-2-finish
h1 {
font-size: 2.5rem;
}
Expand Down Expand Up @@ -226,6 +261,12 @@ In our final accessibility task, you have some JavaScripting to do. We have an a

But it is not very accessible — in its current state you can only operate it with the mouse. We'd like you to add some HTML and JavaScript to make it keyboard accessible too.

The starting point of the task looks like this:

{{ EmbedLiveSample("css-js-ally-3", "100%", 400) }}

Here's the underlying code for this starting point:

```html live-sample___css-js-ally-3
<section class="preview">
<div class="animal-list">
Expand Down Expand Up @@ -288,7 +329,7 @@ function handleSelection(e) {
}
```

{{ EmbedLiveSample("css-js-ally-3", "100%", 400) }}
We've not provided finished content for this task, as it looks the same as the starting point.

<details>
<summary>Click here to show the solution</summary>
Expand Down
40 changes: 33 additions & 7 deletions ...s/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ To complete the task, update the markup to use appropriate semantic HTML. You do

<!-- Code shared across examples -->

```css hidden live-sample___html-ally-1 live-sample___html-ally-2 live-sample___html-ally-3 live-sample___html-ally-4
```css hidden live-sample___html-ally-1 live-sample___html-ally-2 live-sample___html-ally-3 live-sample___html-ally-4 live-sample___html-ally-2-finish
body {
background-color: white;
color: #333333;
Expand All @@ -41,6 +41,12 @@ body {

<!-- Example-specific code -->

The starting point of the task looks like this:

{{ EmbedLiveSample("html-ally-1", "100%", 630) }}

Here's the underlying code for this starting point:

```html live-sample___html-ally-1
<font size="7">Need help?</font> <br /><br />
If you have any problems with our products, our support center can offer you all
Expand Down Expand Up @@ -78,7 +84,7 @@ answer you're looking for.
}
```

{{ EmbedLiveSample("html-ally-1", "100%", 400) }}
We've not provided finished content for this task, as it doesn't look significantly different to the starting state.

<details>
<summary>Click here to show the solution</summary>
Expand Down Expand Up @@ -133,6 +139,12 @@ To complete the task:
2. Assume that these inputs will be part of a larger form, and wrap them in an element that associates them all together as a single related group.
3. Give the group a description/title that summarizes all of the information as personal data.

The starting point of the task looks like this:

{{ EmbedLiveSample("html-ally-2", "100%", 200) }}

Here's the underlying code for this starting point:

```html live-sample___html-ally-2
<form>
<ul>
Expand All @@ -152,7 +164,7 @@ To complete the task:
</form>
```

```css live-sample___html-ally-2
```css live-sample___html-ally-2 live-sample___html-ally-2-finish
form {
width: 400px;
}
Expand All @@ -165,14 +177,16 @@ li {
}
```

{{ EmbedLiveSample("html-ally-2", "100%", 200) }}
The updated form should look like this:

{{ EmbedLiveSample("html-ally-2-finish", "100%", 220) }}

<details>
<summary>Click here to show the solution</summary>

Your finished HTML should look something like this:

```html
```html live-sample___html-ally-2-finish
<form>
<fieldset>
<legend>Personal data</legend>
Expand Down Expand Up @@ -206,6 +220,12 @@ In this task you are required to turn all the information links in the paragraph

To complete the task, update the links appropriately based on the above descriptions.

The starting point of the task looks like this:

{{ EmbedLiveSample("html-ally-3", "100%", 140) }}

Here's the underlying code for this starting point:

```html-nolint live-sample___html-ally-3
<p>
For more information about our activities, check out our fundraising page
Expand All @@ -220,7 +240,7 @@ To complete the task, update the links appropriately based on the above descript
> [!NOTE]
> The links in the starting code have the `target="_blank"` attribute set on them, so that when you click on them, they try to open the linked pages in a new tab rather than the same tab. This is not strictly best practice, but we've done it here so that the pages don't open in the MDN Playground output `<iframe>`, getting rid of your example code in the process!

{{ EmbedLiveSample("html-ally-3", "100%", 140) }}
We've not provided finished content for this task, as it would give the solution away.

<details>
<summary>Click here to show the solution</summary>
Expand Down Expand Up @@ -252,6 +272,12 @@ In our final HTML accessibility task, you are given an image gallery, which has

Update the code to fix the problems described above.

The starting point of the task looks like this:

{{ EmbedLiveSample("html-ally-4", "100%", 400) }}

Here's the underlying code for this starting point:

```html live-sample___html-ally-4
<header>
<img
Expand Down Expand Up @@ -288,7 +314,7 @@ header {
}
```

{{ EmbedLiveSample("html-ally-4", "100%", 400) }}
We've not provided finished content for this task, as it looks the same as the starting point.

<details>
<summary>Click here to show the solution</summary>
Expand Down
26 changes: 23 additions & 3 deletions ...-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,12 @@ Our first ARIA task includes a section of non-semantic markup, which is visually

To complete the task, add some WAI-ARIA semantics to make screen readers recognize the `<div>` elements as an unordered list.

The starting point of the task looks like this:

{{ EmbedLiveSample("aria-1", "100%", 250) }}

Here's the underlying code for this starting point:

<!-- Code shared across examples -->

```css hidden live-sample___aria-1 live-sample___aria-2 live-sample___aria-3
Expand Down Expand Up @@ -71,14 +77,16 @@ div > div::before {
}
```

{{ EmbedLiveSample("aria-1", "100%", 250) }}
We've not provided finished content for this task, as it looks the same as the starting point.

<details>
<summary>Click here to show the solution</summary>

Your finished HTML should look something like this:

```html
<p>My favorite animals:</p>

<div role="list">
<div role="listitem">Pig</div>
<div role="listitem">Gazelle</div>
Expand All @@ -99,13 +107,19 @@ To complete the task:
1. Add an attribute to allow the search form to be called out as a separate landmark on the page by screen readers, to make it easily findable.
2. Give the search input a suitable label, without explicitly adding a visible text label to the DOM.

The starting point of the task looks like this:

{{ EmbedLiveSample("aria-2", "100%", 100) }}

Here's the underlying code for this starting point:

```html live-sample___aria-2
<form>
<input type="search" name="search" />
</form>
```

{{ EmbedLiveSample("aria-2", "100%", 100) }}
We've not provided finished content for this task, as it doesn't look significantly different to the starting state.

<details>
<summary>Click here to show the solution</summary>
Expand All @@ -130,6 +144,12 @@ As before, we have an app that presents a list of animal names. Clicking one of

The problem we have now is that when the DOM changes to show a new description, screen readers cannot see what has changed. Can you update it so that description changes are announced by the screen reader?

The starting point of the task looks like this:

{{ EmbedLiveSample("aria-3", "100%", 400) }}

Here's the underlying code for this starting point:

```html live-sample___aria-3
<section class="preview">
<div class="animal-list">
Expand Down Expand Up @@ -204,7 +224,7 @@ function handleSelection(e) {
}
```

{{ EmbedLiveSample("aria-3", "100%", 400) }}
We've not provided finished content for this task, as it looks the same as the starting point.

<details>
<summary>Click here to show the solution</summary>
Expand Down
24 changes: 14 additions & 10 deletions ...velopment/core/styling_basics/test_your_skills/backgrounds_and_borders/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The aim of this skill test is to help you assess whether you understand [backgro
> [!NOTE]
> To get help, read our [Test your skills](/en-US/docs/Learn_web_development#test_your_skills) usage guide. You can also reach out to us using one of our [communication channels](/en-US/docs/MDN/Community/Communication_channels).

## Task 1
## Backgrounds and borders 1

In this task, we want you to add a background, border, and some basic styles to a page header.

Expand All @@ -27,9 +27,11 @@ To complete the task:
https://mdn.github.io/shared-assets/images/examples/balloons.jpg
```

Your final result should look like the following rendering:
The starting point of the task looks like this:

{{EmbedLiveSample("backgrounds1-finish", "", "160px")}}
{{EmbedLiveSample("backgrounds1-start", "", "160px")}}

Here's the underlying code for this starting point:

```html live-sample___backgrounds1-start live-sample___backgrounds1-finish
<div class="box">
Expand Down Expand Up @@ -60,9 +62,9 @@ h2 {
}
```

This is the starting state of the task:
The updated styling should look like this:

{{EmbedLiveSample("backgrounds1-start", "", "160px")}}
{{EmbedLiveSample("backgrounds1-finish", "", "160px")}}

<details>
<summary>Click here to show the solution</summary>
Expand All @@ -85,7 +87,7 @@ h2 {

</details>

## Task 2
## Backgrounds and borders 2

In this task, we want you to add background images, a border, and some other styling to a decorative box.

Expand All @@ -101,9 +103,11 @@ To complete the task:

3. Make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in previous lessons to achieve this.

Your final result should look like the following rendering:
The starting point of the task looks like this:

{{EmbedLiveSample("backgrounds2-finish", "", "220px")}}
{{EmbedLiveSample("backgrounds2-start", "", "200px")}}

Here's the underlying code for this starting point:

```html live-sample___backgrounds2-start live-sample___backgrounds2-finish
<div class="box">
Expand Down Expand Up @@ -133,9 +137,9 @@ h2 {
}
```

This is the starting state of the task:
The updated styling should look like this:

{{EmbedLiveSample("backgrounds2-start", "", "200px")}}
{{EmbedLiveSample("backgrounds2-finish", "", "220px")}}

<details>
<summary>Click here to show the solution</summary>
Expand Down
Loading