Describe the bug

We found two potential issues in the range slider audit:

1. The current version of the range slider receives keyboard focus around the entire component. The only interactive element is the button which also receives focus. The dual focused elements doesn't seem intuitive as the slider bar isn't the interactive part.

2. Also, the focus indicator on the button is quite small. We recommend increasing it at the very least to match closer to what W3C offers in their examples.

Steps to reproduce the bug

1. Go to https://designsystem.digital.gov/components/range-slider/
2. Keyboard tab into the range slider
3. Note that the entire element receives focus.
4. Note also how small and nearly imperceptible the focus indicator is on the button. It's a small blue outline and not offset or larger. The touch target may not meet the enhanced size.

Expected Behavior

See an example of other range sliders where focus is only on the button:
https://carbondesignsystem.com/components/slider/usage/#feedback
https://www.w3.org/WAI/ARIA/apg/patterns/slider/examples/slider-color-viewer/ <<the entire component receives focus but the button's focus is much clearer. The other slider examples from W3 only show the button receiving focus.

Related code

No response

Screenshots

No response

System setup

PC, Chrome

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate bug reports.