Fix accessibility of the BoxControl component

[afercia]

Description

The control to set paddings, margins, etc. may be in a state where the input labels are entirely unclear.

For example, when the Group block Padding setting is set to show the top/bottom and left/right padding values, both the sliders are labeled 'Padding' and nothing else. As such, it's impossible for screen reader users to understand what padding these controls are about. Screenshot:

The target size of some controls could be made larger for better usability, accessibility and consistency. When switching these controls to the alternate UI to set a custom value, the 'Select unit' control and text are too small.

• The target size of this control should be larger. There's now a new pattern in the editor where similar controls visually placed inside inputs are 40 by 40 pixels e.g. the Copy button in the PostURL.
• The visible text of the selected unit is too small and could be made a little larger.

Screenshot:

Visually, these controls are only distinguished by the means of a small icon that indicates the 'sides' the setting is about. Screenshot:

These icons are small and the 'active side' is only distinguished by a different color. That's barely visible for low vision users. At the very least, tehre should be a visible lable to clarify what padding/margin size the control is about.

Step-by-step reproduction instructions

• Select a group block
• Navigate to the Inspector panel > styles tab > Padding.
• Set the Padding control to show 'Horizontal & vertical' padding settings.
• Inspect the two sliders and observe they're both labeled 'Padding'.
• Observe the controls are visually distinguished only by small icons with different colors for the sides.
• Observe there are no visible labels or other text to distinguish the controls.
• Switch one of the controls to the alternate UI to set a custom value.
• Observe the select toggle button to change unit measure is too small and inconsistent with similar buttons visually placed inside inputs.
• Observe the unit text is too small.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• [X] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [X] Yes

[Rishit30G]

Hey @afercia!

These points are quite valid and even I share the same opinion for low vision users 🙇 I was successfully able to replicate the issue and make some changes to the existing controls section so that it fulfills most of the requested needs as per the issue

However I have few points to share:

These icons are small and the 'active side' is only distinguished by a different color

If we increase the size of the icons, this issue automatically gets solved as we can clearly see the active color of the icons

there should be a visible label to clarify what padding/margin size the control is about.

We can definitely add a label like 'Horizontal' and 'Vertical' close to the padding icons but then it would look a little cluttered in my opinion, because adding a label in a limited space would make it small and we would again end up not catering to the low vision users (again just an opinion) 😅

Awaiting your response on the same, so that I can raise a PR accordingly to resolve this 👍 Thanks!

Sharing the screenshots of the changes made to target size of controller, font-size, icons:

Before:

After:

[afercia]

Sorry for the very late reply.

If we increase the size of the icons, this issue automatically gets solved as we can clearly see the active color of the icons

I'm not sure the issue would be solved by increasing the sice icons. Color alone isn't sufficient and some users may not be able to distinguish or notice the difference between the default and active color.

We can definitely add a label like 'Horizontal' and 'Vertical' close to the padding icons but then it would look a little cluttered

The 'clutter' argument is something that designers raise up often. I understand it and I do agree unnecessary clutter is a problem. However, it is important to understand that icon-only controls aren't OK. Icons may add a value when accompanied by visible text. But, providing important information via only icons is an usability and accessibility problem. Many users struggle with icons and that applies also to users with no particular disabilities.