Keyboard mode is unusable with keyboard

[k3nsei]

When I open timepicker popup and switch to keyboard mode I cannot change focus using Tab and Shift + Tab after focusing hours input. Also could we have ⇅? After Hour and Minute label to make it more clear for users to use up and down arrow key to change them?

Btw. why in dial mode things like hours and minutes are focusable if user cannot interact with them?

[dhutaryan]

These elements are focusable because user can switch hour/minute dials and am/pm by space key

[k3nsei]

@dhutaryan so shouldn't they be buttons or having attribute role="button"?

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

[k3nsei]

I also believe role="slider" should be used in keyboard mode instead of text input. It defines better a11y behaviour to use keyboard arrows to change it as currently we cannot type numeric values.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role

[k3nsei]

@dhutaryan here is small example how it could work https://stackblitz.com/edit/ng-slider-clock-as5izns?file=src%2Ftime-slider%2Ftime-slider.component.ts

[dhutaryan]

Not sure about role="slider". I believe the usual input should work great. We should keep remember that we have to follow material design as much as possible.

Tab key fixed in: 17.5.1 16.3.1 15.3.1 14.3.2 13.2.3 12.5.3

[k3nsei]

@dhutaryan native <input type="time"> have role slider maybe not literary but by having min, max and steps.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

[k3nsei]

@dhutaryan Anyway from spec of material design time picker user should be able to type there using keyboard https://m3.material.io/components/time-pickers/guidelines#14894e49-3cb0-49f0-80ad-932cdb00bb1c

[k3nsei]

@dhutaryan here are also new ideas how you can improve input behaviours https://stackblitz.com/edit/simple-timpe-picker-mz96hfs?file=src%2Ftime-picker%2Ftime-picker.component.ts