Make aria-label on TinyMCE buttons translatable.

[danne_j87]

The aria-labels on the TinyMCE buttons in the WYSIWYG editor can't be translated.
The code creating the buttons is located in wp-includes/js/tinymce/tinymce.min.js .

[danne_j87]

TinyMCE WYSIWYG Screenschot

[azaozz]

This needs to be done in TinyMCE. The translated strings are available (used in the tool tips), just need to be added to the HTML.

[afercia]

I guess this should be prioritized for 5.0 and Gutenberg.

[afercia]

Hm seems fixed? /cc @azaozz

[azaozz]

@afercia seems not completely. I see some labels translated like "Bulleted list", "Numbered list", but others are not (and the tool tips are translated).

[afercia]

@azaozz thanks :) Commented on the related Gutenberg PR ​https://github.com/WordPress/gutenberg/pull/4318

[afercia]

This is still an issue on current trunk, and relevant for Gutenberg too. See below:

[afercia]

@azaozz when you have a chance: does this still needs to be addressed upstream?

In languages other than English, the mismatch between the translated tooltip and the not-translated aria-label is a serious accessibility issue. The buttons accessible name is given by the aria-label.

For example, speech input users who set the user language to something other than English will try to voice a command in that language, according to what the tooltip displays. However, the real controls name is in English. In Italian, for example, users would try to voice a command like "Clicca grassetto": this wouldn't do anything because the button name is still "Bold".

[afercia]

Realistically, this ticket can't be addressed for 5.0.3 which is happening soon. @azaozz when you have a chance, do you think it needs a fix upstream and can be realistically addressed for 5.1?

[afercia]

The 5.1 release beta 1 is today. Punting to 5.2 as it would be great to have this soon to complement the new Block Editor. Pinging the component maintainers: @azaozz @iseulde

[afercia]

Related upstream GitHub issue: ​https://github.com/tinymce/tinymce/issues/3740

[azaozz]

@afercia this HTML is generated by TinyMCE, a "proper" fix should be in there while it's generated. Thanks for linking to ​https://github.com/tinymce/tinymce/issues/3740. Thinking we should look into submitting a PR there for TinyMCE 4.0 (as at this point is a bit unclear when WP will be upgraded to TinyMCE 5.0).

Of course we can try to replace the aria-label values with the translated strings "after the fact". That'd be somewhat hacky but may be acceptable for now. Will try to make a patch in the next few days.

[afercia]

@azaozz thanks. Was just looking into it. If I'm not wrong, in some cases (plugins) it depends on what WordPress does. For example:

		editor.addButton( 'link', {
			icon: 'link',
			tooltip: 'Insert/edit link',
			cmd: 'WP_Link',
			stateSelector: 'a[href]'
		});

When I change tooltip to title then the aria-label is translated.

[azaozz]

@afercia ha, good catch :)

Looking through the default TinyMCE plugins, some use tooltip, others use title. Will figure out why :)

[afercia]

@azaozz Thank you :) Mind owning this ticket?

[azaozz]

In 35710.diff:

• Fix adding of shortcuts to all tooltips. Some tooltips are translated earlier, so we couldn't match them with the shortcuts.
• (Attempt to) fix the aria labels on the buttons. Unfortunately they are rendered already at the time this script runs, so we need to replace them in the HTML.

@afercia finally got some time to look more in depth. The patch should fix few accessibility bugs. The fixes are a bit "hacky" but that's all we can do here and now. Please test :)

[afercia]

@azaozz thanks!

• Classic editor: seems to me all the aria-labels are translated, except the "Text color" one (the tooltip is translated though). This button comes from a plugin, I guess it needs some special treatment?
• Gutenberg: no change: the aria-labels are not translated, I guess it needs some change on the G. side, correct?

Worth noting the Text Color button doesn't work with the keyboard. It's a long standing bug that should be fixed upstream.

[azaozz]

Yeah, the text color button/drop-down is... a special case. Will see if we can fix it too.

The classic block instance will need a small change. There is a way to do it from the wordpress TinyMCE plugin but it's even more "hacky" :) Will look a bit more there, may need to wrap the whole thing in a try... catch to prevent throwing errors in edge cases.

[azaozz]

In 35710.1.diff:

• Patch all tooltips and aria labels before the buttons are rendered (removes the need to do it after-the-fact in the HTML, less "hacky").
• Make it compatible with the classic block. Now tooltips and aria labels there also show the shortcuts.

@afercia more testing plz :)

[afercia]

Tested and works nicely in Gutenberg too! (except the Text color button)

[azaozz]

Fixed translating the "Text color" label. The patch tests well, lets fix this :)

[azaozz]

In 45066:

TinyMCE:

• Fix adding the keyboard shortcuts to all button tooltips in the classic editor and classic block.
• Fix translating the aria labels for all buttons.

Fixes #35710;