[MUSIC PLAYING]
GREG WHITWORTH: How's
everybody doing?
[CHEERING]
Wow, that's lackluster.
NICOLE SULLIVAN: Thanks
for being here today.
I'm Nicole Sullivan.
I'm a PM for Google Chrome.
GREG WHITWORTH: And
I'm Greg Whitworth.
I'm a PM for Microsoft Edge,
and my Twitter handle's
@GregWhitworth.
NICOLE SULLIVAN: Yeah,
and I'm @stubbornella.
That is, believe it or
not, actually the best way
to get hold of me.
OK, so let's start off by
going back in time a bit.
Do you remember when we were
going to get new HTML elements?
Who remembers that?
I was super excited.
After years of building
the same tab set again
and again and again,
I thought, huzzah!
This is it.
Surely they'll see that this
is in every design system ever,
and they'll build
it into the browser
Then imagine my disappointment
when we actually
got a side article and section.
They're totally fine.
They just didn't
solve the problems
that I was trying to solve.
So since then, I've held
onto the core belief
that HTML shouldn't be finished.
Design systems have been
innovating and lighting
the path forward for HTML for
a long time, and I think now,
browsers can pave
those cow paths.
GREG WHITWORTH: And at
Microsoft, we completely agree.
On the move from Edge
HTML over to Chromium,
we did a full inventory of
some of the goodness we thought
was in HTML and wanted to
bring over to Chromium.
We reached out to our good
friends over at Google,
and they completely
agreed, because one
of the things we wanted to look
into that we'll be covering
is form controls.
And starting up, we were
with accessibility, touch,
and ultimately a
fresh coat of paint,
because when we were
looking at them,
they were pretty
dated, as you'll see.
We'll also be
covering stylability,
extending functionality,
and then ultimately,
as Nicole was saying,
new components.
NICOLE SULLIVAN: Yeah.
And bye-bye 1990s gradients.
GREG WHITWORTH:
So as I noted, we
wanted to have the first
run on accessibility.
And as we were
going through them,
we also noted there was a
huge need for look and feel.
So we decided to go ahead
and tackle both of them
and update the look and
feel, and they're planned
for both Mac and Windows.
NICOLE SULLIVAN: So
we specifically wanted
the form elements to look
like part of a matched set.
We were going for beautiful,
webby, and neutral.
We hope that every design system
would see a bit of themselves
in the new designs
and easily imagine
how they might be adapted
for their own branding.
The progress bar was not so bad.
It's a little further along than
the others and a little newer.
And so we took it
as a starting point
to move all of the other form
controls into the future.
So if the progress bar
had set the standard,
the meter needed an upgrade.
Super ugly.
We're still working out
the last little tweaks
to get the strokes
exactly right,
but you can check it out on
Canary and give us feedback.
This is the before, and on the
right-hand side is the after.
You'll need to enable the Web
Platform Controls updated UI
flag to see the latest
in about://flags.
GREG WHITWORTH: And then we
have this lovely Windows 95
draggable element here in the
range, which is definitely
in the need of an upgrade.
So we gave it a
more modern splash
coat of paints to flatten
it up a little bit.
So hopefully it looks a
lot better to you as well.
NICOLE SULLIVAN:
And for Chrome, we
decided to experiment
with a little bit
of a different visual detail.
We were showing the selected
portion of the range in color.
We'd love to know
what you think.
This is something we're
still playing with and trying
to figure out what works well.
GREG WHITWORTH: And
check box and radio--
they're small, but they're also
really, really impactful form
controls.
They're on almost
all of our forms.
And while, again,
they're subtle changes,
those gradients are very,
very indicative of the year
that they came out.
And we've now flattened
and modernized them,
and hopefully they fit better
in all of your form controls
on your websites
that you're making.
NICOLE SULLIVAN: I believe that
you lit the path for us here.
Thank you.
On Chrome, again, we
decided to experiment
with color for the
selected state.
So that said, though,
we share about 99%
of the code for these elements.
And so that's going to make
the next steps that we're
talking about a lot easier.
GREG WHITWORTH: Another
important aspect,
as we started off with,
was accessibility.
And one of these
things is, it really
doesn't matter about the
input modality you're using.
You should be able to use
the control in a good way.
And touch is one
of those things.
As you all know, I've been using
the Macs over at the booth,
and I keep touching the touch
screen that isn't there.
We have the 2-in-1
Windows devices,
and so touch is very
important to us.
And so we increased the hit
test regions on-- here's date.
But the thing, the control I
think that shows this the most,
is the time element,
which as you can see here
is the current Chromium one
with those wonderful little tiny
spinners that, good
luck trying to touch
those with your fingers.
We now have the similar pop-up
that we have within date,
and you've got the
normal touch scroll,
carousel-type feel to have
a good user experience.
NICOLE SULLIVAN: I mean,
honestly, yeah, right?
Isn't that so good?
[LAUGHTER]
[APPLAUSE]
I mean, I think that those
spinners were actually
pretty hard to click
with a mouse, too.
I'd be like, oops,
no, I made it go down.
GREG WHITWORTH: Same here.
So to carry on the
accessibility notion,
I love this graphic, because
we really try to make it
so that we're inclusive
design from the start.
Our friends at Google feel
the exact same way, because
of the fact that it doesn't
matter whether you're blind,
you're driving a car, you're
only able to use one arm,
you're holding a
baby, a cup of coffee,
you're, using a mouse,
keyboard, touch, or pen.
Everyone benefits from
making your stuff inclusive.
One aspect of
great accessibility
is keyboard accessibility.
NICOLE SULLIVAN: Yeah, and the
previous Chromium color picker
didn't have keyboard access
to all parts of the control.
In particular, the color
well wasn't accessible.
GREG WHITWORTH:
And this one here
is showing the
beautiful Windows--
NICOLE SULLIVAN:
Isn't it pretty?
GREG WHITWORTH:
--color control here,
but it's also the
keyboard navigation thing.
It's actually true, also, of
the Apple-native one as well.
But we went ahead and did
all of the keyboard support
that any user would expect.
So if you're navigating
this with a keyboard,
everything works,
including the color well.
And we also have
keyboard modifier keys
that use Control or Command.
You jump 10 color
values, so that you also
get the same speed
and intuitiveness
that you would with a mouse,
rather than just having
to go every single pixel
value, which would be
really annoying and monotonous.
NICOLE SULLIVAN: And this
is the kind of thought
that Greg's team really
puts into these things,
because it would be
super annoying to have
to go color by color
by color by a keyboard.
And so being able to make
that 10-pixel jump is great.
GREG WHITWORTH: So Edge also
had high-contrast support.
It's something we value.
And one misnomer, also, is,
it's called high-contrast,
but it's actually a color
theme a user can set,
because people actually
do set low contrasts
as well in different scenarios.
But here, we're
showing that these
now in Chromium work
by default. Here's
a few of them, working
in high-contrast mode.
And we went ahead and
brought this into Chromium.
And then also, to give you
all better control of this,
because at times you
all have better context,
we went about doing
the standards work.
And this is now behind
a flag in any Chromium
browser, forced-colors.
And that lets you know-- this
is similar to the MS prefix one
we had in Edge,
but this lets you
know when somebody is in this
state, whether it's active
or not.
Because ultimately, you do
have more context than we do.
And while the defaults are
great in probably 99.9%
of the scenarios that
we've seen across the web,
you also have more context.
So you can go ahead
and turn this off
and provide better scenarios.
And the old-- does everybody
remember system colors from way
back in the day?
CSS system colors, like Windows?
OK, cool.
A few of us.
So those are actually
being brought back,
and some are being added in,
because those system colors are
now being adjusted so
that you can use them
in here to provide,
again, a better
experience for your users in
the context that you have.
But also, understand they
work great out of the box.
NICOLE SULLIVAN: I would
like to just take a moment
and acknowledge that the
Edge engineers have landed
36 commits in the
core of Chromium
that improves the accessibility
of the form controls.
[APPLAUSE]
GREG WHITWORTH: Hats off to
the team back in Redmond.
NICOLE SULLIVAN: This is going
to make a real difference
to users every day and make
it easier for web developers
to build things that
everybody can use.
GREG WHITWORTH: So
the next phase--
I'm sure none of you have ever
had any issues with styling
form controls-- is stylability.
And so we wanted
to dig into this,
because as we were
working on this,
we noticed the users
could be [INAUDIBLE],,
and we kind of want
to understand that.
So we wanted to
look at stylability,
and we wanted to
potentially make it
so you can style the dumb
things without hacks.
So ultimately, this is
what it comes down to--
and hopefully you heard
in Yoav and Chris's talk--
that we want to
build stuff you use.
We don't spend all these
days doing this stuff for you
all to throw it all away.
And currently, form elements
are not used nearly as much
as they could be.
And so we wanted
to understand why,
so we started doing customer
interviews and research.
I love this quote
from a web developer.
NICOLE SULLIVAN: Love
and slash hate, right?
It's sort of horrible.
GREG WHITWORTH: For sure.
Now, it's also noted,
when we do prioritization,
it's important to
look for emotion.
And I actually got
a lot of comments
that I can't put on the screen
that show how terrible--
NICOLE SULLIVAN: Turns out
y'all hate form elements.
GREG WHITWORTH: Just a tad.
But anyways, it says, right
now it is often easier
to build form
controls from scratch
than it is to modify the style
of the controls themselves,
which ultimately
is just terrible.
NICOLE SULLIVAN: So why not
just create form elements
from scratch?
Do you know how many
times I've built
that tab set in my career?
I couldn't even count.
That work was duplicated
over and over and over again
in different companies.
And even within a
company, there would
be separate design systems.
GREG WHITWORTH:
Too many to count.
NICOLE SULLIVAN: How many
did you find at Microsoft?
GREG WHITWORTH: So far, seven.
NICOLE SULLIVAN: Seven.
[LAUGHTER]
GREG WHITWORTH: So far.
NICOLE SULLIVAN: And that's
just internal to Microsoft.
So even when you manage to get
a tab set or form control that
works really well, they often
have an uncanny valley feel,
where they match the operating
system in the browser
that you're most
comfortable with
and feel just a little
bit off everywhere else.
There's also something that
happens around accessibility,
where you try, and
you do your best,
and you add the ARIA roles,
but will every developer
that comes after remember
to add that ARIA role?
GREG WHITWORTH: So, OK.
This is audience
participation time.
So we're going to just do a
quick survey to kind of just
get a feel for the room.
So everybody put a
hand up in the air.
Oh, come on.
Put a hand up in the air.
Thank you.
I was going to say.
I was like, this will
be quick if everybody
keeps their hand up.
So when I say-- basically,
it's true or false.
When I say something
that is not true for you
in your day-to-day web
projects, put your hand down
and keep it down.
So you test your
website with a mouse.
OK, that's good.
You test in more
than one browser.
All right, cool.
I'm glad hands stayed
up for that one.
You test on more than
one operating system.
OK, that's kind
of what I figured.
I appreciate the honesty.
Truly, I appreciate the honesty.
You test on more than
one operating system
and in more than one browser
on those different operating
systems.
OK, I appreciate
the honesty still.
OK, so you test touch.
You do--
NICOLE SULLIVAN: That was a lot.
That was a lot.
I wasn't expecting touch to
be the one that got everybody.
GREG WHITWORTH: This
is why this is great.
Sorry for everybody that
still has your hands up
that we're talking.
Your arms are getting tired.
You test touch.
We already did that one.
You do accessibility testing.
OK.
You do accessibility
testing in Chrome.
Accessibility
testing in Firefox.
Accessibility testing in Safari.
Accessibility testing of
Edge, Samsung Internet?
[LAUGHTER]
NICOLE SULLIVAN: There was
that one person out there who
had their hand up until that.
GREG WHITWORTH: I still have
six more questions, though.
[LAUGHTER]
So I'll just rattle
them through,
but you kind of get the point.
But did you test
Windows high-contrast?
Did you test keyboard?
Did you test assistive
technologies?
And then I even get into the
specific ATs that we all--
NICOLE SULLIVAN: Oh,
say them, at least.
GREG WHITWORTH: OK, so
voiceover, NVDA, JAWS,
narrator.
NICOLE SULLIVAN:
So by [INAUDIBLE]..
GREG WHITWORTH: The testing
matrix is massive here.
And then that's
kind of the point,
ultimately, I'm trying
to get across is,
I actually don't fault
you, all of you that
put your hands down.
Personally, I feel
like this is our fault.
We enabled this bad thing.
Because you want to
style a slight element,
you go rebuild it all, and then
understandably can't-- you have
engineering realities,
just as we do,
and you can't put in
the time that we do.
And then in addition to that,
I listed all those ATs--
we have great
relationships with them.
So when we find
issues in those ATs,
or if they find issues
with us, we talk about it,
and we fix it.
And unfortunately, that's just
not something that scales.
So ultimately, we wanted
to try to fix this problem.
NICOLE SULLIVAN: So we
wanted to understand
why form elements are recreated
as sort of a starting point
for understanding what
we could do differently.
The top 10 form controls that
are recreated by web developers
are here on the screen.
The top one is Select.
GREG WHITWORTH: Shocker!
NICOLE SULLIVAN: Yeah, I think
we all saw that one coming.
Check box, date, radio,
and file, and then
a few others that
are used as well.
So then obviously, we
asked the question,
why did developers
recreate the form controls?
And you really couldn't
have been more clear.
36.6% of you are
recreating form controls
just because you want
to change the style.
And I think we both see
that as a huge opportunity
to give you something
that you need.
Another 31.6% are doing it in
order to add functionality.
And then 27.3% percent
are doing it to overcome
browser inconsistencies.
So we feel like there's a
lot we can help with there.
GREG WHITWORTH: So we heard you.
Honestly, I think it's something
we've all kind of known.
But ultimately, styling a
form control sucks on the web.
So we're going to start
focusing and digging
into the select first,
then check box, radio,
and those other top controls
that we referenced earlier.
NICOLE SULLIVAN: Can you imagine
being able to style the select?
How good would that be?
That would be amazing.
GREG WHITWORTH:
I can imagine it.
NICOLE SULLIVAN: Then we'll talk
about extending functionality
of these elements.
So normalized values are
really painful for frameworks.
We got a bunch of code pens
from the React DOM team.
It turns out that 3
dot is not equal to 3.
And so when the browser
normalizes those values,
often, something
is lost in the mix.
And so we started looking into
raw value and other solutions
for preserving the
characters typed by the user.
We want controls to also
work for frameworks.
I don't think we have
the end solution there,
but we're looking at it.
We also asked you which
form elements give you
the most frustration.
And you really couldn't
have been more clear.
You kind of hate
the select element.
You hate it!
42.7% are the most frustrated
with the select control.
Let's just see-- how many
people here would put select
at the top of their list?
Yep.
GREG WHITWORTH: It feels like,
actually, a little bit higher
than 40%.
NICOLE SULLIVAN: Yeah, it does.
Thank you.
GREG WHITWORTH:
We'll update that.
NICOLE SULLIVAN: And
the date picker--
you don't like the
date picker, either.
That's 17.3% of folks.
And file is another
popular one, at 9.3%.
And finally, check box
and radio elements.
GREG WHITWORTH: So
since the select
was by far the winner
of being the worst,
we decided to dig into that.
We did another survey that had
a bunch of different questions
that started digging into
use cases and everything
about the select.
NICOLE SULLIVAN: Greg's team
will do surveys about select.
Just select.
It's kind of amazing.
GREG WHITWORTH: It's very
useful, because ultimately, we
ended up having a bunch
of questions that ended up
in these various buckets.
And so overwhelmingly, styling
is the largest pain point
that we should go try to
tackle first, then behavior
and extensibility and
content adjustments.
One aspect I would like
to call out-- again,
why we had the individual
questions, because earlier
we were talking about, oh,
do you want to extend them?
And a lot of people said that.
But when we were
digging into the select,
because each control
has a different meaning
of extensibility, the
select-- the number one,
if you take out just the
top issue that people
had in this bucket,
which is being
able to provide a good user
experience while searching
the select, if you take that
out, this is nonexistent.
It doesn't even show
up on the chart.
So to me, that is the thing
that we would go pick out
of that bucket to go solve it.
That isn't trying to
solve an entire component
model because of that.
And then content
adjustments-- who
here has wanted to put an
icon in an option element?
NICOLE SULLIVAN: Me.
GREG WHITWORTH: Good gracious!
Come on.
You should be able to do that.
So hopefully, as we
dig in to the select,
we'll focus first
on styling and then
be able to insert an icon
into an option element.
More than that, but I'm just
saying non-text-based content.
So that's what we'll be talking
with the next generation
of select.
I'm super stoked to get
started working on it,
and we'll be telling you
how we'll be investigating
that in a minute.
NICOLE SULLIVAN:
And hopefully be
able to put arbitrary
HTML in a select element.
GREG WHITWORTH: Exactly.
That's going to be awesome.
NICOLE SULLIVAN: That
would be awesome.
So we've talked about the first
three phases of this project.
And now we also heard that you
would like some new components.
And so we'd like
to talk about that.
The most requested
native controls are
virtual-list and toggle-switch.
Chrome is working
on both of those.
GREG WHITWORTH: Woo-hoo!
NICOLE SULLIVAN: Yay.
So virtual scroller is the
most requested new component.
In fact, Pete Hunt reminds
us every year since 2015--
[LAUGHTER]
--that he still doesn't
have a UI table view.
Thank you, Pete.
Please keep asking.
It looks like he forgot in 2018.
GREG WHITWORTH: I think it's
because he was just so mad.
He was like, I'm done.
NICOLE SULLIVAN: Maybe.
So he rightly says
that UI table view
is the foundation for
all apps with a feed I'd
count e-commerce.
If you have a lot
of products, that's
basically the same thing.
Even something with long amounts
of content, like Wikipedia.
So the need is clearly there.
But I want to be honest.
This is a really hard problem
to do well in the browser.
So we're creating prototypes,
trying things out,
and trying to find the
best possible solution.
One of our virtual
scroller prototypes
is showing promise for scroll
performance improvements
using a new platform primitive
called display locking.
Display locking is available
in origin trial right now,
and it unlocks a lot
of different features.
It allows you to batch
rendering updates
to avoid paying the
performance costs for--
yeah, it's really good
for large amounts of DOM.
It also means that
locked sub-trees are not
rendered immediately,
which means you
can keep more stuff in the DOM.
That's great, because it
becomes searchable both by Find
in Page as well as by
assistive technologies.
So let's be clear.
This isn't UI table view.
I'm sorry, Pete.
I hope we'll get there.
But it is definitely a
step in that direction.
It's IN origin trial right now.
Please, we'd love your feedback.
We've also been working on
the toggle switch, which
allows developers to
semantically express the on/off
state.
We started out with
a ton of research
into how other design systems
handle toggle behavior.
We coded a prototype-- you
can try it, it's on GitHub--
and we used it to drive out
new low-level APIs and better
accessibility.
So three low-level APIs and
improvements in particular
are form-associated custom
elements, custom element
accessibility, and
focusable custom elements.
GREG WHITWORTH: So we've covered
all these wonderful aspects.
Hopefully, you've
enjoyed all of them.
The accessibility touch and
the visual refresh of those
wonderful '95-era controls.
The stylability, yes,
let's be able to style
a select and a radio
element, for goodness sakes.
Extending the functionality,
and the new components
that Nicole just referenced.
NICOLE SULLIVAN: And now we'd
like to ask for your help.
GREG WHITWORTH: Please.
NICOLE SULLIVAN: We
want to be honest.
It is really hard to standardize
high-level components.
There are a lot of moving parts.
It's frankly easier
to get agreement
on something like
display locking
than it is to get
agreement on something
like a virtual scroller or
a higher-level component.
So what we need is for
you to get involved,
for you to let us know if
this is something you want
and how much you
want it, to let us
know which components you
think would be missing
and that you would use
in your design systems.
GREG WHITWORTH:
And so to that end,
we've been meeting,
as I noted earlier,
with many different
design systems frameworks
across the industry, doing
customer interviews with them,
to better clarify.
Some of the survey questions we
had get into the nitty gritty,
get into what we can offer
them that they would use
in their design systems across
some of the largest companies
in web properties on the web.
If you happen to work on a
design system or framework,
please get in touch with us.
We're more than happy to chat
NICOLE SULLIVAN:
Ionic, in particular,
has been really helpful in
identifying gaps and suggesting
solutions.
GREG WHITWORTH: Huge
shout out to them.
NICOLE SULLIVAN:
Yes, definitely.
GREG WHITWORTH: So I'm
very excited about this,
because as she noted, it's
very hard to standardize
high-level components
and controls.
But in order to do that, we
need to bring, as we noted,
the design system people that
work on controls and components
every single day together with
the platform engineers that
can hopefully make those become
a reality, built in natively.
And so we started-- it's
in its infancy in the YCG,
as you heard Yoav and Chris
talking about earlier.
It's something called Open UI.
And basically, a bunch of
Microsoft-designed system teams
are coming together to help
solve the same problem.
Do you want to jump
to the next slide?
Perfect.
Thank you.
NICOLE SULLIVAN: Sorry.
GREG WHITWORTH: That's OK.
So open-ui.org-- it's
where we're beginning.
We're in Silicon Valley.
If you want to get
on the ground floor,
this is going to be a big deal.
So you can get in
here, help us out.
Go add your own design system,
your own design component.
We're trying to really use
what the industry has already
been using-- the
design systems, I
mean you worked
on them for years.
We've been doing this
forever, and so we're
trying to actually just take
the cow paths you already
have created and
try to go pave them.
So go there, start
a GitHub issue.
We'll be keeping you
posted on research
and getting your feedback,
as well as platform APIs
we want your feedback on,
such as display locking.
NICOLE SULLIVAN:
Finally, submit bugs.
We want these form controls
to meet your needs.
Whether you're a designer,
framework author,
or maintain a
design system, we'd
love to hear about anywhere
that there are gaps.
And I know, I remember
being intimidated when I
submitted my first browser bug.
And I was like,
oh, no, is it going
to turn out to
actually not be a bug,
and I just didn't understand?
But I do want to say that
both PMs and engineers really
welcome your input.
It's a huge signal in
deciding what we work on
and what gets attention.
So if you see bugs
when we release,
in a little while, these
components, let us know,
and we'd love to
hear about that.
GREG WHITWORTH: Also, star
the ones if you find them.
NICOLE SULLIVAN: Yeah star
the ones that you really want.
GREG WHITWORTH: That's signal.
NICOLE SULLIVAN:
That's super helpful.
Again, @stubbornella on Twitter.
Please get in touch.
GREG WHITWORTH:
And Greg Whitworth.
Thank you so much.
NICOLE SULLIVAN: Bye.
[APPLAUSE]
[MUSIC PLAYING]
