Disable keyboard navigation on a disabled input

[loicplaire]

Steps to reproduce

1. Open https://codesandbox.io/s/relaxed-ptolemy-vopdk
2. Using the mouse, set the focus on the codesanbox preview area.
3. Use the keyboard tab key to set the focus on the country dropdown.
4. Press the arrow down key.
5. The country dropdown opens and you can select a country 😕.

Expected behaviour

Using keyboard navigation, it shouldn't be possible to focus and open the country dropdown.

Actual behaviour

When applied to a disabled input, it is still possible to open the country dropdown and select a country using the keyboard.

Potential solution

Setting the tab-index to -1 when the input is disabled would fix the issue. We should also look at adding the aria-disabled attributes for a11y purpose. I can create a PR if the approach sounds good to you!

Initialisation options

intlTelInput(inputEl.current, {
  utilsScript:
    "https://cdn.jsdelivr.net/npm/[email protected]/build/js/utils.js"
});

[jackocnr]

Good catch. I would welcome a PR to address this. I wasn't sure about the idea of making the selected flag un-tabbable tho - I guess it should behave the same as normal inputs. I don't have time to check myself right now, but can you tab to normal inputs when they're disabled?

[loicplaire]

Thanks @jackocnr, I should be able to take a look at it in the next few days. An element with the disabled attribute is not focusable: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled so as you said, the same logic should apply to the dropdown.