4 ms·

A better HTML input experience (custom elements and the AOM) (2017)

20 points by BostonFern 2y ago

personality1 2y ago
Lion web components is a good starting point for anyone who's interested in building a UI framework that comes with a lot of these accessibility features built-in. https://lion-web.netlify.app/ https://lion-web.netlify.app/
zazaulola 2y ago
For webmasters removing `outline` on `:focus` elements, a special cauldron in hell is prepared.
1oooqooq 2y ago
FE engineering is about making everything look like a printed pamphlet. showing native elements is fine and safer. and browser should just plug the backdoors they found over the years to style them, since they are all technically click jacking attacks. and all FEv will hate this comment because they don't even know what's a click jacking attack.
- shadowgovt 2y ago
  Unfortunately, this approach leaves out the human element. If you don't give companies the tools to style their frontends like a printed pamphlet, they will seek out other solutions. Remember that many of these features were added to remove the need to use Flash for UIs. Don't assume HTML is so embedded a technology that if we were to roll it back to the utility of HTML 1.0 for style, people wouldn't jump ship to an alternate stack (mobile apps, for instance).
esprehn 2y ago
This article is from a long time ago and the spec changed substantially. It's now all done with properties on ElementInternals: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals https://developer.mozilla.org/en-US/docs/Web/API/ElementInte... They also decided not to ship AccessibleNode's which is unfortunate because it removed the clearest path for canvas+wasm based UIs. https://github.com/WICG/aom/blob/gh-pages/explainer.md https://github.com/WICG/aom/blob/gh-pages/explainer.md
alextingle 2y ago
Having inputs look consistent between applications is a core plank of usability. Rolling your own custom widgets is just spending a lot of time and effort making the UI worse.

20 points by BostonFern 2y ago

Lion web components is a good starting point for anyone who's interested in building a UI framework that comes with a lot of these accessibility features built-in. https://lion-web.netlify.app/ https://lion-web.netlify.app/

zazaulola 2y ago

For webmasters removing `outline` on `:focus` elements, a special cauldron in hell is prepared.

1oooqooq 2y ago

FE engineering is about making everything look like a printed pamphlet. showing native elements is fine and safer. and browser should just plug the backdoors they found over the years to style them, since they are all technically click jacking attacks. and all FEv will hate this comment because they don't even know what's a click jacking attack.

shadowgovt 2y ago
Unfortunately, this approach leaves out the human element. If you don't give companies the tools to style their frontends like a printed pamphlet, they will seek out other solutions. Remember that many of these features were added to remove the need to use Flash for UIs. Don't assume HTML is so embedded a technology that if we were to roll it back to the utility of HTML 1.0 for style, people wouldn't jump ship to an alternate stack (mobile apps, for instance).

esprehn 2y ago

This article is from a long time ago and the spec changed substantially. It's now all done with properties on ElementInternals: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals https://developer.mozilla.org/en-US/docs/Web/API/ElementInte... They also decided not to ship AccessibleNode's which is unfortunate because it removed the clearest path for canvas+wasm based UIs. https://github.com/WICG/aom/blob/gh-pages/explainer.md https://github.com/WICG/aom/blob/gh-pages/explainer.md

alextingle 2y ago

Having inputs look consistent between applications is a core plank of usability. Rolling your own custom widgets is just spending a lot of time and effort making the UI worse.