-
Notifications
You must be signed in to change notification settings - Fork 4.7k
Description
Hi there! Did we ever consider adding subtle styles to our components? In particular, I'm thinking about dropdowns and input fields. The default styling works well when the interface's primary purpose is to edit data.
However, there are situations where a subtler style could be useful. The primary use case is inline editing in a Data View table or a large form where the user's primary goal is to review the information and edit individual fields rather than whole sections.
A real-world use cases for subtler styles include the product variations list in WooCommerce or a field mapping table in a WordPress plugin I'm working on. Users who interact with these elements are primarily interested in reviewing the information. Displaying it in the editable state adds visual weight that may drive them away from the page.
Components using the subtle style could act as interactive elements in a readOnly mode, with a highlight shown on hover. When clicked, the elements would transform into editable fields, like inputs and dropdowns.
subtle.mov
There are existing implementations of such components in the Atlassian Design System, Greenhouse, and other design systems that require a high degree of accessibility.
Here's an example from Atlassian's design system:
atlassianexample.mov
Is there a way to introduce something similar to the new wp-admin controls? If so, what needs to be done to ensure accessibility?
