User tests: Successful: Unsuccessful:
Pull Request for Issue #46815 .
This PR adds a new tinymce plugin that allows for the creation, editing and removal of the <abbr> element which is great for accessibility (WCAG AAA)
This requires the js scripts to be rebuilt so either use a prebuilt update package OR checkout and then npm ci
Then go to the tinymce plugin and either drag the two new icons to your toolbar OR click on use Advanced preset
Then create a new article and you will see the two new buttons on the toolbar
<abbr title="World Wide Web">www</abbr>
Translation support
I couldnt find any specific icons so i used these but I am open to suggestions
Please select:
Documentation link for docs.joomla.org:
No documentation changes for docs.joomla.org needed
Pull Request link for manual.joomla.org:
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
| Category | ⇒ | Repository NPM Change JavaScript SQL Installation Postgresql Front End Plugins |
| Labels |
Added:
Feature
a11y
NPM Resource Changed
PR-6.1-dev
|
||
| Category | Repository NPM Change JavaScript SQL Installation Postgresql Front End Plugins | ⇒ | Administration Language & Strings Repository NPM Change JavaScript SQL Installation Postgresql Front End Plugins |
| Labels |
Added:
Language Change
|
||
Snag! I applied patch, ran npm run build:js and then went to edit a new article and got this crash error report:
An error has occurred.
0 There is no "plg_editors_tinymce.abbr" asset of a "script" type in the registry.
Call Stack
1 () JROOT/libraries/src/WebAsset/WebAssetRegistry.php:135
2 Joomla\CMS\WebAsset\WebAssetRegistry->get() JROOT/libraries/src/WebAsset/WebAssetManager.php:274
3 Joomla\CMS\WebAsset\WebAssetManager->useAsset() JROOT/libraries/src/WebAsset/WebAssetManager.php:208
4 Joomla\CMS\WebAsset\WebAssetManager->__call() JROOT/plugins/editors/tinymce/src/PluginTraits/DisplayTrait.php:400
5 Joomla\Plugin\Editors\TinyMCE\Provider\TinyMCEProvider->display() JROOT/libraries/src/Editor/Editor.php:211
6 Joomla\CMS\Editor\Editor->display() JROOT/libraries/src/Form/Field/EditorField.php:250
7 Joomla\CMS\Form\Field\EditorField->getInput() JROOT/libraries/src/Form/FormField.php:493
8 Joomla\CMS\Form\FormField->__get() JROOT/libraries/src/Form/Field/TextareaField.php:94
9 Joomla\CMS\Form\Field\TextareaField->__get() JROOT/libraries/src/Form/Field/EditorField.php:138
10 Joomla\CMS\Form\Field\EditorField->__get() JROOT/libraries/src/Form/Form.php:469
11 Joomla\CMS\Form\Form->getInput() JROOT/administrator/components/com_content/tmpl/article/edit.php:73
...
Removed patch, recompiled js and restored normal editing. Me? Or...
can you try a full npm ci - seems it needs to be that not just build:js to copy the registry - i have updated the test instructions
@brianteeman Where can I find prebuilt update package?
I'm new here..
@brianteeman Where can I find npm ci? I'm new here..
Hi @gioacchino54, probably easier for you (depending on your setup/level of knowledge) is to Download the update package or use the custom .xml option from the Joomla Update function.
You can find the Download package by pressing the ✅ All checks have passed area which opens up a long list of CI lines, go to the bottom and find Download -- Prebuilt packages are available for download. and choose most likely:
Joomla_6.1.0-alpha4-dev+pr.46820-Development-Update_Package.zip
Hope it helps :)
@exlemor thank you
I have tested this item ✅ successfully on a3dcf8d
It works. I tried adding, editing, and deleting, and it works fine.
I have tested this item ✅ successfully on a3dcf8d
I have successfully tested this @brianteeman - as for the icons, unsure if they make me think of abbreviations but I totally understand it's tough to find appropriate choice - thank you for your continuous work and this PR!
| Status | Pending | ⇒ | Ready to Commit |
RTC
The problem with the icons is also that it needs to be a pair (add/remove).
I couldn't find any editor toolbar that offers abbr so it's always tricky when you're first.
I'm sure the person that chose a chain and an anchor regrets their "little jokes" as they're only funny in English. And the use of a 3.5" disk as a save icon hasn't stood the test of time either.
My thinking with the chosen icon was that it resembled a tooltip which is how the abbr is rendered. But I am happy to change it to anything else.
I have tested this item ✅ successfully on a3dcf8d
It works OK with npm ci.
I have noticed one thing (don't know if the behavior can be changed): I write something, I select the text and add the abbreviation, if I try to write further the new text is part of the abbreviation. I need to insert an empty space before I select the abbreviated text. In comparion, when I insert a link on a text and then write further, the new text is not part of the link.
I hope, my explaination is understandable.
That happens with quite a few things in tinmyce eg bold and italics, not sure if there is a solution or just something you have to live with but I will look into it
I can confirm the effect of @drmenzelit but it is not in scope of this PR. It is the same with with headlines.
Thank you @gioacchino54 and @brianteeman and all testers, this is an a11y improvement.
The icons compress and expand?