WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 21 months ago

Last modified 8 months ago

#35064 closed defect (bug) (fixed)

Remove title attributes: options-general.php

Reported by: afercia Owned by: afercia
Milestone: 4.5 Priority: normal
Severity: normal Version: 4.4
Component: Administration Keywords: has-patch, has-screenshots, title-attribute
Focuses: ui, accessibility Cc:

Description (last modified by 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.

Attachments (7)

35064.patch (1.9 KB) - added by afercia 2 years ago.
35064.2.patch (5.0 KB) - added by afercia 2 years ago.
Screen Shot 2016-01-09 at 1.01.38 PM.png (68.4 KB) - added by melchoyce 23 months ago.
35064.3.patch (4.3 KB) - added by perezlabs 23 months ago.
timestamps are now regular instead of italic and were added periods after the timestamps too.
35064.4.patch (8.9 KB) - added by afercia 23 months ago.
35064.5.patch (1.1 KB) - added by adamsilverstein 23 months ago.
35064.6.patch (728 bytes) - added by afercia 22 months ago.

Download all attachments as: .zip

Change History (34)

@afercia
2 years ago

#1 @afercia
2 years ago

  • Keywords has-patch has-screenshots added
  • Owner set to afercia
  • Status changed from new to assigned

Screenshot with the patch applied:

https://cldup.com/gRh9IsLUgc.png

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


2 years ago

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


2 years ago

#4 @afercia
2 years ago

  • Description modified (diff)

#5 @afercia
2 years ago

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

@afercia
2 years ago

#6 @afercia
2 years ago

  • Keywords ui-feedback added

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:

https://cldup.com/Yi3zLb_cBM.png

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

https://cldup.com/4e4paHAoMz.png

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

https://cldup.com/6Ee8pVMS11.png

Some UI feedback would be nice :)

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


23 months ago

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


23 months ago

#9 follow-up: @hugobaeta
23 months ago

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):

https://cldup.com/oJl8oPcqta.png

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

#10 follow-up: @michaelarestad
23 months ago

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.

#11 in reply to: ↑ 10 @hugobaeta
23 months ago

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. ;)

#12 @michaelarestad
23 months ago

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

#13 in reply to: ↑ 9 @afercia
23 months ago

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:

https://cldup.com/NijlNMl0Td.png

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.

#14 follow-up: @melchoyce
23 months ago

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.

#15 @afercia
23 months ago

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.

https://cldup.com/DUsRn0s3eF.png

@perezlabs
23 months ago

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

#16 @perezlabs
23 months ago

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

#17 @perezlabs
23 months ago

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

#18 @melchoyce
23 months ago

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

#19 in reply to: ↑ 14 @michaelarestad
23 months ago

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.

#20 @afercia
23 months ago

  • Keywords ui-feedback removed

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:

https://cldup.com/63s0qi4_TA.png

@afercia
23 months ago

#21 @afercia
23 months ago

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

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.

#22 @adamsilverstein
23 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

@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

#23 @afercia
23 months ago

@adamsilverstein sure, thanks!

#24 @afercia
23 months ago

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

In 36267:

After [36263] escape filterable HTML output.

Props adamsilverstein.
Fixes #35064.

@afercia
22 months ago

#25 @afercia
22 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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:

https://cldup.com/blz0EyV4sH.png

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

#26 @afercia
21 months ago

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

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.

#27 @afercia
8 months ago

  • Keywords title-attribute added
Note: See TracTickets for help on using tickets.