Revert "feat: update requirement content for Native and Custom Widgets, Instructions requirement (#1116)" (#1120)

This reverts commit 1d46d6d.

Author: smoralesd

src/assessments/common/instructions-and-labels-note.tsx

@@ -1,18 +1,19 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import * as React from 'react';
+
 import { CustomWidgetPropertyBag } from 'common/types/property-bag/icustom-widgets';
 import { VisualizationType } from 'common/types/visualization-type';
 import { link } from 'content/link';
+import { productName } from 'content/strings/application';
+import { TestAutomaticallyPassedNotice } from 'content/test/common/test-automatically-passed-notice';
 import * as content from 'content/test/custom-widgets/instructions';
 import { AssessmentVisualizationEnabledToggle } from 'DetailsView/components/assessment-visualization-enabled-toggle';
 import { ScannerUtils } from 'injected/scanner-utils';
-import * as React from 'react';
-
-import { NewTabLink } from '../../../common/components/new-tab-link';
 import { AnalyzerConfigurationFactory } from '../../common/analyzer-configuration-factory';
 import { AssistedTestRecordYourResults } from '../../common/assisted-test-record-your-results';
-import { InstructionsAndLabelsNotes } from '../../common/instructions-and-labels-note';
 import { NoValue } from '../../common/property-bag-column-renderer';
+import * as Markup from '../../markup';
 import { ReportInstanceField } from '../../types/report-instance-field';
 import { Requirement } from '../../types/requirement';
 import { getFlatDesignPatternStringFromRole } from '../custom-widgets-column-renderer';
@@ -25,19 +26,12 @@ const instructionsDescription: JSX.Element = (
 
 const instructionsHowToTest: JSX.Element = (
     <div>
-        <p>
-            The visual helper for this requirement highlights custom widgets. (A custom widget is an element with a valid{' '}
-            <NewTabLink href="https://www.w3.org/TR/wai-aria/#widget_roles">ARIA widget role</NewTabLink>.)
-        </p>
-        <InstructionsAndLabelsNotes />
+        <p>For this requirement, {productName} highlights custom widgets.</p>
+        <TestAutomaticallyPassedNotice />
         <ol>
-            <li>In the target page, examine each highlighted element to determine whether it has a visible label or instructions.</li>
             <li>
-                Verify that all visible labels and instructions are displayed in the Instances list:
-                <ol>
-                    <li>Any label should appear in the accessible name.</li>
-                    <li>Any additional instructions should appear in the accessible description.</li>
-                </ol>
+                For each widget, verify that any instructions visible in the target page are also visible in the{' '}
+                <Markup.Term>Instances</Markup.Term> list.
             </li>
             <AssistedTestRecordYourResults />
         </ol>
@@ -50,7 +44,7 @@ export const Instructions: Requirement = {
     description: instructionsDescription,
     howToTest: instructionsHowToTest,
     isManual: false,
-    guidanceLinks: [link.WCAG_1_3_1, link.WCAG_2_5_3],
+    guidanceLinks: [link.WCAG_1_3_1],
     ...content,
     columnsConfig: [
         {

src/assessments/custom-widgets/test-steps/instructions.tsx

@@ -1,49 +1,44 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import * as React from 'react';
+
 import { DefaultWidgetPropertyBag } from 'common/types/property-bag/default-widget';
 import { VisualizationType } from 'common/types/visualization-type';
 import { link } from 'content/link';
+import { productName } from 'content/strings/application';
+import { TestAutomaticallyPassedNotice } from 'content/test/common/test-automatically-passed-notice';
 import * as content from 'content/test/native-widgets/instructions';
 import { AssessmentVisualizationEnabledToggle } from 'DetailsView/components/assessment-visualization-enabled-toggle';
 import { ScannerUtils } from 'injected/scanner-utils';
-import * as React from 'react';
-
 import { AnalyzerConfigurationFactory } from '../../common/analyzer-configuration-factory';
 import { AssistedTestRecordYourResults } from '../../common/assisted-test-record-your-results';
-import { InstructionsAndLabelsNotes } from '../../common/instructions-and-labels-note';
 import { NoValue, PropertyBagColumnRendererConfig } from '../../common/property-bag-column-renderer';
 import { PropertyBagColumnRendererFactory } from '../../common/property-bag-column-renderer-factory';
 import * as Markup from '../../markup';
 import { ReportInstanceField } from '../../types/report-instance-field';
 import { Requirement } from '../../types/requirement';
 import { NativeWidgetsTestStep } from './test-steps';
 
-const description: JSX.Element = (
-    <span>If a native widget has a visible label or instructions, they must be programmatically related.</span>
-);
+const description: JSX.Element = <span>If a native widget has visible instructions, they must be programmatically related to it.</span>;
 
 const howToTest: JSX.Element = (
     <div>
         <p>
-            The visual helper for this requirement highlights native widgets. Native widgets include
+            For this requirement, {productName} highlights native widgets. Native widgets include
             <Markup.NonBreakingSpace />
-            <Markup.Tag tagName="button" isBold={false} />,
+            <Markup.Tag tagName="button" isBold={true} />,
             <Markup.NonBreakingSpace />
-            <Markup.Tag tagName="input" isBold={false} />,
+            <Markup.Tag tagName="input" isBold={true} />,
             <Markup.NonBreakingSpace />
-            <Markup.Tag tagName="select" isBold={false} />, and
+            <Markup.Tag tagName="select" isBold={true} />, and
             <Markup.NonBreakingSpace />
-            <Markup.Tag tagName="textarea" isBold={false} /> elements.
+            <Markup.Tag tagName="textarea" isBold={true} /> elements.
         </p>
-        <InstructionsAndLabelsNotes />
+        <TestAutomaticallyPassedNotice />
         <ol>
-            <li>In the target page, examine each highlighted element to determine whether it has a visible label or instructions.</li>
             <li>
-                Verify that all visible labels and instructions are displayed in the Instances list:
-                <ol>
-                    <li>Any label should appear in the accessible name.</li>
-                    <li>Any additional instructions should appear in the accessible description.</li>
-                </ol>
+                For each widget, verify that any instructions visible in the target page are also visible in the
+                <Markup.Term> Instances</Markup.Term> list.
             </li>
             <AssistedTestRecordYourResults />
         </ol>
@@ -74,7 +69,7 @@ export const Instructions: Requirement = {
     description,
     howToTest,
     isManual: false,
-    guidanceLinks: [link.WCAG_1_3_1, link.WCAG_2_5_3],
+    guidanceLinks: [link.WCAG_1_3_1],
     ...content,
     columnsConfig: [
         {