A form control that developers frequently have to rewrite from scratch is the select because there are limitations to how much the built browser can be styled.

For example, the select dropdown can't contain images.

But rewriting this control can be a lot of extra work, and sometimes the implementations won't be keyboard accessible or won't have the correct ARIA annotations.

Open UI is working on standardizing the structure and the behavior of the select control such that authors can fully customize its UI without reimplementing all of its functionality.

The goal is to eventually build this functionality into a new HTML element.

For example, authors could use this to create a customized select like this with images in the dropdown, without writing a single line of JS.

The control is fully keyboard accessible and works with accessibility tools, just like the browsers built-in form controls today.

Open UI is also exploring a scheme called CSS Anchor Positioning that will allow authors to pin or anchor list boxes or other top of a UI to other elements like the button of a select menu.

This will give authors direct control over a viewport-aware positioning such as a list box that opens either above or below a button, depending on whether space is available.

For a number of reasons, it can be difficult to create pop-up style UI elements, such as tool tips, teaching UI, and pop-up menus.

It's tough to make sure the pop-up sits above everything else on the page.

And also extensive JavaScript is often required to handle positioning, opening and closing and managing nested pop-ups.

Open UI is working on a standard for a native pop-up element which takes care of all of these tricky details.

Authors can declaratively create and an invoke a pop-up with top layer and light dismiss behavior built right in without requiring any JavaScript.

This new element will power the new select menu element and we'll make use of the new proposal to allow anchored positioning.

Hi, I'm Dave Rupert.

And today I'm talking about tabs.

Tabs are an extremely common UI element found across the web in operating systems for the last 20, 30 or maybe even 40 years.

In our survey of design systems, tabs ranks number four after button and checkbox as one of the most common UI elements in design systems.

Making a tab solution is difficult, but making an accessible tab solution is even more so.

And we're putting a lot of burden on developers to keep reinventing the wheel in this regard.

And there's some unique challenges that we've investigated through things like internationalization and responsive web design, add some unique challenges to building a robust tab solution that fits all these use cases we've identified and outlined.

As well, there's a lot of different markup patterns, anywhere from five elements to three elements, to two elements, to one element - there's a lot of different markups styles and we've settled on one approach we'd like to kind of look into.

We're calling it spicy-sections and it takes a normal-or-ish content flow, heading content sort of document flow and converts it into tabs sections.

But that's not all because, and this is in a web component, but we also allow the ability to change the affordance as necessary based on whatever responsive parameters you can configure it with.

So we can see a collapse pattern, maybe on mobile viewports, a regular content flow on a tablet-issued viewport, and maybe full tabs on a desktop viewport.

This is something we think is useful and meets a lot of the use cases that we're looking into.

Currently, we're testing this web component, blogging about it, using it in projects, just to see if it meets our needs as developers, but we're also working inclusively with the Texas School for the Blind to get feedback from users on non-sighted compound disability users who might have some valuable insight into whether or not this new edition or this new web component or new addition to the web platform is meeting their needs.

We'd love to get anyone's feedback.

Please holler at us, thank you.