search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.54k stars 4.22k forks source link

Data Views: Add subtle styles to interface components #66486

Open jarekmorawski opened 1 month ago

jarekmorawski commented 1 month ago

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.

Image

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.

https://github.com/user-attachments/assets/262ca454-7e00-408e-8de4-afb9d2af590d

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:

https://github.com/user-attachments/assets/5a4af73b-6791-46a4-a829-e3ce14163fdc

Is there a way to introduce something similar to the new wp-admin controls? If so, what needs to be done to ensure accessibility?

joedolson commented 1 week ago

From an accessibility perspective, I'm not particularly in favor of blurring the distinction between reading data and editing data. If a field is editable, it should be obvious that it's editable. I'd argue that if you really believe that a user doesn't want to edit a field in a particular context, then don't make it editable.

The problem with this for accessibility is kind of fundamental: how are you going to convey the information that this field is editable? For screen reader users it's pretty trivial: this is just styling, and they will probably be largely unaware that anything is different.

However, for sighted users, this could be very disconcerting. I don't see any obvious way this could pass WCAG 1.4.11, which specifically requires that UI components have a 3:1 contrast with adjacent colors.