Customizer "Hide Controls" Text Too long

[Ipstenu]

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

[Ipstenu]

Not English

[Ipstenu]

English

[ocean90]

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

[westonruter]

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?

[transl8or]

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>?

[westonruter]

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]

@ocean90 will 38762.0.diff​ do the trick?

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

[transl8or]

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 could help out here and understands what I mean. :D

[westonruter]

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

[westonruter]

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.

[westonruter]

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.

[afercia]

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

[westonruter]

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.

[westonruter]

In 40510:

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

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