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,60 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import { NewTabLink } from 'common/components/new-tab-link';
+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{' '}
+                    <NewTabLink href="https://www.w3.org/TR/WCAG22/#dfn-single-pointer">
+                        single pointer
+                    </NewTabLink>{' '}
+                    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">
+                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">
+                Providing single point activation for a control slider
+            </Markup.HyperLink>
+            <Markup.HyperLink href="https://www.w3.org/WAI/WCAG22/Techniques/failures/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">
+                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,212 @@ 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"
+    >
+      <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>
+      <div
+        class="pass-fail-grid"
+      >
+        <div
+          class="fail-section"
+        >
+          <div
+            class="fail-header"
+          >
+            <span
+              class="check-container"
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="8"
+                  cy="8"
+                  fill="#E81123"
+                  r="8"
+                />
+                <path
+                  d="M10.9837 6.27639C11.3352 5.92491 11.3352 5.35507 10.9837 5.00359C10.6322 4.65212 10.0624 4.65212 9.7109 5.00359L7.99722 6.71728L6.28375 5.00381C5.93227 4.65234 5.36242 4.65234 5.01095 5.00381C4.65948 5.35528 4.65948 5.92513 5.01095 6.2766L6.72443 7.99007L4.9837 9.7308C4.63222 10.0823 4.63222 10.6521 4.9837 11.0036C5.33517 11.3551 5.90502 11.3551 6.25649 11.0036L7.99722 9.26287L9.73816 11.0038C10.0896 11.3553 10.6595 11.3553 11.011 11.0038C11.3624 10.6523 11.3624 10.0825 11.011 9.73101L9.27001 7.99007L10.9837 6.27639Z"
+                  fill="var(--neutral-0)"
+                />
+              </svg>
+            </span>
+
+            <h3>
+              Fail
+            </h3>
+          </div>
+          <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>
+        </div>
+        <div
+          class="pass-section"
+        >
+          <div
+            class="pass-header"
+          >
+            <span
+              class="check-container"
+            >
+              <svg
+                aria-hidden="true"
+                fill="none"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="8"
+                  cy="8"
+                  fill="#228722"
+                  r="8"
+                />
+                <path
+                  clip-rule="evenodd"
+                  d="M6.05904 11.1417L6.0616 11.1442C6.10737 11.19 6.15668 11.23 6.20867 11.2643C6.57256 11.5046 7.06707 11.4646 7.38742 11.1442C7.38861 11.143 7.38982 11.1418 7.391 11.1406L11.9312 6.60041C12.2974 6.23427 12.2974 5.64071 11.9312 5.27457C11.5651 4.90848 10.9715 4.90848 10.6054 5.27457L6.72452 9.15545L5.60041 8.03134C5.2343 7.66524 4.64071 7.66524 4.27459 8.03134C3.90847 8.39747 3.90847 8.99104 4.27459 9.35718L6.05904 11.1417Z"
+                  fill="var(--neutral-0)"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+
+            <h3>
+              Pass
+            </h3>
+          </div>
+          <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>
+        </div>
+      </div>
+      <h2>
+        More examples
+      </h2>
+      <h3>
+        WCAG success criteria
+      </h3>
+      <div
+        class="content-hyperlinks"
+      >
+        <a
+          class="ms-Link insights-link root-000"
+          href="https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements"
+          target="_blank"
+        >
+          Understanding Success Criterion 2.5.7: Dragging Movements
+        </a>
+      </div>
+      <h3>
+        Sufficient techniques
+      </h3>
+      <div
+        class="content-hyperlinks"
+      >
+        <a
+          class="ms-Link insights-link root-000"
+          href="https://www.w3.org/WAI/WCAG22/Techniques/general/G219"
+          target="_blank"
+        >
+          G219: Ensuring that an alternative is available for dragging movements that operate on content
+        </a>
+        <a
+          class="ms-Link insights-link root-000"
+          href="https://www.w3.org/WAI/WCAG22/Techniques/failures/F108"
+          target="_blank"
+        >
+          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
+        </a>
+      </div>
+      <h3>
+        Additional guidance
+      </h3>
+      <div
+        class="content-hyperlinks"
+      >
+        <a
+          class="ms-Link insights-link root-000"
+          href="https://www.w3.org/WAI/WCAG22/Understanding/pointer-gestures"
+          target="_blank"
+        >
+          Understanding Success Criterion 2.5.1: Pointer Gestures
+        </a>
+        <a
+          class="ms-Link insights-link root-000"
+          href="https://www.w3.org/WAI/WCAG22/Techniques/general/G216"
+          target="_blank"
+        >
+          Providing single point activation for a control slider
+        </a>
+        <a
+          class="ms-Link insights-link root-000"
+          href="https://www.w3.org/WAI/WCAG22/Techniques/failures/F105"
+          target="_blank"
+        >
+          Failure of Success Criterion 2.5.1 due to providing functionality via a path-based gesture without simple pointer alternative
+        </a>
+        <a
+          class="ms-Link insights-link root-000"
+          href="https://www.w3.org/WAI/WCAG22/Techniques/general/G215"
+          target="_blank"
+        >
+          Providing controls to achieve the same result as path based or multipoint gestures
+        </a>
+      </div>
+    </div>
+    <div
+      class="content-right"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Guidance Content pages test/pointerMotion/guidance matches the snapshot 1`] = `
 <DocumentFragment>
   <div