HTML isn’t done

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

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.

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

Focusable custom elements • Motivate adding this API