fix: auto-pass main landmark requirements for no-landmark pages

src/DetailsView/components/assessment-visualization-enabled-toggle.tsx

@@ -1,13 +1,12 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
 import { GeneratedAssessmentInstance } from 'common/types/store-data/assessment-result-data';
-import { isEmpty } from 'lodash';
 
 import { BaseVisualHelperToggle } from './base-visual-helper-toggle';
 
 export class AssessmentVisualizationEnabledToggle extends BaseVisualHelperToggle {
-    protected isDisabled(filteredInstances: GeneratedAssessmentInstance<{}, {}>[]): boolean {
-        return isEmpty(filteredInstances);
+    protected isDisabled(instances: GeneratedAssessmentInstance<{}, {}>[]): boolean {
+        return !this.isAnyInstanceVisualizable(instances);
     }
 
     protected isChecked(instances: GeneratedAssessmentInstance<{}, {}>[]): boolean {
@@ -28,10 +27,16 @@ export class AssessmentVisualizationEnabledToggle extends BaseVisualHelperToggle
     };
 
     private isAnyInstanceVisible(instances: GeneratedAssessmentInstance<{}, {}>[]): boolean {
+        const testStep = this.props.assessmentNavState.selectedTestSubview;
         return instances.some(
-            instance =>
-                instance.testStepResults[this.props.assessmentNavState.selectedTestSubview]
-                    .isVisualizationEnabled,
+            instance => instance.testStepResults[testStep].isVisualizationEnabled,
+        );
+    }
+
+    private isAnyInstanceVisualizable(instances: GeneratedAssessmentInstance<{}, {}>[]): boolean {
+        const testStep = this.props.assessmentNavState.selectedTestSubview;
+        return instances.some(
+            instance => instance.testStepResults[testStep].isVisualizationSupported,
         );
     }
 }

src/assessments/assessment-builder.tsx

@@ -10,6 +10,7 @@ import { RequirementComparer } from 'common/assessment/requirement-comparer';
 import { AssessmentVisualizationConfiguration } from 'common/configs/assessment-visualization-configuration';
 import { Messages } from 'common/messages';
 import { ManualTestStatus } from 'common/types/manual-test-status';
+import { InstanceIdToInstanceDataMap } from 'common/types/store-data/assessment-result-data';
 import { FeatureFlagStoreData } from 'common/types/store-data/feature-flag-store-data';
 import { AssessmentScanData, ScanData } from 'common/types/store-data/visualization-store-data';
 import {
@@ -52,6 +53,15 @@ export class AssessmentBuilder {
             requirement.getInstanceStatus = AssessmentBuilder.getInstanceStatus;
         }
 
+        if (!requirement.getInitialManualTestStatus) {
+            requirement.getInitialManualTestStatus = AssessmentBuilder.getInitialManualTestStatus;
+        }
+
+        if (!requirement.isVisualizationSupportedForResult) {
+            requirement.isVisualizationSupportedForResult =
+                AssessmentBuilder.isVisualizationSupportedForResult;
+        }
+
         if (!requirement.getInstanceStatusColumns) {
             requirement.getInstanceStatusColumns = AssessmentBuilder.getInstanceStatusColumns;
         }
@@ -75,6 +85,16 @@ export class AssessmentBuilder {
         return ManualTestStatus.UNKNOWN;
     }
 
+    private static getInitialManualTestStatus(
+        instances: InstanceIdToInstanceDataMap,
+    ): ManualTestStatus {
+        return ManualTestStatus.UNKNOWN;
+    }
+
+    private static isVisualizationSupportedForResult(result: DecoratedAxeNodeResult): boolean {
+        return true;
+    }
+
     private static getInstanceStatusColumns(): Readonly<IColumn>[] {
         return [
             {

src/assessments/landmarks/auto-pass-if-no-landmarks.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+import { ManualTestStatus } from 'common/types/manual-test-status';
+import { InstanceIdToInstanceDataMap } from 'common/types/store-data/assessment-result-data';
+import { some } from 'lodash';
+
+export function autoPassIfNoLandmarks(instanceData: InstanceIdToInstanceDataMap): ManualTestStatus {
+    const someInstanceHasLandmarkRole = some(
+        Object.values(instanceData),
+        instance => instance.propertyBag != null && instance.propertyBag['role'] != null,
+    );
+
+    return someInstanceHasLandmarkRole ? ManualTestStatus.UNKNOWN : ManualTestStatus.PASS;
+}

src/assessments/landmarks/does-result-have-main-role.ts

@@ -0,0 +1,11 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+import { DecoratedAxeNodeResult } from 'injected/scanner-utils';
+import { some } from 'lodash';
+
+export function doesResultHaveMainRole(result: DecoratedAxeNodeResult): boolean {
+    return (
+        some(result.any, checkResult => checkResult.data['role'] === 'main') ||
+        some(result.all, checkResult => checkResult.data['role'] === 'main')
+    );
+}

src/assessments/landmarks/test-steps/no-repeating-content.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import * as React from 'react';
 
+import { doesResultHaveMainRole } from 'assessments/landmarks/does-result-have-main-role';
 import { VisualizationType } from 'common/types/visualization-type';
 import { link } from 'content/link';
 import * as content from 'content/test/landmarks/no-repeating-content';
@@ -10,10 +11,14 @@ import { AnalyzerConfigurationFactory } from '../../common/analyzer-configuratio
 import { ManualTestRecordYourResults } from '../../common/manual-test-record-your-results';
 import * as Markup from '../../markup';
 import { Requirement } from '../../types/requirement';
+import { autoPassIfNoLandmarks } from '../auto-pass-if-no-landmarks';
 import { LandmarkTestStep } from './test-steps';
 
 const description: JSX.Element = (
-    <span>The main landmark must not contain any blocks of content that repeat across pages.</span>
+    <span>
+        The <Markup.CodeTerm>main</Markup.CodeTerm> landmark must not contain any blocks of content
+        that repeat across pages.
+    </span>
 );
 
 const howToTest: JSX.Element = (
@@ -22,10 +27,33 @@ const howToTest: JSX.Element = (
             The visual helper for this requirement highlights the page's{' '}
             <Markup.CodeTerm>main</Markup.CodeTerm> landmark.
         </p>
+        <p>
+            <Markup.Emphasis>
+                Note: If no landmarks are found, this requirement will automatically be marked as
+                pass.
+            </Markup.Emphasis>
+        </p>
         <ol>
             <li>
-                In the target page, examine the main landmark to verify that it does not contain any
-                blocks of content that repeat across pages (e.g., site-wide navigation links).
+                <p>Examine the target page to verify that all of the following are true:</p>
+                <ol>
+                    <li>
+                        The page has exactly one <Markup.CodeTerm>main</Markup.CodeTerm> landmark,
+                        and
+                    </li>
+                    <li>
+                        The <Markup.CodeTerm>main</Markup.CodeTerm> landmark does not contain any
+                        blocks of content that repeat across pages (such as site-wide navigation
+                        links).
+                    </li>
+                </ol>
+                <p>
+                    Exception: If a page has nested <Markup.CodeTerm>document</Markup.CodeTerm> or{' '}
+                    <Markup.CodeTerm>application</Markup.CodeTerm> roles (typically applied to{' '}
+                    <Markup.Tag tagName="iframe" /> or <Markup.Tag tagName="frame" /> elements),
+                    each nested document or application may <Markup.Emphasis>also</Markup.Emphasis>{' '}
+                    have one <Markup.CodeTerm>main</Markup.CodeTerm> landmark.
+                </p>
             </li>
             <ManualTestRecordYourResults isMultipleFailurePossible={true} />
         </ol>
@@ -38,11 +66,13 @@ export const NoRepeatingContent: Requirement = {
     description,
     howToTest,
     isManual: true,
+    getInitialManualTestStatus: autoPassIfNoLandmarks,
+    isVisualizationSupportedForResult: doesResultHaveMainRole,
     guidanceLinks: [link.WCAG_1_3_1, link.WCAG_2_4_1],
     getAnalyzer: provider =>
         provider.createRuleAnalyzer(
             AnalyzerConfigurationFactory.forScanner({
-                rules: ['main-landmark'],
+                rules: ['unique-landmark'],
                 key: LandmarkTestStep.noRepeatingContent,
                 testType: VisualizationType.LandmarksAssessment,
             }),

src/assessments/landmarks/test-steps/primary-content.tsx

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 import * as React from 'react';
 
+import { doesResultHaveMainRole } from 'assessments/landmarks/does-result-have-main-role';
 import { VisualizationType } from 'common/types/visualization-type';
 import { link } from 'content/link';
 import * as content from 'content/test/landmarks/primary-content';
@@ -10,19 +11,48 @@ import { AnalyzerConfigurationFactory } from '../../common/analyzer-configuratio
 import { ManualTestRecordYourResults } from '../../common/manual-test-record-your-results';
 import * as Markup from '../../markup';
 import { Requirement } from '../../types/requirement';
+import { autoPassIfNoLandmarks } from '../auto-pass-if-no-landmarks';
 import { LandmarkTestStep } from './test-steps';
 
 const description: JSX.Element = (
-    <span>The main landmark must contain all of the page's primary content.</span>
+    <span>
+        The <Markup.CodeTerm>main</Markup.CodeTerm> landmark must contain all of the page's primary
+        content.
+    </span>
 );
 
 const howToTest: JSX.Element = (
     <div>
-        <p>The visual helper for this requirement highlights the page's main landmark.</p>
+        <p>
+            The visual helper for this requirement highlights the page's{' '}
+            <Markup.CodeTerm>main</Markup.CodeTerm> landmark.
+        </p>
+        <p>
+            <Markup.Emphasis>
+                Note: If no landmarks are found, this requirement will automatically be marked as
+                pass.
+            </Markup.Emphasis>
+        </p>
         <ol>
             <li>
-                In the target page, examine the <Markup.CodeTerm>main</Markup.CodeTerm> landmark to
-                verify that it contains all of the page's primary content.
+                <p>Examine the target page to verify that all of the following are true:</p>
+                <ol>
+                    <li>
+                        The page has exactly one <Markup.CodeTerm>main</Markup.CodeTerm> landmark,
+                        and
+                    </li>
+                    <li>
+                        The <Markup.CodeTerm>main</Markup.CodeTerm> landmark contains all of the
+                        page's primary content.
+                    </li>
+                </ol>
+                <p>
+                    Exception: If a page has nested <Markup.CodeTerm>document</Markup.CodeTerm> or{' '}
+                    <Markup.CodeTerm>application</Markup.CodeTerm> roles (typically applied to{' '}
+                    <Markup.Tag tagName="iframe" /> or <Markup.Tag tagName="frame" /> elements),
+                    each nested document or application may <Markup.Emphasis>also</Markup.Emphasis>{' '}
+                    have one <Markup.CodeTerm>main</Markup.CodeTerm> landmark.
+                </p>
             </li>
             <ManualTestRecordYourResults isMultipleFailurePossible={true} />
         </ol>
@@ -35,11 +65,13 @@ export const PrimaryContent: Requirement = {
     description,
     howToTest,
     isManual: true,
+    getInitialManualTestStatus: autoPassIfNoLandmarks,
+    isVisualizationSupportedForResult: doesResultHaveMainRole,
     guidanceLinks: [link.WCAG_1_3_1, link.WCAG_2_4_1],
     getAnalyzer: provider =>
         provider.createRuleAnalyzer(
             AnalyzerConfigurationFactory.forScanner({
-                rules: ['main-landmark'],
+                rules: ['unique-landmark'],
                 key: LandmarkTestStep.primaryContent,
                 testType: VisualizationType.LandmarksAssessment,
             }),

src/assessments/types/requirement.ts

@@ -5,6 +5,7 @@ import { ManualTestStatus } from 'common/types/manual-test-status';
 import {
     AssessmentNavState,
     GeneratedAssessmentInstance,
+    InstanceIdToInstanceDataMap,
 } from 'common/types/store-data/assessment-result-data';
 import { FeatureFlagStoreData } from 'common/types/store-data/feature-flag-store-data';
 import { DetailsViewActionMessageCreator } from 'DetailsView/actions/details-view-action-message-creator';
@@ -39,10 +40,17 @@ export interface Requirement {
     addFailureInstruction?: string;
     infoAndExamples?: ContentPageComponent;
     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.
+    getInitialManualTestStatus?: (instances: InstanceIdToInstanceDataMap) => ManualTestStatus;
     guidanceLinks: HyperlinkDefinition[];
     columnsConfig?: InstanceTableColumn[];
     getAnalyzer?: (provider: AnalyzerProvider) => Analyzer;
     getVisualHelperToggle?: (props: VisualHelperToggleConfig) => JSX.Element;
+    // Any results this returns false for will be omitted from visual helper displays, but still
+    // present for the purposes of instance lists or getInitialManualTestStatus. By default, all
+    // results support visualization.
+    isVisualizationSupportedForResult?: (result: DecoratedAxeNodeResult) => boolean;
     visualizationInstanceProcessor?: VisualizationInstanceProcessorCallback<
         PropertyBags,
         PropertyBags

src/background/assessment-data-converter.ts

@@ -29,6 +29,7 @@ export class AssessmentDataConverter {
         stepName: string,
         generateInstanceIdentifier: (instance: UniquelyIdentifiableInstances) => string,
         getInstanceStatus: (result: DecoratedAxeNodeResult) => ManualTestStatus,
+        isVisualizationSupported: (result: DecoratedAxeNodeResult) => boolean,
     ): AssessmentInstancesMap {
         let instancesMap: AssessmentInstancesMap = {};
 
@@ -51,6 +52,7 @@ export class AssessmentDataConverter {
                     stepName,
                     ruleResult,
                     getInstanceStatus,
+                    isVisualizationSupported,
                 );
             }
         });
@@ -98,6 +100,7 @@ export class AssessmentDataConverter {
         testStep: string,
         ruleResult: DecoratedAxeNodeResult,
         getInstanceStatus: (result: DecoratedAxeNodeResult) => ManualTestStatus,
+        isVisualizationSupported: (result: DecoratedAxeNodeResult) => boolean,
     ): GeneratedAssessmentInstance {
         const target: string[] = elementAxeResult.target;
         let testStepResults = {};
@@ -114,6 +117,7 @@ export class AssessmentDataConverter {
             ruleResult,
             elementAxeResult,
             getInstanceStatus,
+            isVisualizationSupported,
         );
 
         let actualPropertyBag = {
@@ -163,6 +167,7 @@ export class AssessmentDataConverter {
             status: ManualTestStatus.UNKNOWN,
             isCapturedByUser: false,
             failureSummary: null,
+            isVisualizationSupported: true,
             isVisualizationEnabled: true,
             isVisible: true,
         };
@@ -172,12 +177,14 @@ export class AssessmentDataConverter {
         ruleResult: DecoratedAxeNodeResult,
         elementAxeResult: HtmlElementAxeResults,
         getInstanceStatus: (result: DecoratedAxeNodeResult) => ManualTestStatus,
+        isVisualizationSupported: (result: DecoratedAxeNodeResult) => boolean,
     ): TestStepResult {
         return {
             id: ruleResult.id,
             status: getInstanceStatus(ruleResult),
             isCapturedByUser: false,
             failureSummary: ruleResult.failureSummary,
+            isVisualizationSupported: isVisualizationSupported(ruleResult),
             isVisualizationEnabled: false,
             isVisible: true,
         };