Dashboard - At a glance metabox update button is misaligned

[celloexpressions]

See screenshot. Likely dates to 3.8.

[tyxla]

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.

[afercia]

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

Please consider additional stuff may be displayed at the bottom, see second screenshot below:

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]

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:

[SergeyBiryukov]

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​.

[afercia]

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?

[joedolson]

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.

[DrewAPicture]

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

[SergeyBiryukov]

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.

[afercia]

Screenshot with last patch applied:

Patch still applies, would recommend for commit consideration.

[samuelsidler]

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

[SergeyBiryukov]

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.