Add lang and dir attributes to text-formatting tools
#49985
Conversation
|
Size Change: +581 B (0%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in c17d58a. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4858789910
|
There was a problem hiding this comment.
@aristath, maybe we should wrap popover controls inside the form? Then, the button will become a submit button, and the onClick logic will migrate to the form's onSubmit callback.
The form actions in popovers are usually right-aligned. There might be other design details that I'm missing, so let's request design feedback.
|
@aristath Thanks, accessibility issues fixed. One last issue I noticed and I am not sure if you can do anything about it or not. To replicate:
Not sure if this is an accessibility-specific issue or something you can notice visually as well. NVDA sometimes struggles with languages so it may not be anything you can fix here. Thanks. |
Mamaduka
added
Needs Design Feedback
There was a problem hiding this comment.
Thanks for the follow-up work, @aristath! I think we're almost there, codewise.
The design feedback would be appreciated before merging. Maybe @jasmussen could help us here 🙇
a11y question: Should the focus remain on the text after selecting the language?
|
A question: is this advanced enough that it should live, literally, in the "advanced" section? I've never once had a need to use this attribute, and giving it block toolbar prominence may be overdoing it. I understand this adds a span and is inline formatting: That makes it less appropriate to put it in the advanced section. But still: should it be inline level? Shouldn't it be block level for the whole paragraph? Is there a common use case of using the language attribute on only a selection of text? Asking genuinely here as I have little experience with using this attribute. If we do keep it in the block toolbar as an inline element, and unless the list of inline tools are sorted alphabetically, let's sort it at the bottom. And let's update the icon as well. Perhaps something like this: |
|
Thank you for the feedback @jasmussen!
It's true that we don't necessarily see it used that often, however, we should. If I write on my food blog "every bite takes you home. Bon appétit!", then optimally, "Bon appétit" should be in French so that the screen-reader can use the correct pronunciation of the phrase. In comparison to the other tools we have in that toolbar (subscript, superscript, keyboard-input), I'd argue that language would be far more useful
It should be at the block level as well, yes... But I left that for a follow-up PR.
One common use case would be the "Bon appétit" example above. Another scenario would be a site in Arabic, with a quote in French, by an Italian. In this case, the
They are sorted alphabetically 👍
Thank you! That icon does look a lot better than the one I copy-pasted from dashicons 🎉 |
|
I'd love a quick glance by @WordPress/gutenberg-design as well, but the use case seens valid enough. That said, I'm a little concerned about ballooning UI for such a rarely used feature, especially if we need to have both an inline and a block level button both. To an extent, I wish this was something that could be entirely automated, something where the parser could apply the appropriate attributes based on a detected language entirely invisibly. Definitely not trivial to implement, but it would ensure always semantic output, at no headspace cost of possible. If we do move forward, be sure to add the icon to the main icon library component, I'm sure we'll be able to use it elsewhere as well. |
This is not rarely used at all, it is just mandatory for accessibility (and accessibility compliance is a thing for a lot of website owners) :)
I'm afraid this won't work until many years as we'd need an implementation of language detection in the editor. I'm not aware of any language detection tool capable of isolating specific terms in a portion of a non english text, and to expose them so we can wrap it with the correct markup :) |
|
How interesting!
|
Honestly, I think it would be way more used than the subscript or superscript inline formatting. The fact you personally have little knowledge about the
Right. On top of that, we shouldn't assume words in another language have to be always marked with the |
|
Seems like a nice enhancement to me 👍 A couple of questions on the UI though: Do we need to validate to ensure the user input a recognised country code? Alternatively could we use a search input with suggestions and extract the code from that? Kind of like the tag UI:
Similarly, can the text direction be determined automatically based on the chosen language? |
Co-authored-by: George Mamadashvili <[email protected]>
Co-authored-by: George Mamadashvili <[email protected]>
This reverts commit df5bb36.
|
Thank you, Ari. Feel free to merge this after all checks are green 🚢 |
|
Awesome! Thanks all and especially @aristath for making this real! |
|
Hi! Shouldn't we use the |
…core (#85) since [#49985](WordPress/gutenberg#49985)
What?
This PR adds the ability to select the
langanddirattributes, So that users can make parts of their text in a different language. This helps assistive technologies like screen-readers to properly understand what language the text is in, and use the proper pronunciation when reading the text.Why?
Because not all text is in English and there are lots of sites that use more than one languages. This addition will help content writers to produce more accessible content.
How?
We started exploring ways to do that with @afercia, @carolinan and @SergeyBiryukov, but we later found that @audrasjb already built a plugin for that in https://github.com/audrasjb/language-attribute-for-gutenberg
This PR is a port of that plugin to Gutenberg, huge props to @audrasjb for all the work there! ❤️
We fixed some deprecation notices, and adapted the code a bit for use in Gutenberg, but other than that it's an almost verbatim copy of that code.
Testing Instructions
fr,itetc, and select if the language is LTR or RTLlanganddirattributesScreenshots or screencast
The screencast below shows selecting and deselecting the language, and how that applies to the markup.
Screen.Recording.2023-04-21.at.11.38.25.AM.mov
Props @audrasjb, @afercia, @carolinan, @SergeyBiryukov, @aristath