feat(medium-pass-2): Add "why it matters" content for quick assess requirements (#6317)

#### Details

This PR adds content that will appear in the "Why it matters" gray box
for Quick Assess requirements.

##### Motivation

Feature work 🚀 

##### Context

This PR just adds the new content. A later PR will display this content
for quick assess requirements.

#### Pull request checklist
<!-- If a checklist item is not applicable to this change, write "n/a"
in the checkbox -->
- [n/a] Addresses an existing issue: #0000
- [x] Ran `yarn fastpass`
- [x] Added/updated relevant unit test(s) (and ran `yarn test`)
- [x] Verified code coverage for the changes made. Check coverage report
at: `<rootDir>/test-results/unit/coverage`
- [x] PR title *AND* final merge commit title both start with a semantic
tag (`fix:`, `chore:`, `feat(feature-name):`, `refactor:`). See
`CONTRIBUTING.md`.
- [n/a] (UI changes only) Added screenshots/GIFs to description above
- [n/a] (UI changes only) Verified usability with NVDA/JAWS

Co-authored-by: madalynrose <madparker@microsoft.com>

Author: madalynrose

src/assessments/types/requirement.ts

@@ -33,6 +33,8 @@ export interface Requirement {
     howToTest: JSX.Element;
     addFailureInstruction?: string;
     infoAndExamples?: ContentPageComponent;
+    whyItMatters?: ContentPageComponent;
+    helpfulResourceLinks?: HyperlinkDefinition[];
     isManual: boolean;
     // This is for semi-manual cases where we can't present a list of instances like an assisted
     // test would, but can infer a PASS or FAIL state. If not specified, acts like () => UNKNOWN.

src/content/test/adaptable-content/index.ts

@@ -4,7 +4,7 @@ import * as contrast from './contrast';
 import { guidance } from './guidance';
 import * as hoverFocusContent from './hover-focus-content';
 import * as orientation from './orientation';
-import * as reflow from './reflow';
+import { infoAndExamples as reflow } from './reflow';
 import * as resizeText from './resize-text';
 import * as textSpacing from './text-spacing';
 

src/content/test/adaptable-content/reflow.tsx

@@ -2,6 +2,15 @@
 // Licensed under the MIT License.
 import { create, React } from '../../common';
 
+export const whyItMatters = create(() => (
+    <p>
+        Having to scroll in two directions is difficult for everyone. Having to scroll in the direction of reading makes reading especially
+        difficult for people with certain disabilities, including people with low vision, who are more likely to need enlarged text in a
+        single column as well as people with reading disabilities that make it difficult to visually track long lines of text. It also
+        impacts people with motor disabilities who find scrolling difficult on the webpage.
+    </p>
+));
+
 export const infoAndExamples = create(({ Markup }) => (
     <>
         <p>Content must be visible without having to scroll both vertically and horizontally.</p>

src/content/test/contrast/index.ts

@@ -3,7 +3,7 @@
 import * as graphics from './graphics';
 import { guidance } from './guidance';
 import * as stateChanges from './state-changes';
-import * as uiComponents from './ui-components';
+import { infoAndExamples as uiComponents } from './ui-components';
 
 export const contrast = {
     guidance,

src/content/test/contrast/ui-components.tsx

@@ -2,6 +2,13 @@
 // Licensed under the MIT License.
 import { create, React } from '../../common';
 
+export const whyItMatters = create(({ Link }) => (
+    <p>
+        Most people find it easier to see and use UI Components when they have sufficient contrast against the background. People with low
+        vision, limited color perception, or <Link.Presbyopia /> are especially likely to struggle with controls when contrast is too low.
+    </p>
+));
+
 export const infoAndExamples = create(({ Markup, Link }) => (
     <>
         <p>Visual information used to indicate states and boundaries of active UI Components must have sufficient contrast.</p>

src/content/test/focus/focus-order.tsx

@@ -2,6 +2,15 @@
 // Licensed under the MIT License.
 import { create, React } from '../../common';
 
+export const whyItMatters = create(() => (
+    <p>
+        When users navigate through a web page, they expect to encounter controls and other content in an order that makes sense and makes
+        it easy to use the page's functionality. Poor focus order can be disorienting to people who use screen readers or screen magnifiers
+        and to people with reading disorders. Poor focus order can also make it difficult or even painful for people who use keyboards
+        because of mobility impairments.
+    </p>
+));
+
 export const infoAndExamples = create(({ Markup }) => (
     <>
         <p>Components must receive focus in an order that preserves meaning and operability.</p>

src/content/test/focus/index.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import * as closingContent from './closing-content';
-import * as focusOrder from './focus-order';
+import { infoAndExamples as focusOrder } from './focus-order';
 import { guidance } from './guidance';
 import * as modalDialogs from './modal-dialogs';
 import * as revealingContent from './revealing-content';

src/content/test/headings/heading-level.tsx

@@ -2,6 +2,14 @@
 // Licensed under the MIT License.
 import { create, React } from '../../common';
 
+export const whyItMatters = create(() => (
+    <p>
+        Heading levels communicate the relative importance of headings within a page. People with good vision can infer heading levels
+        through visual cues—higher-level headings typically have greater visual prominence than lower-level headings. Users of assistive
+        technology rely on programmatic cues to perceive heading levels.
+    </p>
+));
+
 export const infoAndExamples = create(({ Markup, Link }) => (
     <>
         <p>A heading's programmatic level must match the level that's presented visually.</p>

src/content/test/headings/index.ts

@@ -2,8 +2,8 @@
 // Licensed under the MIT License.
 import { guidance } from './guidance';
 import * as headingFunction from './heading-function';
-import * as headingLevel from './heading-level';
-import * as noMissingHeadings from './no-missing-headings';
+import { infoAndExamples as headingLevel } from './heading-level';
+import { infoAndExamples as noMissingHeadings } from './no-missing-headings';
 
 export const headings = {
     guidance,

src/content/test/headings/no-missing-headings.tsx

@@ -2,6 +2,13 @@
 // Licensed under the MIT License.
 import { create, React } from '../../common';
 
+export const whyItMatters = create(() => (
+    <p>
+        People with good vision can quickly scan a page to identify headings based solely on their appearance, such as large or bold font,
+        preceding white space, or indentation. Users of assistive technologies can't find headings that aren't properly coded.
+    </p>
+));
+
 export const infoAndExamples = create(({ Markup, Link }) => (
     <>
         <p>Text that looks like a heading must be coded as a heading.</p>