feat(wcag-2-2): Add "dragging movements" test

src/assessments/pointer-motion/assessment.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 
 import { AssessmentBuilder } from '../assessment-builder';
 import { Assessment } from '../types/iassessment';
+import { DraggingMovements } from './test-steps/dragging-movements';
 import { MotionOperation } from './test-steps/motion-operation';
 import { PointerCancellation } from './test-steps/pointer-cancellation';
 import { PointerGestures } from './test-steps/pointer-gestures';
@@ -29,5 +30,5 @@ export const PointerMotionAssessment: Assessment = AssessmentBuilder.Assisted({
     gettingStarted: gettingStarted,
     guidance,
     visualizationType: VisualizationType.PointerMotionAssessment,
-    requirements: [PointerGestures, PointerCancellation, MotionOperation],
+    requirements: [PointerGestures, PointerCancellation, MotionOperation, DraggingMovements],
 });

src/assessments/pointer-motion/test-steps/dragging-movements.tsx

@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { link } from 'content/link';
+import * as content from 'content/test/pointer-motion/dragging-movements';
+import * as React from 'react';
+
+import { ManualTestRecordYourResults } from '../../common/manual-test-record-your-results';
+import { Requirement } from '../../types/requirement';
+import { PointerMotionTestStep } from './test-steps';
+
+const description: JSX.Element = (
+    <span>
+        The action of dragging cannot be the only means available to perform an action, with
+        exceptions on where dragging is essential to the functionality, or the dragging mechanism is
+        not built by the web author (e.g., native browser functionality unmodified by the author).
+    </span>
+);
+
+const howToTest: JSX.Element = (
+    <div>
+        <ol>
+            <li>
+                <p>
+                    Examine the target page to identify elements that support dragging (such as
+                    press and hold, repositioning of pointer, releasing the pointer at end point).
+                </p>
+            </li>
+            <li>
+                <p>
+                    Verify that there is an{' '}
+                    <a href="https://www.w3.org/TR/WCAG22/#dfn-single-pointer">single pointer</a>{' '}
+                    activation alternative that does not require dragging to operate the same
+                    function
+                </p>
+                <p>
+                    Exception: This criterion does not apply to scrolling enabled by the user-agent.
+                    Scrolling a page is not in scope, nor is using a technique such as CSS overflow
+                    to make a section of content scrollable. This criterion also applies to web
+                    content that interprets pointer actions (i.e. this does not apply to actions
+                    that are required to operate the user agent or assistive technology).
+                </p>
+            </li>
+            <ManualTestRecordYourResults isMultipleFailurePossible={true} />
+        </ol>
+    </div>
+);
+
+export const DraggingMovements: Requirement = {
+    key: PointerMotionTestStep.draggingMovements,
+    name: 'Dragging movements',
+    description,
+    howToTest,
+    ...content,
+    isManual: true,
+    guidanceLinks: [link.WCAG_2_5_7],
+};

src/assessments/pointer-motion/test-steps/test-steps.ts

@@ -4,4 +4,5 @@ export const enum PointerMotionTestStep {
     pointerGestures = 'pointer-gestures',
     pointerCancellation = 'pointer-cancellation',
     motionOperation = 'motion-operation',
+    draggingMovements = 'dragging-movements',
 }

src/content/test/pointer-motion/dragging-movements.tsx

@@ -0,0 +1,89 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+import { create, React } from '../../common';
+
+export const infoAndExamples = create(({ Markup }) => (
+    <>
+        <p>
+            The action of dragging cannot be the only means available to perform an action, with exceptions on where dragging is essential
+            to the functionality, or the dragging mechanism is not built by the web author (e.g., native browser functionality unmodified by
+            the author).
+        </p>
+        <h2>Why it matters</h2>
+        <p>Users who struggle with performing dragging movements need to still operate an interface with a pointer interface.</p>
+        <p>
+            Some people cannot perform dragging movements in a precise manner. Others use a specialized or adapted input device, such as a
+            trackball, head pointer, eye-gaze system, or speech-controlled mouse emulator, which may make dragging cumbersome and
+            error-prone. When an interface implements functionality that uses dragging movements, users perform discrete actions such as
+            tapping or clicking to establish a starting point or press and hold that contact. Not all users can accurately press and hold
+            that contact while also repositioning the pointer. An alternative method must be provided so that users with mobility
+            impairments who use a pointer (mouse, pen, or touch contact) can use the functionality.
+        </p>
+
+        <h2>How to fix</h2>
+        <p>
+            For any function that can be operated through dragging, make sure that the user can (1) operate the function through dragging,
+            or (2) there is a <a href="https://www.w3.org/TR/WCAG22/#dfn-single-pointer">single pointer</a> activation (for example single
+            taps, clicks) alternative that does not require dragging to operate the same function.
+        </p>
+
+        <h2>Example</h2>
+        <Markup.PassFail
+            failText={
+                <p>
+                    A table’s columns can only be resized if someone can use a mouse to click on the column divider and then drag it to a
+                    new position, adjusting the width of the column in the process.
+                </p>
+            }
+            passText={
+                <>
+                    <p>
+                        To pass this instance, an alternative "move" button could be provided, where if pressed, the next mouse click on
+                        another area of the UI could result in the table column adjustments without the need to specifically drag the column
+                        divider there.
+                    </p>
+                    <p>
+                        Another way to pass this instance would be to provide alternative controls to adjust the width, such as with menus,
+                        buttons, or text fields to adjust the value. These alternative methods would allow someone to click or press
+                        different controls to adjust the table columns, without having to drag or use keyboard commands which may be
+                        difficult to perform (e.g., rapidly pressing, or long-pressing different keys).
+                    </p>
+                </>
+            }
+        />
+
+        <h2>More examples</h2>
+        <h3>WCAG success criteria</h3>
+        <Markup.Links>
+            <Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements">
+                Understanding Success Criterion 2.5.7: Dragging Movements
+            </Markup.HyperLink>
+        </Markup.Links>
+        <h3>Sufficient techniques</h3>
+        <Markup.Links>
+            <Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/general/G219">
+                G219: Ensuring that an alternative is available for dragging movements that operate on content
+            </Markup.HyperLink>
+            <Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/failures/F108">
+                F108: Failure of Success Criterion 2.5.7 Dragging Movements due to not providing a single pointer method for the user to
+                operate a function that does not require a dragging movement
+            </Markup.HyperLink>
+        </Markup.Links>
+        <h3>Additional guidance</h3>
+        <Markup.Links>
+            <Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Understanding/pointer-gestures">
+                Understanding Success Criterion 2.5.1: Pointer Gestures
+            </Markup.HyperLink>
+            <Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/general/G216">
+                G216: Providing single point activation for a control slider
+            </Markup.HyperLink>
+            <Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/failures/F105">
+                F105: Failure of Success Criterion 2.5.1 due to providing functionality via a path-based gesture without simple pointer
+                alternative
+            </Markup.HyperLink>
+            <Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/general/G215">
+                G215: Providing controls to achieve the same result as path based or multipoint gestures
+            </Markup.HyperLink>
+        </Markup.Links>
+    </>
+));

src/content/test/pointer-motion/index.ts

@@ -1,5 +1,6 @@
 // Copyright (c) Microsoft Corporation. All rights reserved.
 // Licensed under the MIT License.
+import * as draggingMovements from './dragging-movements';
 import { guidance } from './guidance';
 import * as motionOperation from './motion-operation';
 import * as pointerCancellation from './pointer-cancellation';
@@ -10,4 +11,5 @@ export const pointerMotion = {
     pointerCancellation,
     pointerGestures,
     motionOperation,
+    draggingMovements,
 };

src/tests/end-to-end/tests/content/__snapshots__/guidance-content.test.ts.snap

@@ -26125,6 +26125,28 @@ exports[`Guidance Content pages test/parsing/parsingContent/infoAndExamples matc
 </DocumentFragment>
 `;
 
+exports[`Guidance Content pages test/pointerMotion/draggingMovements/infoAndExamples matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="content-container"
+  >
+    <div
+      class="content-left"
+    />
+    <div
+      class="content"
+    >
+      <h1>
+        Cannot find test/pointerMotion/draggingMovements/infoAndExamples
+      </h1>
+    </div>
+    <div
+      class="content-right"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Guidance Content pages test/pointerMotion/guidance matches the snapshot 1`] = `
 <DocumentFragment>
   <div

src/tests/end-to-end/tests/details-view/__snapshots__/settings-panel.test.ts.snap

@@ -12,15 +12,15 @@ exports[`Details View -> Settings Panel should pass accessibility validation wit
   The link has insufficient color contrast of 1.07:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffff00, surrounding text: #ffffff)
   The link has no styling (such as underline) to distinguish it from the surrounding text",
         "selector": [
-          "p:nth-child(1) > .root-294.insights-link[target="_blank"]",
+          "p:nth-child(1) > .root-293.insights-link[target="_blank"]",
         ],
       },
       {
         "failureSummary": "Fix any of the following:
   The link has insufficient color contrast of 1.07:1 with the surrounding text. (Minimum contrast is 3:1, link text: #ffff00, surrounding text: #ffffff)
   The link has no styling (such as underline) to distinguish it from the surrounding text",
         "selector": [
-          ".toggle-description--ieTgg > .root-294.insights-link[target="_blank"]",
+          ".toggle-description--ieTgg > .root-293.insights-link[target="_blank"]",
         ],
       },
     ],