Remove title attributes: options-general.php

[afercia]

See related #24766 and all the following tickets about title attributes.

In the General Settings screen, some title attributes are used on:

• the "UTC" abbreviation
• the date and time format labels

I'd propose to remove the title attributes and just show in plain text their content.
About the date and time format, maybe show them wrapped in a <code> tag.

[afercia]

Screenshot with the patch applied:

[afercia]

Ongoing discussion with the accessibility team about the "UTC" case. Also, maybe things can be visually improved a bit.

[afercia]

Refreshed patch. About the "UTC" abbreviation, was thinking to simplify and use something that makes sense for the vast majority of users. So, instead of "Coordinated Universal Time" just say "Universal time (UTC)". I'd propose also to move the universal/local time info below the select and its description:

Also, the date/time string shouldn't break in a new line at intermediate viewport sizes:

In the responsive view, I'd suggest to always show the date/time strings in a new line:

Some UI feedback would be nice :)

[hugobaeta]

Giving it a quick glance comparing it to what is currently there, this seems like more than simply making the title attribute visible in text, or am I seeing this wrong?

"The Timezone is currently in standard time. Daylight saving time begins on: ..." - Is this necessary? My concern is adding so much text to this, maybe the extra amount of text could be in a help prompt?

Would be nice to keep the screen streamlined, instead of adding extra description text. Maybe we need a contextual helper indicator that would link to a section in the help tab up top. Something like (rough idea):

Clicking that (?) bubble would open the helper tabs and go to the appropriate tab. Would this be acceptable A11y-wise?

[michaelarestad]

I think the abbreviation in some situations (like UTC) is helpful when we refer to those time zones. What specifically is the a11y issue we're solving? Without knowing that, my gut reaction is to use something like the abbr element with the title being the definition (which I think is what it currently is).

@hugobaeta
I would avoid any ? bubbles if we can. I'm not sure we want to introduce that into WordPress.

[hugobaeta]

I would avoid any ? bubbles if we can. I'm not sure we want to introduce that into WordPress.

Yeah, It was just a rough idea. I guess there's no simple way to make that help tab thingy more contextual. I wonder what's the usage of that Help tab (but this is off-topic).

My point is, no to adding more text to the page. ;)

[michaelarestad]

@hugobaeta Totally agree. My fear with the ? is that it could become a crutch. It could also helps us potentially remove the Help panel altogether.

[afercia]

Replying to hugobaeta:

"The Timezone is currently in standard time. Daylight saving time begins on: ..." - Is this necessary? My concern is adding so much text to this...

I'm not adding any of that :) That text is already there, not sure why it doesn't appear on your installation. See in the screenshot below, how it looks in trunk now:

What I'm proposing is:

• remove the title attribute
• change "UTC" in "Universal Time (UTC)"
• move all the highlighted text below the select

Replying to michaelarestad:

What specifically is the a11y issue we're solving?

Title attributes used on not focusable elements are not announced by screen readers. Title attributes in general are useless for tablet, mobile, and touch devices users. The Web is evolving and title attributes are more and more ​the best way to hide content from users :)

Quote: ​When using title attributes there's something lacking in your interface to begin with.

Also: ​relying on the title attribute is discouraged in the HTML5 specification.

See also all the related Trac tickets.

[melchoyce]

35064.2.patch​ looks good to me. Two suggestions:

1. The small italic "choose a city" now kind of clashes with the slightly larger italic timestamps. Let's make the timestamps regular instead of italic.
2. Can we add a periods after the timestamps, since they look more like sentences now than they did before? i.e. Universal time (UTC) is 2016-01-09 17:47:19. Local time is 2016-01-09 12:47:19.

@hugobaeta / @michaelarestad: We should talk about restructuring/updating all of the settings pages some time in the next cycle or two.

[afercia]

Forgot to update some JavaScript stuff, new patch incoming. @melchoyce thanks :) any thoughts about the date/time formats? Currently, they're displayed in the title attributes we're going to remove (left). The current patch displays them in plain text wrapped in <code> tags (middle). Was thinking to align all the things (right): looks better to me and the formats look visually connected with the "Custom" field.

[perezlabs]

timestamps are now regular instead of italic and were added periods after the timestamps too.

[perezlabs]

@melchoyce I added a new patch based on your two suggestions.

[perezlabs]

@melchoyce @afercia: would love any feedback about my quick patch :).

[melchoyce]

@perezlabs — I can't speak to the code itself, but the result looks good.

@afercia — Agree that the right aligned version looks cleaner. I like how custom lines up; it helps reinforce what that field does.

[michaelarestad]

Replying to melchoyce:

@hugobaeta / @michaelarestad: We should talk about restructuring/updating all of the settings pages some time in the next cycle or two.

Definitely.

Also, +1 to the right aligned items.

[afercia]

Thanks everyone :) The patch still needs some JavaScript and CSS tweaking. Especially on smaller screens where the periods after the timestamps end up in a new line. (See screenshot below, on the left). Also, the small text field is too small and cuts off the last character (see d/m/Y). Lastly, the "Custom" row doesn't have enough space and there are also spinners that appear when manually changing the date/time values.

Please notice the "spinners" don't have enough space even before the patch (see the screenshot on the center) The whole "example" text + spinner should probably be reconsidered and displayed in its own line or the spinner could be removed but this would be far beyond the scope of this ticket. For now, I'd say to just don't align the last line on smaller screens.

On the right, with the last patch applied:

[afercia]

In 36263:

Accessibility: Remove title attributes from the General Settings screen.

Date and time formats are now displayed in plain text and available for all
users. Also, lines up them with the "custom" date and time format fields to
help reinforce what these fields do.

Props afercia, perezlabs.
Fixes #35064.

[adamsilverstein]

@afercia

I think you may want to add some escaping around output of $format?

This value is filtered and can't be trusted.

See 35064.5.patch​

[afercia]

@adamsilverstein sure, thanks!

[afercia]

In 36267:

After [36263] escape filterable HTML output.

Props adamsilverstein.
Fixes #35064.

[afercia]

I've missed something here, my bad. I've always tested setting the time zone to a a city name, but when setting it to a UTC value, the UTC and local time should still be displayed. See in the screenshot below, WP 4.4 above and trunk below:

35064.6.patch​ should fix it, displaying UTC and local time in their new place below the select description.

[afercia]

In 36585:

Accessibility: Fix displaying of Universal time and Local time info on the General Settings screen.

In [36263] they were mistakenly moved within a conditional check.

Fixes #35064.