feat: Replace use of :focus-visible shim

[TrevorBurnham]

All targeted browsers now support :focus-visible: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible#browser_compatibility

This commit removes the use of the shim defined in @cloudscape-design/component-toolkit. Once this change is merged, the shim can be removed.

Benefits

This change would reduce CSS and JS bundle sizes by ~1KB. It would also eliminate the global mousedown/keydown event listeners required by the shim, which should improve runtime performance.

Additionally, following the browser's native :focus-visible behavior is arguably an a11y improvement.

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.

[TrevorBurnham]

I've updated this branch to take a more careful approach. Notably, the shim had greater specificity (two class selectors instead of one).

In one case I've used a double-specifier (:focus-visible:focus-visible) to ensure that the styles take precedence as intended. In other cases I think it should be fine to just use :focus-visible, but unexpected style interactions are always possible. If you really want to err on the side of caution, you could use :focus-visible:focus-visible consistently to preserve the existing specificity.

[avinashbot]

Thanks for opening the PR! Running screenshot tests on the PR to confirm everything checks out visually.

I already made a similar attempt earlier (#3598, #3615, #3599, #3607), but it led to enough visual discrepancies that it got me to step back from it for a bit. For context, it mostly concerns the fact that the JS utility is hidden by default until a keyboard event is detected, but the native :focus-visible is visible by default until a mouse event is detected, which is especially apparent on Safari, and occasionally on other browsers after certain programmatic focus moves (couldn't nail down the logic browsers use to link an event handler to a focus move, especially with React rendering in the way). Let me confirm if this is still the case in your PR and check back.

[TrevorBurnham]

@avinashbot Ah, sorry that I missed those earlier PRs!

The behavior in this PR would be the same: :focus-visible by its nature delegates to the browser's own heuristics. That's good from an a11y standpoint, but I agree that it can be jarring if it means that an outline appears because of a programmatic focus change triggered by a mouse event.

Can you tell me exactly what behavior you're seeing in Safari? Like, does the close button on a modal get visible focus after that modal was opened via mouse click?

[TrevorBurnham]

I've updated the branch and added a list of benefits to the PR description. Performance-wise, the benefits are more modest than I'd have expected. I think it really comes down to whether you want the shim's behavior or the native :focus-visible behavior.