-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@aristath Thanks. A couple accessibility notes below.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks great to me, thank you Ari!
This changeset would be a great enhancement for better accessibility of the Gutenberg project.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
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
lang
anddir
attributes, 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
,it
etc, and select if the language is LTR or RTLlang
anddir
attributesScreenshots 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