WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#30766 closed defect (bug) (fixed)

Dashboard - At a glance metabox update button is misaligned

Reported by: celloexpressions Owned by: SergeyBiryukov
Milestone: 4.2 Priority: normal
Severity: normal Version: 3.8
Component: Administration Keywords: ui-feedback has-patch commit
Focuses: ui, accessibility Cc:

Description

See screenshot. Likely dates to 3.8.

Attachments (6)

30766.png (8.0 KB) - added by celloexpressions 6 years ago.
dashboard.css.diff (383 bytes) - added by tyxla 6 years ago.
Fixing the issue by making the button more responsive. This pushes the button a little to the bottom, which also reflects the total height of the "At a Glance" dashboard widget.
30766.2.patch (460 bytes) - added by afercia 6 years ago.
30766.3.patch (1.5 KB) - added by SergeyBiryukov 6 years ago.
30766.3.after.png (10.3 KB) - added by SergeyBiryukov 6 years ago.
30766.4.patch (1.6 KB) - added by SergeyBiryukov 5 years ago.

Download all attachments as: .zip

Change History (22)

#1 @nacin
6 years ago

  • Focuses administration added
  • Version changed from 4.0 to 3.8

#2 @DrewAPicture
6 years ago

  • Component changed from General to Administration
  • Focuses administration removed

@tyxla
6 years ago

Fixing the issue by making the button more responsive. This pushes the button a little to the bottom, which also reflects the total height of the "At a Glance" dashboard widget.

#3 @tyxla
6 years ago

  • Keywords has-patch ui-feedback needs-testing added; needs-patch removed

#4 follow-ups: @afercia
6 years ago

Looks like the CSS issue was there even before 3.8 but not noticeable because the version message text was shorter and didn't include the current theme, see screenshot below
https://cldup.com/n-fL4AgZia.png
Please consider additional stuff may be displayed at the bottom, see second screenshot below:
https://cldup.com/0qUBdC9rMk.png
so the paragraph after the Update button needs to be cleared.

It would also be possible to have the version message text and the Update button vertically aligned, I guess that was the original design intent, but that would require changes in the markup (e.g. using two span with display: table-cell). Updated patch keeps it simple and just clear what's after the button.

As a side note, uppercasing goes really wild here :-)

@afercia
6 years ago

#5 in reply to: ↑ 4 @afercia
6 years ago

Replying to afercia:

It would also be possible to have the version message text and the Update button vertically aligned ... (e.g. using two span with display: table-cell)

for example:

https://cldup.com/_3qMhAA0-8.png

#6 @SergeyBiryukov
6 years ago

  • Milestone changed from Awaiting Review to 4.2

#7 in reply to: ↑ 4 ; follow-up: @SergeyBiryukov
6 years ago

Replying to afercia:

It would also be possible to have the version message text and the Update button vertically aligned, I guess that was the original design intent, but that would require changes in the markup (e.g. using two span with display: table-cell).

I think we can just move the button before the string in the HTML and keep the current styles.

See 30766.3.patch and 30766.3.after.png.

Last edited 6 years ago by SergeyBiryukov (previous) (diff)

#8 in reply to: ↑ 7 @afercia
6 years ago

  • Focuses accessibility added

Replying to SergeyBiryukov:

I think we can just move the button before the string in the HTML and keep the current styles.

Not sure if screen readers reading out "Update to 4.1" *before* the version message would be confusing, accessibility team: any thoughts?

#9 follow-up: @joedolson
6 years ago

It would probably be better, on the whole, if screen readers got information about the current version before the notification what to upgrade to; but I'm not sure it's a crucial difference. The information is still present.

We could add aria-describedby to the button referencing the version message so that the additional information was read as part of the button. That might be erring in the direction of excessive verbosity, though.

I wouldn't consider this to be a crucial issue.

#10 in reply to: ↑ 9 ; follow-up: @DrewAPicture
5 years ago

  • Keywords needs-patch added; has-patch removed

I'd like to see a new patch that incorporates the feedback from @joedolson in comment:9.

#11 in reply to: ↑ 10 @SergeyBiryukov
5 years ago

  • Keywords has-patch added; needs-patch removed

Replying to DrewAPicture:

I'd like to see a new patch that incorporates the feedback from @joedolson in comment:9.

30766.4.patch adds aria-describedby.

This ticket was mentioned in Slack in #core by drew. View the logs.


5 years ago

#13 @afercia
5 years ago

Screenshot with last patch applied:

https://cldup.com/44R46HOvEJ.png

Patch still applies, would recommend for commit consideration.

Last edited 5 years ago by afercia (previous) (diff)

#14 @afercia
5 years ago

  • Keywords commit added; needs-testing removed

#15 @samuelsidler
5 years ago

  • Owner set to SergeyBiryukov
  • Status changed from new to assigned

This looks ready for commit. Let's get it in.

#16 @SergeyBiryukov
5 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 31928:

Make sure the update button in "At a Glance" dashboard widget does not overlap with long strings.

props SergeyBiryukov, afercia, tyxla.
fixes #30766.

Note: See TracTickets for help on using tickets.