Hacker News Reader

> Just tried the picker https://react-spectrum.adobe.com/react-spectrum/Picker.html and within 30 seconds you can find divergences from the browser's behaviour.

Took me exactly three key presses. I navigate using vimium. I just don't know how to pick anything on vimium without my mouse on this, while standard select work just fine.

> In Firefox, if I use tab I can select my native <select> and it gets focus styling - not so with Adobe Spectrum React's equivalent control. Once I have focus, I can start typing to select items without opening the dropdown list. Typing whilst I've tabbed on to the React control does nothing. With the native control I can hit space to open up the menu and view the items once I have focus. With the React control, hitting space does nothing.

I just tried the link (in Firefox) and all of these work correctly.

> I also looked at elements like the switch and checkboxes. With native components I can click in the empty space before a form control and be confident that the next <Tab> press I perform will focus the control for me. This behaviour doesn't work with Adobe Spectrum React's equivalent control's - I end up tabbing straight over the components altogether.

What do you mean, "click in the empty space before a form control"?

Also the picker is broken on iOS. If the bottom navigation bar is hidden the backdrop doesn‘t cover the whole page, which is ugly. More ugly then just a standard select element. Selecting by swiping over the elements doesn‘t work. And sometimes an accidental swipe and tap jumps to the top of the page. If Adobe can‘t support iPhone for everyone with less people power is better off using the existing form elements.

Nor should we want to! I have spent a week trying just to make my forms screen-reader-friendly and it is very hard, especially if you're using a library already to build the components. But the reason I know it won't work is that all my changes look like weird hacks and are bound to be immediately broken by the next person to work on them that's not using a screenreader.

in both examples where you claim this doesn't work it worked for me. clicking on an empty space next to the form element and hitting tab focused correctly for me. Also tabbing then starting to type worked as well. I tested in FF and Chrome. Are you sure the options exist in the select box when you type? That would make it seem like type completion doesn't work. I Tried the checkbox and radio buttons example in FF and Chrome both auto select the field and using arrow keys to make options selected worked just like native. I think the error is somewhere between keyboard and chair.

Try Tom Select: https://tom-select.js.org/examples/

Any initial impressions on that one?