[vvaliyev]

Description

Adds visual-regression coverage for four Input rendering states ahead of a refactor of how Input paints its field. Each state is captured as its own named test, so the refactor PR's visual report shows readable per-state items instead of anonymous pixel diffs. On main the new screenshots are identical between baseline and PR builds, so this PR itself produces zero visual diff.

New dev page pages/input/focus-states.page.tsx (#/light/input/focus-states) renders one captioned section per state, each Input tagged with a data-testid:

• readonly: <Input readOnly value="Read-only value" />
• native-invalid: <Input type="email" value="not-an-email" /> (browser :invalid, no invalid prop)
• suffix: <Input value="42" suffix="USD" />
• prefix: <Input value="42" prefix="$" />

test/definitions/visual/input.ts gains nine screenshotArea entries on that page: rest, and for each input focused <id> and focused <id>, pointer away. Focus is produced with page.click(): the component's focus styles are plain CSS :focus/:focus-within, which the existing page.focusInputs() helper (a dispatched focusin event) does not trigger. The pointer-away variants move the mouse to the page heading after clicking, because one of the states under test only shows once the pointer leaves the field.

Related links, issue #, if available: n/a

How has this been tested?

• npm run quick-build; TZ=UTC npx jest -c jest.unit.config.js src/input: 143 tests pass, no snapshot changes.
• tsc --noEmit -p tsconfig.test-definitions.json, eslint and prettier pass on the two changed files.
• Each setup reproduced in Chrome (puppeteer-core) on a dev server: clicking focuses the targeted input and the focus persists after the pointer moves to the heading; the page renders in light and dark.
• The nine captures were replicated locally (crop .screenshot-area, pixelmatch) against the same page on main and on the upcoming refactor branch: zero diff between two main builds; on the refactor branch the readonly and native-invalid focused entries and the suffix/prefix pointer-away entries differ, as intended.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.71%. Comparing base (10501b2) to head (db0de18).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5127   +/-   ##
=======================================
  Coverage   97.71%   97.71%           
=======================================
  Files         991      991           
  Lines       31840    31840           
  Branches    11759    11759           
=======================================
  Hits        31112    31112           
  Misses        682      682           
  Partials       46       46           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[vvaliyev]

/override-visual-regression New page input/focus-states has no baseline on main; the nine new entries fail with ".screenshot-area is not visible" on the baseline.