[wp-trac] [WordPress Trac] #34904: The design of the focus outline on buttons/elements could be improved
WordPress Trac
noreply at wordpress.org
Wed Oct 2 18:24:42 UTC 2019
#34904: The design of the focus outline on buttons/elements could be improved
-------------------------------------------------+-------------------------
Reporter: michaelarestad | Owner: audrasjb
Type: task (blessed) | Status: reopened
Priority: normal | Milestone: 5.3
Component: Administration | Version:
Severity: normal | Resolution:
Keywords: color-contrast blessed wpcampus- | Focuses: ui,
report has-patch has-screenshots needs-dev- | accessibility
note 5-3-admin-css-changes |
-------------------------------------------------+-------------------------
Changes (by afercia):
* keywords:
color-contrast blessed wpcampus-report has-patch has-screenshots
needs-dev-note commit 5-3-admin-css-changes
=>
color-contrast blessed wpcampus-report has-patch has-screenshots
needs-dev-note 5-3-admin-css-changes
Comment:
@mapks thanks for your feedback.
Noting that this ticket is about focus style and contrast :) #47477 is the
ticket related to sizes. Saying this just to try to keep things in order.
On your points: whether or not all these changes will stay or will be
postponed to next releases, here's some notes that can be good for present
or future work:
> 1 Border radii are all over the place.
I noticed that as well, though the "Add New" button is a pre-existing
issue and does have a border-radius of 2px on all previous versions
against the 3px of the core-ui buttons. I vaguely remember when it was
implemented that was a design choice. I may be wrong, would need some
software archeology on Trac.
Can certainly be improved but needs a design decision. I'd tend to think
deciding if the radius must be 2, 3, or 4 pixels would need just a few
minutes.
> 2 The default button height does not match the input field height.
On 5.2 and all previous versions:
- The default input field height is the one in the settings pages. About
25px on macOS Chrome. Can vary across operating systems and browsers.
- Some admin pages (e.g. the posts page) use a different input/select
height to match with buttons so currently there's not a real "standard"
- On 5.2 and previous: normal buttons have a height of 28px plus a bottom
box-shadow that makes them look 1 pixel taller so even in this case form
controls and buttons aren't visually aligned:
[[Image(http://cldup.com/vTzFrzhuI1.png)]]
- On 5.2 and previous: on mobile the small, normal, and large button sizes
become all 31px (with various exceptions). Form controls change to a wide
range of different heights with no apparent sense.
With the new CSS:
- form controls heights are way more standardized and have way less
exceptions
- just needs a decision on the default height of all controls: inputs,
selects, buttons. To recap, on desktop - normal size:
- buttons were not changed, they're still 28px
- the inputs are now 30px
- the new select is 28px
We could make it all 28px or all 30px. And on mobile all 40px.
However, @Joen made a very good point on establishing a grid base. I'd
totally second that and I'd lean towards a base8. Thus, on desktop the
normal size would be 32px and on mobile 40px. This needs a design
decision.
Given all heights are now much more standardized, these adjustments would
be a matter of very few changes in the CSS.
Lastly: I'd like to note this ticket is not about pixel perfection :)
The main goal here is to remove all the fixed heights and allow all the UI
controls to scale with zoom text. Otherwise, text within controls is cut
off or overflows, making the controls barely usable.
See for example what happens in Firefox with "Zoom Only Text":
[[Image(http://cldup.com/KcnKs6nwAQ.png)]]
--
Ticket URL: <https://core.trac.wordpress.org/ticket/34904#comment:109>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list