fix(VTimePicker): add aria-disabled attribute

[ikushum]

fixes #21885

Description

Add aria-disabled to disabled clock item

Markup:

<template>
  <v-container>
    <v-time-picker v-model="model" :allowed-hours="allowedHours" />
  </v-container>
</template>

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

  const model = ref(new Date())
  const allowedHours = hour => hour % 2 === 0
</script>

[J-Sek]

I don't observe any meaningful difference. Clock is not focusable, so screen reader ignores it. Accessibility tree does not seem to improve either. All we really get is a fancy selector for tests.

[Smrtnyk]

I don't observe any meaningful difference. Clock is not focusable, so screen reader ignores it. Accessibility tree does not seem to improve either. All we really get is a fancy selector for tests.

You have a point, but it is cumbersome to test without it

[J-Sek]

Correct title: "chore(VTimePicker): mark disabled clock digits for testing".

Would it make any difference if we set disabled (without aria-*)?

[Smrtnyk]

Correct title: "chore(VTimePicker): mark disabled clock digits for testing".

Would it make any difference if we set disabled (without aria-*)?

I am using vitest browser mode and expect.element().toBeDisabled()
I can try locally to see if it would work

[Smrtnyk]

Correct title: "chore(VTimePicker): mark disabled clock digits for testing".

Would it make any difference if we set disabled (without aria-*)?

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/disabled#overview
per mdn spec disabled should not go to divs
maybe this div should actually be a button since it is acting as a button in the end
then it could also be targeted via clockContainer.getByRole("button", { name: "22" })

[ikushum]

The proper fix definately is to convert these divs to buttons

[J-Sek]

When we enable focus within the clock, it should handle up/down arrows to change value by 1 to access minutes and seconds that do not have visible buttons.

I would also consider special handling for Tab

• Where does the initial focus land when the time value is 12:44 and we don't have "44" button on minutes clock?
• to exit with single click rather than forcing user to cycle until the last button. For 24h hour clock user would need to click 23 times to exit.

[ikushum]

When we enable focus within the clock, it should handle up/down arrows to change value by 1 to access minutes and seconds that do not have visible buttons.

I would also consider special handling for Tab

• Where does the initial focus land when the time value is 12:44 and we don't have "44" button on minutes clock?
• to exit with single click rather than forcing user to cycle until the last button. For 24h hour clock user would need to click 23 times to exit.

@J-Sek The changes you are proposing should probably go to dev. Will create a separate PR for it targeting dev.

There's also a separate issue - #10722