Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Custom JavaScript controls can't capture the nuance of form fields (2021)

drewdevault.com

Post reply on HN
Print view View original

121–130 of 227 posts

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#121

Post by robin_reala »

kmeisthax wrote: post #118
robin_reala wrote: post #31

Earlier quoted context omitted.

But… that’s when as a developer you push back. Visual requirements don’t take the place of accessible components in countries where there’s a legal requirement for accessibility, which includes most of north america.

In some cases the visual requirements are also accessibility-related. For example, will give you a drop-down that lets you type to pick, but only the first letter, and only letters that directly correspond with a keycode. So you can't type "Uni" to get "United States of America"; you can't type "とうきょう" plus enter to get "東京", and so on. If you need to support IMEs or picking through large option sets, dropdowns are a…

Oh, 100%, if your designer is extending components with a mind for greater usability and accessibility then that’s perfect. There’s a reason ARIA exists after all.

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#122

Post by 5350-uiop-1130 »

mihaic wrote: post #7

I'd actually put the blame here on browsers, and how limited the default inputs are. There are too many needlessly reimplemented components, but anyone that has ever needed to style a to make it look in line with any modern design quickly reached desperation. I'd love to be able to use standard components everywhere, but most of my users care if my website looks like it's from 2004.

the web is really a horrible platform to build any kind of high fidelity app. you can say it works despite of itself.

and this is by design, web as a platform is pretty much owned by tech giants like google and apple who have a financial interest in keeping the web from becoming a rich platform which would cut into their app store hegemony.

ironic when you consider iphone and the html 5 back story. in some respects microsoft with IE back in the days was more interested in developing the web as a platform but also saw the web as something they could monopolise whereas now apple takes a more nuanced but just as much devious approach.

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#123

Post by stereocodes »

lol768 wrote: post #59
msoad wrote: post #45

It's such a blanket statement to say "you can't". Those controls themselves are coded up mostly using JavaScript so it is defiantly possible. It just requires a lot of work. The most accessible component library that I've seen is Adobe Spectrum React[1] which supports all of those nuances mentioned here for all of their controls and allow for styling and customization. [1] https://react-spectrum.adobe.com/react-spect…

> supports all of those nuances mentioned here for all of their controls and allow for styling and customization I don't believe it. 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. The invisible input field behaviour Drew mentions in the article doesn't work. If I hit backspace, my browser doesn't know I'm i…

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.

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#124

Post by gjvc »

The sooner we stop attempting to fool each other that DOM + CSS is a suitable model for composing user interfaces which were previously implemented as native apps, the sooner we will get past the web era and on to something better.

(25 years later... still trying.)

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#125

Post by phh »

lol768 wrote: post #59
msoad wrote: post #45

It's such a blanket statement to say "you can't". Those controls themselves are coded up mostly using JavaScript so it is defiantly possible. It just requires a lot of work. The most accessible component library that I've seen is Adobe Spectrum React[1] which supports all of those nuances mentioned here for all of their controls and allow for styling and customization. [1] https://react-spectrum.adobe.com/react-spect…

> supports all of those nuances mentioned here for all of their controls and allow for styling and customization I don't believe it. 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. The invisible input field behaviour Drew mentions in the article doesn't work. If I hit backspace, my browser doesn't know I'm i…

> 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.

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#126

Post by stereocodes »

gjvc wrote: post #124

The sooner we stop attempting to fool each other that DOM + CSS is a suitable model for composing user interfaces which were previously implemented as native apps, the sooner we will get past the web era and on to something better. (25 years later... still trying.)

LOL

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#127

Post by Vinnl »

msoad wrote: post #45

It's such a blanket statement to say "you can't". Those controls themselves are coded up mostly using JavaScript so it is defiantly possible. It just requires a lot of work. The most accessible component library that I've seen is Adobe Spectrum React[1] which supports all of those nuances mentioned here for all of their controls and allow for styling and customization. [1] https://react-spectrum.adobe.com/react-spect…

This is such a fantastic library. Gave me a far better shot at making my work accessible than I'd otherwise have.

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#128

Post by aaronbasssett »

K0nserv wrote: post #60
mihaic wrote: post #7

I'd actually put the blame here on browsers, and how limited the default inputs are. There are too many needlessly reimplemented components, but anyone that has ever needed to style a to make it look in line with any modern design quickly reached desperation. I'd love to be able to use standard components everywhere, but most of my users care if my website looks like it's from 2004.

You don’t have to style the select. If you are being forced to, your designers are either incompetent or ignorant. Aesthetics shouldn’t trump usability

That's an unpleasant thing to say about the people running Hacker News.

Take a look at the search page.

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#129

Post by nine_k »

marcosdumay wrote: post #76
egeozcan wrote: post #37

Earlier quoted context omitted.

The problem is not just styling, but usability, the API, and even accessibility too. Example, a multi-select, see https://jsfiddle.net/z0Ltxh47/1/ : Usability is bad because I can't select multiple non-consecutive items by using just my mouse. It's very narrow by default, and doesn't allow me to resize. API: Your typical HTMLInputElement.value doesn't give me all the selected values. I need to map the .selectedValues…

To be fair, multi selection is a disaster on any platform. It is a hard concept that isn't completely solved by any of the standard GUI widgets.

A separate multi-select control is just a bad idea from 1990s; it should be disused and forgotten. The proper way is a list of checkboxes. Checkboxes are easy to recognize, easy to style, and easy to navigate and operate.

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#130

Post by runarberg »

egeozcan wrote: post #48
cookiengineer wrote: post #43

Earlier quoted context omitted.

How about some checkboxes and labels with the for attribute then?

Which becomes a nightmare to look at with no styling: https://jsfiddle.net/wdqjyvsu/ and then it gets complicated very quickly: https://jsfiddle.net/wdqjyvsu/1/ You also have still undiscovered problems: How to let people filter the options if you have lots of them (and don't say ctrl+f because it doesn't restrict the search within the element)? What about lazy-loading if you have lots and lots and lots of them? Usab…

You can hide multiple checkboxes in a if it gets to messy: https://jsfiddle.net/3mohuw7e/

is pretty easy to style and shouldn’t be to complicated to add extra features like filter fields by search etc.

Post reply on HN