Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#38762 closed defect (bug) (fixed)

Customizer "Hide Controls" Text Too long

Reported by: ipstenu's profile Ipstenu Owned by: westonruter's profile westonruter
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Customize Keywords: has-patch
Focuses: ui Cc:

Description

In some languages the text for "Hide Controls" overlaps the icons making them difficult to click.

In English: https://cloudup.com/cG52vM4hS8d

Not English: https://cloudup.com/c_jl6trL5mL

Attachments (5)

WP47b3-de-Customizer-HideControls-Arrow-and-Textstring-problem.jpg (7.9 KB) - added by Ipstenu 7 years ago.
Not English
Screen Shot 2016-11-11 at 11 Nov - 12.03.57 PM.png (31.3 KB) - added by Ipstenu 7 years ago.
English
38762.0.diff (1.8 KB) - added by westonruter 7 years ago.
38762.1.diff (2.4 KB) - added by ocean90 7 years ago.
38762.1.png (24.2 KB) - added by ocean90 7 years ago.

Download all attachments as: .zip

Change History (20)

#1 @ocean90
7 years ago

  • Focuses ui added
  • Keywords needs-patch added

The now more descriptive string was introduced in [39132].

#2 @westonruter
7 years ago

  • Milestone changed from Awaiting Review to 4.7
  • Version 4.5 deleted

Is this something that translators need to be aware of as the context for the translated string? Should translators opt for the equivalent of “Hide” in that case?

#3 @transl8or
7 years ago

I understand that the more descriptive strings make sense in this case, because it's not just that the Customizer Controls collapse but also the Edit Shortcuts are hidden then.

To opt for only "Hide" as text in languages where the translation of "Hide Controls" is too long would be good. I already changed that in my local enviroment in the .po and .mo files.

Maybe we can find a combination of both of that here: http://workupload.com/file/E4ajTjH

If its necessary to shorten the text from "Hide Controls" to "Hide" (e.g. in german "Ausblenden") it would be good to have the longer variant for Screen Readers as title.

Is that possible with <button>?

#4 @westonruter
7 years ago

The strings are located in customize.php at:

<button type="button" class="collapse-sidebar button" aria-expanded="true" aria-label="<?php esc_attr_e( 'Hide Controls' ); ?>">
        <span class="collapse-sidebar-arrow"></span>
        <span class="collapse-sidebar-label"><?php _e( 'Hide Controls' ); ?></span>
</button>

And then in script-loader.php:

	'collapseSidebar'    => __( 'Hide Controls' ),
	'expandSidebar'      => __( 'Show Controls' ),

The latter is used in customize-controls.js to override the aria-label in the button, while the collapse-sidebar-label actually isn't changed:

if ( ! paneVisible ) {
        $( '.collapse-sidebar' ).attr({ 'aria-expanded': 'false', 'aria-label': api.l10n.expandSidebar });
} else {
        $( '.collapse-sidebar' ).attr({ 'aria-expanded': 'true', 'aria-label': api.l10n.collapseSidebar });
}

I should know better, but can the instance of “Hide Controls” in customize.php be translated differently than the “Hide Controls” that appears in script-loader.php? I'm not familiar with the specifics of how gettext does the lookups.

@westonruter
7 years ago

#5 @westonruter
7 years ago

  • Keywords has-patch added; needs-patch removed

@ocean90 will 38762.0.diff do the trick?

@ocean90
7 years ago

@ocean90
7 years ago

#6 follow-up: @ocean90
7 years ago

  • Keywords has-screenshots added

@westonruter Looks good. What do you think about fading out the label if it's still too long? See 38762.1.png and 38762.1.diff

#7 @transl8or
7 years ago

  • Keywords has-screenshots removed

To make it more clear what my initial thoughts were I made some animated gifs.

Initial issue: Translated-HideControls-Text-tooLong.gif (2.17 MB)
http://workupload.com/file/D6TeZU7

Besides adding a comment for translators, like the latest patch from @westonruter might do, a title attribute in the <button>, that could be longer than the label of the button, might also help here for better understanding.
See: HideControls-Text-with_title-that-might-be-longer.gif (2.52 MB)
http://workupload.com/file/tyAnjT8

This is how the result could look in an language, were the Text is too long, but could be applied as title.
See: shortButtonText-Long_title4Button.gif (876.46 KB)
http://workupload.com/file/9QuQFSa

Only thing that I can't fake here on my localhost testenviroment is a title for the button that shows the "Show Controls" (Bedienelemente einblenden) text as a title attribute to the <button>.

I hope @ocean90 can help out here and understands what I mean. :D

Last edited 7 years ago by transl8or (previous) (diff)

#8 follow-up: @westonruter
7 years ago

@transl8or thank you. Yes, I can see how a tooltip could be helpful here, surfacing the content in the aria-label visually. I think there are accessibility concerns generally with the use of tooltips, however, and they have increasingly been removed from core. That being said, there is also #36447 where they're being suggested to be added to the device preview buttons.

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.


7 years ago

#10 @westonruter
7 years ago

Also, if the long text and the short text were the same, then the tooltip I suppose would need to be suppressed by removing the title attribute if the strings are identical.

#11 in reply to: ↑ 6 @westonruter
7 years ago

Replying to ocean90:

@westonruter Looks good. What do you think about fading out the label if it's still too long? See 38762.1.png and 38762.1.diff

That's brilliant. It addresses the issue when a plugin adds more previewable devices.

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

Replying to westonruter:

I think there are accessibility concerns generally with the use of tooltips, however, and they have increasingly been removed from core.

Yep, see the long list of related tickets to remove title attributes. Master ticket: #24766. To the argumentations there, I'd just add:

  • title attributes may be not announced by screen readers, depending on the verbosity settings
  • they serve no purpose on touch devices
  • they're device-dependant, because they work only with a pointing device while there's the need of a solution that works for all users

so I'd recommend to don't introduce new ones :) For screen readers, the aria-label is perfectly OK. For low vision, cognitive impairments, etc., some clear, visible, text is the best option, the shorter, the better.

There are also more general considerations about controls that use icons, or only icons (worth noting this button becomes "icon-only" when collapsed) but they're a bit outside of the scope of this ticket :)

#13 @westonruter
7 years ago

  • Owner set to westonruter
  • Resolution set to fixed
  • Status changed from new to closed

In 39214:

Customize: Prevent the "Hide Controls" button label from overrunning the device preview buttons.

Adds translation context for "Hide Controls" strings so translators can supply shorter strings where space is constrained. Adds styles to fade-out long the "Hide Controls" label where it would run into the device preview buttons.

Props westonruter, ocean90.
Fixes #38762.

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.


7 years ago

#15 @westonruter
7 years ago

In 40510:

Customize: Fix visibility of "Hide Controls" link in IE.

Amends [39214].
Props timmydcrawford.
See #32296, #38762.
Fixes #40507.

Note: See TracTickets for help on using tickets.