25aa04e2e7
* chore(curriculum): accessibility-quiz * chore(curriculum): cafe-menu * chore(curriculum): ferris-wheel * chore(curriculum): fix ferris-wheel tests * chore(curriculum): colored-markers * chore(curriculum): photo-gallery * chore(curriculum): magazine * chore(curriculum): penguin * chore(curriculum): city-skyline * chore(curriculum): registration-form * chore(curriculum): picasso-painting * chore(curriculum): balance-sheet * chore(curriculum): piano * chore(curriculum): rothko-painting * fix: title min 15 chars
2.1 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 61fd67a656743144844941cb | Step 4 | 0 | step-4 |
--description--
Screen readers announce HTML elements based on the document flow. We will eventually want the balance sheet to have a heading of "Balance Sheet" and a subheading of "AcmeWidgetCorp". However, this order does not make sense if announced by a screen reader.
Give your existing span the class attribute set to flex, and add two span elements within it. Give the first the text AcmeWidgetCorp. Give the second the text Balance Sheet. You will use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader.
--hints--
Your existing span element should have the class attribute set to flex.
assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
Your existing span element should have two new span elements within it.
assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
Your new span elements should not have a class attribute.
assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
Your first new span element should have the text AcmeWidgetCorp.
assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
Your second new span element should have the text Balance Sheet.
assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
--seed--
--seed-contents--
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Balance Sheet</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<main>
<section>
<h1>
--fcc-editable-region--
<span>
</span>
--fcc-editable-region--
</h1>
</section>
</main>
</body>
</html>