Slider is not accessible via keyboard about rheostat

[backwardok]

FYI the main reason why this isn't keyboard accessible is not because of the fact that it's a div (the tabIndex value allows it to be tabbed to). It's because there is an explicit tabIndex value set (in this case 1 and 2), which means that this slider will get tabbed to when unexpected (the 1st and 2nd elements on the page) and not get tabbed to when expected (in the natural flow of elements). Additionally, the slider controls lack any sort of highlight for when they have focus, resulting in a confusion of when they have focus. The fix would be to not allow passing in a particular tabIndex and always setting tabIndex to 0, in addition to adding any proper aria roles necessary.

[goatslacker]

Thanks for filing @sarbbottam :)

From what I understand there's only one issue concerning rheostat and that's if we should use <button> instead of <div>.

I did not choose <button> initially because the slider handles aren't meant to act as buttons. There's nothing to "press" or "click" about them. I only care about keyboard interaction and when someone drags them around.

After reading your article as well as Nicholas', which you link to at the end, I'm still not sure <button> is the appropriate element to use here but I'd love to hear your thoughts on this.

[ljharb]

I think what we really want it to behave like is a <input type="range">, but since the native range slider is unavailable as a standalone element, I think <button type="button"> would be the best analog (ie, keyboard+mouse -focusable and interactive). That you can't click on it is fine, I think, because it'd just be a noop.

[sarbbottam]

I did not choose <button> initially because the slider handles aren't meant to act as buttons.

@goatslacker you are right.
button semantic is not appropriate. It could be any focusable element with role="slider".

As @ljharb mentioned, <button> seems to be the best match.

I think <button type="button"> would be the best analog

Options

1. add tabindex=0 and role="slider" to the existing divs.
   div are meant for container, I personally would not use it for any other purpose
2. replace div with button and add role="slider", also update the style to make the button look like slider thumb in the current UI.
3. may be something else ...

---

Irrespective of the approach chosen, on keydown,

1. Must
   1. Right Arrow and Up Arrow increase the value of the slider.
   2. Left Arrow and Down Arrow decrease the value of the slider.
2. Good to have
   1. Home and End move to the first and last values of the slider.
   2. Page Up and Page Down optionally increment or decrement the slider by a given amount.