Language and text direction are not editable in the visual editor

[karlgroves]

Language and text direction are not editable in the visual editor

• Severity: Medium
• Affected Populations:
  • Blind
  • Low-Vision
  • Cognitively Impaired
• Platform(s):
  • All / Universal
• Components affected:
  • Block Editing
  • Title Block

Issue description

Users who need to add content in multiple languages cannot set the
lang or dir attribute for a block using the visual editor.
Instead, users must manually switch to the HTML editor.

In the HTML editor, adding a dir or lang attribute brings up an
error and the offer to resolve the error by either removing the dir
and lang attributes or converting the block to HTML. This allows
users to manually add in these attributes, however the editor suggesting
that these are errors may lead users to believe they cannot use these
attributes at all. It also requires users to be familiar with HTML.

Remediation Guidance

Add the ability to define lang and dir attributes in the visual
editor (probably via the block editing options), ideally with
user-friendly options such as choosing from language names and then
choosing between "left to right", "right to left" or "vertical".

Relevant standards

• 3.1.2 Language of Parts (Level
  AA)

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-111 in Tenon's report

[afercia]

While Gutenberg seems to correctly parse, for example, <span> tags with lang and dir attributes within a block content...

<!-- wp:paragraph -->
<p>Hello this is some <span lang="it">testo</span> to test the lang and <span dir="rtl">dir</span> attributes.</p>
<!-- /wp:paragraph -->

...it doesn't provide any user interface to add these attributes. Worth noting this isn't new, as the Classic Editor doesn't provide any user interface as well, at least by default.

Worth also noting there may be the need to set these attributes to the whole block, for example a paragraph, a list, a quote, etc.:

<!-- wp:paragraph -->
<p lang="ar" dir="rtl">العربية</p>
<!-- /wp:paragraph -->

It would be great for Gutenberg to provide this functionality, maybe via the Format API?

[kjellr]

We discussed this ticket in the weekly #design chat today. This would be very cool to include! I've definitely heard feedback from users about this friction point.

Since this was also not part of the classic editor by default, it seems to me that it'd be great to have this be part of a plugin to start with. That way, the whole writing experience could be fully considered through the lens of users writing multi-language posts. This would allow us to address tickets like #15350 alongside this one as a complete solution.

[enriquesanchez]

Here's a quick mockup that proposes how to address this from the block settings:

What this setting would do is add lang="en-US" to the block html.

I would much prefer to explore ways of having this setting on the block toolbar, I however don't feel this should be a first-level toolbar item and also feel that nesting this inside a sub menu would not be ideal.

That being said, if we could figure out how to have this setting in the block toolbar, we could have the lang attribute applied to a particular text selection, instead of the whole paragraph block, similar to how a link is applied.

See #15350 for a document-level exploration of this same setting.

[mapk]

This looks good 👍 @enriquesanchez! Because the user would be in the "Block Settings" I think it's okay to drop the word "Text" from the label and just use "Language" like in #15350.

Should we also say in the helper text, "Set the block's language attribute." ? I ask because maybe this can apply to more than just the Paragraph block, like the Media + Text block.