Fix focus visibility for input components in site setup

[Abhishek-17h]

• I signed and returned the Plone Contributor Agreement, and received and accepted an invitation to join a team in the Plone GitHub organization.
• I verified there aren't other open pull requests for the same change.
• I followed the guidelines in Contributing to Volto.
• I succesfully ran code linting checks on my changes locally.
• I succesfully ran unit tests on my changes locally.
• I succesfully ran acceptance tests on my changes locally.
• If needed, I added new tests for my changes.
• If needed, I added documentation for my changes, either in the Storybook or narrative documentation.
• I included a change log entry in my commits.

---

If your pull request closes an open issue, include the exact text below, immediately followed by the issue number. When your pull request gets merged, then that issue will close automatically.
Fixed missing visible focus for multiple select inputs across components using the SelectStyling widget in Site Setup. The fix ensures proper focus indication for accessibility across all instances of the widget.
Update snapshots to match new UI behavior.

Screenshots after Fix :

Previous behavior is provided in #6348

Closes #6348

[netlify]

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	e8956f9
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/67659356b72e070008c9e57b

[Abhishek-17h]

@stevepiercy @sneridagh can you please provide review on this?

[stevepiercy]

Refs: #6504

[stevepiercy]

News looks good, with a minor tweak.

This needs review from the @plone/volto-accessibility Team, so I assigned them as reviewers.

I also have a question about the source of the colors that you chose.

This looks like a nice improvement. Thank you!

[stevepiercy]

@Abhishek-17h out of curiosity, where did you get the colors in this PR? I know we're picky about being consistent with colors, especially to ensure sufficient contrast for accessibility. I don't know where we capture them all in a single place, like a style guide.

Hopefully someone from the @plone/volto-accessibility team can inform me. If this thing does not exist, it might be a good thing to add to our accessibility PLIP #6504.

[Wagner3UB]

I agree with @stevepiercy. I think we at least need documentation with use cases, such as focus and minimal contrast for the main font color, links, and buttons. It could indeed be a nice touch for the PLIP. I'll add a comment to the PLIP.

[Abhishek-17h]

@stevepiercy I understand that the Volto team is particular about color choices, which is why I used an existing color from the SelectStyling and applied a lighter version of it. This approach ensures that users can easily differentiate between selected and hovered inputs.
I didn’t use any specific tools to choose the color but made the adjustment to align with accessibility considerations and consistency within the existing design.

[Abhishek-17h]

@stevepiercy Thank you for your kind words! I'm glad to contribute to improving Volto. 😊

[stevepiercy]

I approve the news item, but this still needs a technical review.

[Abhishek-17h]

@ichim-david @JeffersonBledsoe @Wagner3UB can u please review this .