search

catamphetamine / react-phone-number-input

React component for international phone number input
http://catamphetamine.gitlab.io/react-phone-number-input/
MIT License
914 stars 194 forks source link

[A11y] Country selector is not accessible by keyboard #373

Closed meshe03 closed 3 years ago

meshe03 commented 3 years ago

Hi! In my current project we are using this library. We want to make our web more accessible. I checked the demo and the select is focused as expected but when enter key is pressed the country selector isn't triggered. This implies that there is no way to modify the country for people who only navigate with the keyboard.

a11y

catamphetamine commented 3 years ago

Hi. The reason for that is that the country selector uses a native <select/>. The native <select/> doesn't always expand on Enter: sometimes it only expands on spacebar. I'm on Windows and this is how it works in this OS in Firefox (while in Chrome it does expand both on Enter and spacebar). I assume you're on a Mac/Safari.

We could add a hack: something like <select onKeyDown={ if Enter then select.click() }/> but why would we if that is not how a standard select works, and a standard select can't misbehave.

To verify the standardized <select/> behavior, a <select/> demo could be used: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

catamphetamine commented 3 years ago

Actually, I should test it first.

catamphetamine commented 3 years ago

Actually, it does expand on Enter on the demo page for me. I'm on Windows. Is this a Mac-specific issue?

catamphetamine commented 3 years ago

I'm on Chrome, btw.

Tested in Firefox, and in Firefox it doesn't expand on Enter. So, this behavior is standardized and is browser-specific. So, it's not an issue.

meshe03 commented 3 years ago

Oh I see! I tried with space bar in my Mac using chrome and it works perfectly. And you're right, this is a standard behavior on select so it doesn't make much sense to force the list to be displayed by doing enter.

Thank you so much for your reply 😄