[4.1] language of parts [a11y]

[brianteeman]

This is a plugin for TinyMCE 5 that allows users to specify what language their text is written in. As TinyMCE does not currently provide a plugin for language of parts this is an implementation of https://github.com/edx/tinymce-language-selector/.

The plugin wraps the desired text in span tags with a lang attribute for the specified language. Unspecified text is assumed to be written in the page's language. This helps the resulting text comply with WCAG 2.0 3.1.2 Language of Parts: "The human language of each passage or phrase in the content can be programmatically determined..."

The only valid comments are on the implementation of the plugin. Comments about the plugin itself should be addressed upstream at https://github.com/edx/tinymce-language-selector/

[ The need for this is based on the EU funded research project for improving the process of creating accessible content by authors https://accessibilitycluster.com/about ]

If you have customised your tinymce editor toolbar you will need to edit the toolbar again to include this one

Testing

Dont forget to do a full npm ci

Todo - Help Wanted

In the build scripts

1. Remove the empty folder media\vendor\tinymce-language-selector\
2. To be compliant with the license node_modules@edx\tinymce-language-selector\LICENSE needs to be copied to the final folder
   Thank to @dgrammatiko for the work so far on those scripts

[brianteeman]

Any help on that part @dgrammatiko will be greatly appreciated

[dgrammatiko]

Any help on that part @dgrammatiko will be greatly appreciated

I'm working on it. Unfortunately the build tools are not in great shape...

[brianteeman]

ah - ok. I did spend a few hours trying but that was more a trial by error than actually knowing what I was doing

[dgrammatiko]

@brianteeman check brianteeman#116

I will have to redo the JS part of the build tools but that should be ok for this PR

[brianteeman]

Thank @dgrammatiko reviewing it and will work on the pr in the morning. really appreciate the assistance

[brianteeman]

@dgrammatiko almost but not quite. The following needs to happen

1. Remove export { BROWSER_DEFAULT, languages }; from the final plgin.js
2. Remove the empty folder media\vendor\tinymce-language-selector\
3. To be compliant with the license node_modules\@edx\tinymce-language-selector\LICENSE needs to be copied to the final folder

I really did try and work out how to do all of this and I learnt a lot but not enough to resolve this

[adj9]

I tried PR with a complete installation of Joomla! and the choice of languages in TinyMCE is not yet present.

[brianteeman]

@adj9 please check in the plugin that its enabled for the toolbar you are using

[adj9]

@brianteeman
You can tell me the name of the created plugin. In "Edit - TinyMCE" everything is enabled except "Use Joomla Text Filter". Thanks

[carcam]

@brianteeman I tried to test this on Saturday and I also couldn't. The tiny plugin is not being correctly moved on npm ci (although in the log you can see some action is taken)

I thought it was still a WiP and that's why I didn't comment earlier but reading your reply I guess this should work.

Maybe @dgrammatiko can provide some hint on what might be happening?

[brianteeman]

I have retested and found a few errors. Please retest by running npm ci

At this point you should have folders as in the screenshots below

node_modules/

media/

Check the plugin

Check Set 0 and click use advanced preset

Check editor in article

[carcam]

@brianteeman thank you very much for this clear explanation!! I can see the node_modules folder (I could also on Saturday) ✅.

Now I can also see the folder in "media/plg_editors_tinymce/js/plugins/tinymce-language-selector" which I was not able to see on Saturday (I was not looking deeper enought in the tree I guess) ✅

But the "Language" button does not appear in the plugin editor:

What am I missing? After npm ci should I do anything else?

Thank you very much!!

[infograf768]

It's working as intended here.

Two drawbacks:

1. no possibility to parameter the plugin (display)
2. no possibility to add languages Joomla proposes (prs, ckb, sy, srp, maybe others)

Concerning 1. It would be great to be able to choose the display between English (name) and language nativeName in the js in order to get if desired:

I modified the es6.js but it is always retrieved from https://registry.npmjs.org/@edx/tinymce-language-selector/-/tinymce-language-selector-1.1.0.tgz and evidently changes are lost when running npm ci.

One question: what does displaying a span with the lang tag gives as benefit to a11y? Would a screenreader finding the fa span be useful to tell the user that part is in Persian even if, by luck, it can read the content with a Persian accent?

[infograf768]

@carcam
Your test site is not current as the tabs have been corrected.
But nevertheless, your screenshot displays the existing toolbar for Set0

Look above the tabs. There you will find the Language button.
Drag and drop that button to the sets to use it.

[brianteeman]

@carcam Did you click on the Use Advanced Preset?

@infograf768
See original post

The only valid comments are on the implementation of the plugin. Comments about the plugin itself should be addressed upstream at https://github.com/edx/tinymce-language-selector/

Re the usefulness of the plugin. The accent thing is just an example. It is a requirement of WCAG AA that the language can be programmatically determined. It is not for us to question the WCAG

[dgrammatiko]

no possibility to add languages Joomla proposes (prs, ckb, sy, srp, maybe others)

That’s doable. If someone comes up with the field in the backend I can patch the js

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/30939.}

[brianteeman]

Please remove the rtc. There are several outstanding todo

[wilsonge]

@brianteeman is the todos in the PR description still current? Or other things to be done?

[wilsonge]

OK I think this brianteeman#119 is what you were after. But let me know and can tweak further. I'm not an expert at these build scripts so 🤷‍♂️

[brianteeman]

Thanks @wilsonge I will check it shortly. However at this time I think this will need to be retargeted for 4.1

[wilsonge]

Agreed

[infograf768]

Some tests with the new code:
Still no reply from openedx/tinymce-language-selector#13

That is: #30939 (comment)
I have'nt seen anything new in this patch to cope with it.

Also no reply here to #30939 (comment) concerning the translation of the term Browser Default in the dropdown as well as Current Language: in the pop-up.

const languages = {
  // not a language, used to represent absence of a language defaulting to browser language
  BROWSER_DEFAULT: {
    name: 'Browser default',
    nativeName: 'Browser default'
  },

editor.windowManager.open({
      title: 'Language plugin',
      body: {
        type: 'panel',
        items: [{
          type: 'htmlpanel',
          html: `<div>Current language: ${languages[currentLang].nativeName}</div>`
        }, {
          type: 'selectbox',
          name: 'language',
          label: 'Language',
          items: Object.keys(languages).map(lang => ({
            value: lang,
            text: languages[lang].nativeName
          }))
        }]
      },

No mention either of a necessary update to the tinyMCE lang js updates in
/build/media_source/vendor/tinymce/langs/ all js files for Browser default language and Language Plugin added by this patch.

For French it would need adding to fr.es5.js
"Browser default language": "Langue par d\u00e9faut du navigateur",
"Language Plugin": "Plugin de langue"

to get

Bug

If I have'nt done anything wrong:

When admin is French Language and selecting a lang other than "Browser Default" in the pop-up, I get :
Uncaught TypeError: button is undefined plugin.js:813:7

line is:

    if (!lang || lang === BROWSER_DEFAULT) {
      button.innerText = 'Browser default language';
    } else {
      button.innerText = languages[lang].nativeName; // Line 813
    }

The pop-up does not close although the span is added to the text, for example <span lang="af">Joomla</span>

I also sometimes get the error below.

When admin is in en-GB, and I forget to highlight a term, I get:

Failed to find and set button ID in TinyMceLanguageSelectorPlugin after 3 attempts. plugin.js:921:15

although, this time the language selected does appear in the editor's bar.

[brianteeman]

This is on hold until after 4.0. No point working on something with a 4.1 target at this time

[wilsonge]

Moved this to draft so it's clear

[infograf768]

Moved this to draft so it's clear

Good decision. My tests just demonstrated that there are much more TODOs than stated in the description.

[brianteeman]

this will be re-opened after 4.0 is released

[brianteeman]

This PR is now closed and will be created using new core tinymce functionality

[brianteeman]

Replaced with #35607