Approach to Standardizing UI Controls by Open UI

Yumemi x LayerX x Cybozu Joint Frontend Conference Hokkaido 2024 After Talk @ Tokyo

saku / @sakupi01

Towards the Evolution of Browser-Native UI:

Approach to Standardizing UI Controls by Open UI

Available in JP

1. What is Open UI?

Overview of Open UI

• One of the W3C Community Groups
• Works on systematizing common UI patterns to propose and standardize universal UI components and controls
• Decides the appropriate combination of HTML, CSS, JS, and Web APIs to create custom UIs
  • However, they state they do not decide the standards themselves
• Creates recommendations for standard-setting groups (e.g., WHATWG, CSSWG, TC39)
• Implementation of the content based on the formulated specifications in various browsers

https://open-ui.org/

Background of Open UI

• WHATWG started working on systematizing the most common patterns seen on many websites in HTML itself (Web Forms 2.0, around 2004)
  • This allowed web developers to implement rich forms using just HTML
• After the last major revision, modern web applications began to offer more complex interfaces
• Let's modernize HTML again! Standardize the technologies needed to create common web UI patterns!

What Open UI Does

• Examines and proposes specifications for standard web components and controls
• Collaborates with standardization bodies like WHATWG and W3C to add specifications to HTML, ARIA, CSS, etc.
• Works with browser engine teams like Chromium, WebKit, and Gecko to implement features based on the specifications

Stages in Open UI

The proposal formulation process is divided into 5 stages

2. How Open UI have done so far

Examples of Realized Proposals

e.g., Popover API (Baseline 2024 Newly available!)

• By adding the popover attribute to any element, you can declaratively create a Popover
  • Display any element in the TopLayer and close it with Light Dismiss
  • Opening and closing can be achieved not only with JS but also with popovertarget

<button popovertarget="mypopover">Toggle Popover</button>
<div id="mypopover" popover>This is the popover content</div>

Popover API (Explainer)

Examples of Proposals Being Realized

e.g., Customizable Select Element: <select> (Stage 3)

• Planning to provide a <select> element that can be flexibly customized
• Evolution of the Customizable Select Element
  • <selectmenu> → <selectlist> → <select>, <listbox> → <datalist> (Update selectlist explainer to stylable select #976, Customizable <select> element #9799)
  • Various issues related to the implementation of <selectlist>, and after discussions with WHATWG, adopted the improvement of the existing <select>(resolved - selectlist feedback from apple #970)
• Available in Chrome 129+ (Canary) by enabling the Experimental Web Platform features flag (demo by @una)

Customizable Select Element (Explainer)

Examples of Unrealized Proposals

e.g., <skeleton> element/skeleton ARIA role

• Proposals existed for the Web componentization of the Skeleton element and the ARIA role for Skeleton, but they were shelved
  • Skeleton is a UX pattern (not a UI pattern)
  • Applicable to various UI elements, making it difficult to define as a generalized UI
  • → How about creating an ARIA role to represent skeleton? (Skeleton Aria Role #169)
    • skeleton role: Indicates that the content is a placeholder and another content is expected to be displayed
  • Existing ARIA attributes (aria-busy, aria-live, aria-hidden) are sufficient, and adding a new ARIA role would impose a learning burden on developers and users ([OPEN UI] Skeleton aria role proposal #1317)

marked as stale - [Skeleton] Add component proposal #139

3. Wrap-up

• Open UI examines and proposes specifications for standard web components
• Popover API and Customizable Select Element are new controls realized (or being realized) through Open UI proposals!
• Many proposals are useful for building our own design systems!
• There are still many proposals that will shape the future of web UI, so stay tuned

Thank you for listening!