Add reduced motion and color scheme action inputs

Co-authored-by: JoyceZhu <6251669+JoyceZhu@users.noreply.github.com>

Author: Copilot

.github/actions/find/README.md

@@ -19,6 +19,14 @@ https://primer.style/octicons/
 
 **Optional** Stringified JSON object containing `username`, `password`, `cookies`, and/or `localStorage` from an authenticated session. For example: `{"username":"some-user","password":"correct-horse-battery-staple","cookies":[{"name":"theme-preference","value":"light","domain":"primer.style","path":"/"}],"localStorage":{"https://primer.style":{"theme-preference":"light"}}}`
 
+#### `reduced_motion`
+
+**Optional** Playwright [`reducedMotion`](https://playwright.dev/docs/api/class-browser#browser-new-context-option-reduced-motion) setting to emulate user preference. Allowed values: `reduce`, `no-preference`.
+
+#### `color_scheme`
+
+**Optional** Playwright [`colorScheme`](https://playwright.dev/docs/api/class-browser#browser-new-context-option-color-scheme) setting to emulate user preference. Allowed values: `light`, `dark`, `no-preference`.
+
 ### Outputs
 
 #### `findings`

.github/actions/find/action.yml

@@ -13,6 +13,12 @@ inputs:
     description: "Whether to capture screenshots of scanned pages and include links to them in the issue"
     required: false
     default: "false"
+  reduced_motion:
+    description: "Playwright reducedMotion setting. Allowed values: 'reduce', 'no-preference'"
+    required: false
+  color_scheme:
+    description: "Playwright colorScheme setting. Allowed values: 'light', 'dark', 'no-preference'"
+    required: false
 
 outputs:
   findings:

.github/actions/find/src/findForUrl.ts

@@ -8,12 +8,18 @@ export async function findForUrl(
   url: string,
   authContext?: AuthContext,
   includeScreenshots: boolean = false,
+  reducedMotion?: 'reduce' | 'no-preference',
+  colorScheme?: 'light' | 'dark' | 'no-preference',
 ): Promise<Finding[]> {
   const browser = await playwright.chromium.launch({
     headless: true,
     executablePath: process.env.CI ? '/usr/bin/google-chrome' : undefined,
   })
-  const contextOptions = authContext?.toPlaywrightBrowserContextOptions() ?? {}
+  const contextOptions = {
+    ...(authContext?.toPlaywrightBrowserContextOptions() ?? {}),
+    ...(reducedMotion ? {reducedMotion} : {}),
+    ...(colorScheme ? {colorScheme} : {}),
+  }
   const context = await browser.newContext(contextOptions)
   const page = await context.newPage()
   await page.goto(url)

.github/actions/find/src/index.ts

@@ -11,11 +11,27 @@ export default async function () {
   const authContext = new AuthContext(authContextInput)
 
   const includeScreenshots = core.getInput('include_screenshots', {required: false}) !== 'false'
+  const reducedMotionInput = core.getInput('reduced_motion', {required: false})
+  let reducedMotion: 'reduce' | 'no-preference' | undefined
+  if (reducedMotionInput) {
+    if (!['reduce', 'no-preference'].includes(reducedMotionInput)) {
+      throw new Error("Input 'reduced_motion' must be one of: 'reduce', 'no-preference'")
+    }
+    reducedMotion = reducedMotionInput
+  }
+  const colorSchemeInput = core.getInput('color_scheme', {required: false})
+  let colorScheme: 'light' | 'dark' | 'no-preference' | undefined
+  if (colorSchemeInput) {
+    if (!['light', 'dark', 'no-preference'].includes(colorSchemeInput)) {
+      throw new Error("Input 'color_scheme' must be one of: 'light', 'dark', 'no-preference'")
+    }
+    colorScheme = colorSchemeInput
+  }
 
   const findings = []
   for (const url of urls) {
     core.info(`Preparing to scan ${url}`)
-    const findingsForUrl = await findForUrl(url, authContext, includeScreenshots)
+    const findingsForUrl = await findForUrl(url, authContext, includeScreenshots, reducedMotion, colorScheme)
     if (findingsForUrl.length === 0) {
       core.info(`No accessibility gaps were found on ${url}`)
       continue

README.md

@@ -51,6 +51,8 @@ jobs:
           # auth_context: # Optional: Stringified JSON object for complex authentication
           # skip_copilot_assignment: false # Optional: Set to true to skip assigning issues to GitHub Copilot (or if you don't have GitHub Copilot)
           # include_screenshots: false # Optional: Set to true to capture screenshots and include links to them in filed issues
+          # reduced_motion: no-preference # Optional: Playwright reduced motion emulation (`reduce` or `no-preference`)
+          # color_scheme: dark # Optional: Playwright color scheme emulation (`light`, `dark`, or `no-preference`)
 ```
 
 > 👉 Update all `REPLACE_THIS` placeholders with your actual values. See [Action Inputs](#action-inputs) for details.
@@ -115,6 +117,8 @@ Trigger the workflow manually or automatically based on your configuration. The
 | `auth_context` | No | If scanned pages require authentication, a stringified JSON object containing username, password, cookies, and/or localStorage from an authenticated session | `{"username":"some-user","password":"***","cookies":[...]}` |
 | `skip_copilot_assignment` | No | Whether to skip assigning filed issues to GitHub Copilot. Set to `true` if you don't have GitHub Copilot or prefer to handle issues manually | `true` |
 | `include_screenshots` | No | Whether to capture screenshots of scanned pages and include links to them in filed issues. Screenshots are stored on the `gh-cache` branch of the repository running the workflow. Default: `false` | `true` |
+| `reduced_motion` | No | Playwright `reducedMotion` setting for scan contexts. Allowed values: `reduce`, `no-preference` | `reduce` |
+| `color_scheme` | No | Playwright `colorScheme` setting for scan contexts. Allowed values: `light`, `dark`, `no-preference` | `dark` |
 
 ---
 

action.yml

@@ -35,6 +35,12 @@ inputs:
     description: "Whether to capture screenshots and include links to them in the issue"
     required: false
     default: "false"
+  reduced_motion:
+    description: "Playwright reducedMotion setting for scans. Allowed values: 'reduce', 'no-preference'"
+    required: false
+  color_scheme:
+    description: "Playwright colorScheme setting for scans. Allowed values: 'light', 'dark', 'no-preference'"
+    required: false
 
 outputs:
   results:
@@ -85,6 +91,8 @@ runs:
         urls: ${{ inputs.urls }}
         auth_context: ${{ inputs.auth_context || steps.auth.outputs.auth_context }}
         include_screenshots: ${{ inputs.include_screenshots }}
+        reduced_motion: ${{ inputs.reduced_motion }}
+        color_scheme: ${{ inputs.color_scheme }}
     - name: File
       id: file
       uses: ./../../_actions/github/accessibility-scanner/current/.github/actions/file