WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 3 years ago

Last modified 3 years ago

#35710 closed defect (bug) (fixed)

Make aria-label on TinyMCE buttons translatable.

Reported by: danne_j87 Owned by: azaozz
Milestone: 5.2 Priority: normal
Severity: normal Version: 4.4.1
Component: TinyMCE Keywords: has-patch
Focuses: accessibility Cc:

Description

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 .

Attachments (3)

wysiwyg.tiff (18.7 KB) - added by danne_j87 6 years ago.
TinyMCE WYSIWYG Screenschot
35710.diff (2.9 KB) - added by azaozz 3 years ago.
35710.1.diff (5.5 KB) - added by azaozz 3 years ago.

Download all attachments as: .zip

Change History (39)

@danne_j87
6 years ago

TinyMCE WYSIWYG Screenschot

#1 @azaozz
6 years ago

  • Milestone changed from Awaiting Review to Future Release

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.

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


5 years ago

This ticket was mentioned in Slack in #core-editor by afercia. View the logs.


5 years ago

This ticket was mentioned in Slack in #core-tinymce by afercia. View the logs.


5 years ago

#5 @afercia
4 years ago

  • Milestone changed from Future Release to 5.0
  • Type changed from enhancement to defect (bug)

I guess this should be prioritized for 5.0 and Gutenberg.

#6 @afercia
4 years ago

Hm seems fixed? /cc @azaozz

#7 @azaozz
4 years ago

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

#8 @afercia
4 years ago

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

#9 @afercia
4 years ago

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

https://cldup.com/25Qpm6-NEq.jpg

This ticket was mentioned in Slack in #core-editor by afercia. View the logs.


4 years ago

#11 @pento
3 years ago

  • Milestone changed from 5.0 to 5.0.1

#12 @pento
3 years ago

  • Milestone changed from 5.0.1 to 5.0.2

#13 @pento
3 years ago

  • Milestone changed from 5.0.2 to 5.0.3

#14 @afercia
3 years ago

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

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


3 years ago

#16 @afercia
3 years ago

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?

#17 @ocean90
3 years ago

  • Keywords needs-patch added
  • Milestone changed from 5.0.3 to 5.1

#18 @afercia
3 years ago

  • Milestone changed from 5.1 to 5.2

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

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


3 years ago

#21 @azaozz
3 years ago

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

#22 @afercia
3 years ago

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

#23 @azaozz
3 years ago

@afercia ha, good catch :)

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

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


3 years ago

#25 @afercia
3 years ago

  • Owner set to azaozz
  • Status changed from new to assigned

@azaozz Thank you :) Mind owning this ticket?

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


3 years ago

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


3 years ago

#28 @afercia
3 years ago

  • Milestone changed from 5.2 to 5.3

@azaozz
3 years ago

#29 @azaozz
3 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

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

#30 @afercia
3 years ago

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

#31 @azaozz
3 years ago

  • Keywords needs-testing removed

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
3 years ago

#32 @azaozz
3 years ago

  • Keywords needs-testing added

In 35710.1.diff:

  • Patch all tooltips and aria labels before the buttons are rendered.
  • Make it compatible with the classic block. Now tooltips and aria labels there also show the shortcuts.

@afercia more testing plz :)

Version 0, edited 3 years ago by azaozz (next)

#33 @afercia
3 years ago

  • Keywords needs-testing removed

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

#34 @azaozz
3 years ago

  • Milestone changed from 5.3 to 5.2

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

#35 @azaozz
3 years ago

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

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;

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


3 years ago

Note: See TracTickets for help on using tickets.