A presentation at Chrome Developer Summit in November 2019 in San Francisco, CA, USA by Greg Whitworth
HTML isn’t done Nicole Sullivan PM for Google Chrome @stubbornella Greg Whitworth PM for Microsoft Edge @gregwhitworth
Edge & Chrome form control collaboration 1. Accessibility, Touch, & Visual Refresh 2. Stylability 3. Extending functionality 4. New components! Buh-bye 1990s gradients!
Visual Refresh & Accessibility upgrade A starting point for deeper changes!
The <progress> element was already fairly modern
The <meter> before & after
You are going to want to check these out. Enable the Web Platform Controls update UI flag. about://flags
The <range> also needed some love.
<checkbox> and <radio> are the workhorses of the web
Date
Time
Using inclusive design from the start
Color picker & keyboard navigation
High contrast mode on Windows
@media (forced-colors: active)
forced-color-adjust: auto | none
36 a11y commits to improve form controls 🎉
Edge & Chrome form control collaboration 1. Accessibility, Touch, & Visual Refresh 2. Stylability 3. Extending functionality 4. New components!
We want to build things web developers will use Currently form elements are not used as much as they could be. We wanted to understand why?
“Right now it is often easier to build form components from scratch…than it is to modify the style of the form controls themselves” – Web Developer
Why not just create form elements from scratch? • Duplication of effort • Effort it takes to build your own • Cross browser compat - even if you make it perfect on one browser, it’ll be weird on another. • Accessibility often suffers
Why not just create form elements from scratch? • Duplication of effort • Effort it takes to build your own • Cross browser compat - even if you make it perfect on one browser, it’ll be weird on another. • Accessibility often suffers
Why not just create form elements from scratch? • Duplication of effort • Effort it takes to build your own • Cross browser compat - even if you make it perfect on one browser, it’ll be weird on another. • Accessibility often suffers
We wanted to understand why form elements are recreated?
Top 10 form controls re-created by web developers
Why do web developers recreate form controls?
We heard you. This is why we’ll focus on stylabilty next select checkbox radio
Edge & Chrome form control collaboration 1. Accessibility, Touch, & Visual Refresh 2. Stylability 3. Extending functionality 4. New components!
Normalized values are painful for frameworks. We got a bunch of codepens from the React DOM team 3. != 3
Which form elements give you the most frustration?
You kinda hate the select element
And the date picker
And file
And the checkbox and radio elements
What really gets your goat about select? Styling Behavior & Extensibility Content Adjustments
Next generation <select>
Edge & Chrome form control collaboration 1. Accessibility, Touch, & Visual Refresh 2. Stylability 3. Extending functionality 4. New components!
Most requested native controls: <virtual-list> & <toggle-switch>
Virtual scrollers The most requested new component
Pete Hunt reminds us to build a virtual list… every year… since 2015
Virtual Scrolling Primitive: Display Locking Available in Origin Trial ● Batched rendering updates ● Find-in-page works ● Better a11y
Virtual Scrolling Primitive: Display Locking Available in Origin Trial • Batched rendering updates • Find-in-page works • Better a11y
Toggle Switch Allows developers to semantically express the off/on state.
Toggle Switch Updating Chromium’s default controls • We started with a ton of research into how other design systems handle toggle behavior. • We coded a prototype. Please try it! • And we used it to drive out new low level APIs and better a11y.
Three low level APIs & improvements • Form-associated custom elements • Custom element a11y • Focusable custom elements
Edge & Chrome form control collaboration 1. Accessibility, Touch, & Visual Refresh 2. Stylability 3. Extending functionality 4. New components!
Please help, we’d love for you to get involved.
Please help, we’d love for you to get involved.
URL #HTMLisNotDone
wicg.io
open-ui.org
https://bugs.chromium.org
Thank you! Nicole Sullivan Greg Whitworth @stubbornella @gregwhitworth
Controls Refresh Updating Chromium’s default controls • Modern Appearance • Touch friendly • Accessible
Collaborating
Opportunities found
Is this worth it? Is improving the controls & components story worth the investment? • • • • Appearance Frequency of bringing/building your own Effort it takes to build your own Cross browser
New components. Huzzah! 🎁 Proprietary + Confidential
Current Radio Checkbox Meter Range Upcoming
TRY OUT display-lock and std-switch CTA
We want your help
Proprietary + Confidential Fast Slow
While building virtual scrolling we realized we had a missing platform primitive: Display locking Folks couldn’t use find in page with regular virtual scrollers because the content isn’t really in the DOM.
Off-screen content can be locked - Locked DOM can be manipulated by JavaScript and the browser knows it doesn’t have to render it this frame. - More content in the DOM means user agent features like find in page can work.
Off-screen content can be locked • Motivate Locked DOM can be manipulated by JavaScript and the browser knows it doesn’t have to render it this frame. • More content in the DOM means user agent features like find in page can work.
Toggle Switch Updating Chromium’s default controls • We started with a ton of research into how other design systems handle toggle behavior. • We coded a prototype. Please try it! • And we used it to drive out new low level APIs and better a11y.
Three low level APIs • Form-associated custom elements • Custom element a11y • Focusable custom elements
Custom element a11y • Motivate adding this API
Custom element a11y • Motivate adding this API
Focusable custom elements • Motivate adding this API
