fix(select): update default inital styling of required selects

[Bracciata]

Summary

Fixes #1532

• Updates CSS selectors in select.css from :invalid to :user-invalid so that required select fields no longer display error styling (red ring) on initial page load
• :user-invalid only activates after the user has interacted with the field or submitted the form, matching expected behavior
• Adds screenshot test for Select[required] with light and dark theme snapshots

Test plan

• Verify required select fields do not show red error ring on initial render
• Verify error styling still appears after user interaction with a required field
• Verify explicit error prop styling is unaffected
• All 65 screenshot tests pass

[Copilot]

Pull request overview

Updates the Select component’s “invalid” styling behavior so required selects don’t show error styling on initial render, aligning visual validation with user interaction.

Changes:

• Replace :invalid selectors with :user-invalid in select field CSS to prevent initial error styling.
• Add screenshot coverage for Select with required in both light and dark themes.
• Add new baseline snapshots for the required-select screenshots.

Reviewed changes

Copilot reviewed 2 out of 4 changed files in this pull request and generated 1 comment.

File	Description
packages/styles/select.css	Switches invalid-state styling from :invalid to :user-invalid to avoid showing errors before user interaction.
packages/react/src/components/Select/screenshots.e2e.tsx	Adds Playwright component screenshot test for Select[required] (light/dark).
e2e/screenshots/select-required-.png	New baseline snapshot for required select (light theme).
e2e/screenshots/dark--select-required-.png	New baseline snapshot for required select (dark theme).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-2311.d15792l1n26ww3.amplifyapp.com

[anastasialanz]

The CSS fix (:invalid → :user-invalid) is correct and the initial-state screenshots confirm the red ring no longer appears on page load, which resolves #1532.

However, the "after interaction" e2e test (lines 88-91 in screenshots.e2e.tsx) does focus → blur to try triggering :user-invalid:

await component.getByLabel('Select').focus();
await component.getByLabel('Select').blur();

This is not sufficient to trigger :user-invalid on a <select>. Per the spec, :user-invalid requires the user to have "significantly interacted" with the control — for a <select>, this means actually changing the value, not just focusing/blurring. As a result, the "after interaction" screenshots are visually identical to the initial-state ones — neither shows a red error ring.

To properly trigger :user-invalid, the test should change the select value, e.g.:

const select = component.getByLabel('Select');
await select.selectOption('apple');   // select a valid value
await select.selectOption('');         // change back to invalid
await select.blur();

This would produce a screenshot that actually demonstrates the error styling appearing after user interaction, fully proving the fix works in both directions.

[anastasialanz]

Left a comment about how the screenshot tests don't prove the :user-invalid css.

Addressed! More screenshots than expected were updated, however, my guess is it is from modal scrolling.

[anastasialanz]

The screenshots still don't seem right because the red outline is missing for the "after" screenshot. I tried the code out below and was able to generate the error styles. Let me know if it works for you.

Addressed