feat(VTimePicker): Add keyboard controls

[ikushum]

fixes #10722, #21885

Description

• Convert the hour, second and minute divs to buttons
• Add keyboard controls and navigation

Markup:

<template>
  <v-container>
    <v-time-picker
      v-model="model"
      use-seconds
    />
  </v-container>
</template>

<script setup>
  import { ref } from 'vue'

  const model = ref()
</script>

[J-Sek]

The immediate problem becomes - assistive tools will show the clock has 12 options for minutes and seconds with gaps. Not sure if VBtn approach is correct here. Maybe the clock should have role spinbutton and accept up/down keys to change, while the visual representation is more of a guide for people relying on pointer-based interaction.

[J-Sek]

The claim "because tests look ugly" is too weak to justify the risk unintentional styling accidents. E.g. user can make all VBtn have strong shadow and even supplement custom CSS, just to later realize it leaks into this component.

Everything else looks good and we could merge without VBtn.

[ikushum]

The claim "because tests look ugly" is too weak to justify the risk unintentional styling accidents. E.g. user can make all VBtn have strong shadow and even supplement custom CSS, just to later realize it leaks into this component.

Everything else looks good and we could merge without VBtn.

@J-Sek Looks like all the v-btn issues you are explaining are not relevant anymore because this VBtn now has _as="VTimePickerClockBtn". Global defaults set to VBtn won't impact the clock buttons.

Let me know if I'm wrong

[J-Sek]

@ikushum, thanks for the answer. I think I had CSS and Sass variables in mind - e.g. solid "brutalist" shadow is easier to pull off with custom CSS.

And I did not notice we have added !importants as well. It is a bit backwards after cleanup we did to support CSS @layers.

Also, when both parts are visible (inputs and the clock), the interaction feels a bit weird... I mean, the user [Tab]s over to reach the clock, but can only change the last segment (minutes or seconds). Theoretically we could re-assign left/right arrows to toggle hours/minutes/seconds. Sorry for not bringing it in the very first feedback batch. Fixed it in last commit.