WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 5 months ago

#48928 new enhancement

Align selects in .form-table's within admin settings with their neighbour inputs for a more uniform feel

Reported by: garrett-eclipse Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots needs-design-feedback
Focuses: ui, css Cc:

Description

Hello,

Reviewing the admin settings on several screens I feel they can be given a more uniform appearance if the selects matched the width of their neighbour .regular-text inputs. See attached screens.

Having these select a uniform width with the inputs provides a more consistent alignment.

Thoughts?
Thanks

Attachments (3)

Screen Shot 2019-12-10 at 10.40.16 AM.png (69.3 KB) - added by garrett-eclipse 7 months ago.
The shorter display name select doesn't align nicely with it's neighbour fields. On Profile.
Screen Shot 2019-12-10 at 10.40.04 AM.png (101.2 KB) - added by garrett-eclipse 7 months ago.
The Default Mail Category select not aligning with it's neighbour inputs in the Writing Settings
profile 5.2.png (65.7 KB) - added by afercia 7 months ago.

Download all attachments as: .zip

Change History (11)

@garrett-eclipse
7 months ago

The shorter display name select doesn't align nicely with it's neighbour fields. On Profile.

@garrett-eclipse
7 months ago

The Default Mail Category select not aligning with it's neighbour inputs in the Writing Settings

#2 follow-up: @afercia
7 months ago

Not related to #48420 or to the admin CSS changes introduced in 5.3. These selects have always been shorter than the input fields. See screenshot below taken on WordPress 5.2.

@afercia
7 months ago

#3 in reply to: ↑ 2 @garrett-eclipse
7 months ago

Replying to afercia:

Not related to #48420 or to the admin CSS changes introduced in 5.3. These selects have always been shorter than the input fields. See screenshot below taken on WordPress 5.2.

Agreed, this width inconsistency has been present for quite some time I believe even pre-5.0 if I recall correctly.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 months ago

#5 @afercia
6 months ago

  • Focuses administration removed
  • Keywords needs-design-feedback added

This ticket was discussed during today's accessibility bug-scrub. We're not sure this is an accessibility issue. Instead, it was pointed out that in a form where elements are stacked vertically, the smaller width of the selects help to distinguish them. There was general consensus that this appears to be more a design / UI issue though.

#6 @garrett-eclipse
6 months ago

Thanks @afercia for the review. I think I was mainly flagging for accessibility as the select inputs change width depending on their contents which leads them to present differently depending and as such won't have a standard ending point so users with limited visibility whose cursor is in the right of the screen are better off going to the far left of the select as that will always be consistent where for the inputs they can go to the right side of it as they are consistent which means further to move the mouse.

Will leave for design feedback here and see if we can improve the aesthetic here through uniform conformity.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 months ago

#8 @afercia
5 months ago

  • Focuses accessibility removed

This ticket was discussed during today's accessibility bug-scrub: agreed to remove the accessibility focus as it doesn't appear to be an accessibility related issue.

Note: See TracTickets for help on using tickets.