[Bug Report][3.3.4][VSlider] Keyboard arrows doesn't work when focused programatically

[ferferga]

Environment

Vuetify Version: 3.3.4 Vue Version: 3.3.4 Browsers: Edge 114.0.1823.43 OS: Windows 10

Steps to reproduce

• Open the Playground link
• Wait 5 seconds for the slider to get focused
• When the slider is focused, try to use your keyboard arrows to move the slider. It won't work. It only works if the input is focused after a click or touchend event

Expected Behavior

The same functionality of standard sliders (like shown at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range), which after being clicked can be interacted with keyboard and is WHATWG compliant (https://html.spec.whatwg.org/multipage/input.html#common-input-element-events)

Actual Behavior

VSlider is not WHATWG compliant regarding focus state

Reproduction Link

https://play.vuetifyjs.com/#...

[KaelWD]

:focused doesn't actually focus the input, it just makes it look focused. https://vuetifyjs.com/en/api/v-slider/#props-focused

Forces a focused state styling on the component.

The proper way to focus it should be sliderRef.value.focus() but that doesn't seem to be exposed currently, a temporary workaround is sliderRef.value.$el.querySelector('[tabindex="0"]').focus()

It only works if the input is focused after a click or touchend event

Or tab