• I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.

Revamp the abbreviations plugin to support several common uses of the abbr element and provide information and recommendations to the end user.

The introduction of the "abbr" plugin for TinyMCE limited the use of the title attribute for descriptions, even though that attribute lacks consistency across different platforms and technologies.
Instead of removing this new plugin from TinyMCE, I propose improving it here.

I invite you to read Adrian Roselli's excellent article on this subject: https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html

For those who don't know Adrian Roselli, he's a well known accesibility expert. Aside from writing about accessibility, he served as an invited expert in the W3C HTML Working Group, the standards body responsible for developing HTML. He is now a full member and is part of Accessible Platform Architectures Working Group, Accessible Rich Internet Applications Working Group, HTML Accessibility Task Force, and Web Platform Working Group (formerly the HTML Working Group).

Let us quote @aardrian (with his kind permission), based on the update to his article and his comments:

Joomla is promoting abbreviation buttons in TinyMCE as a way to improve accessibility and screen reader support. As the content of my post shows, this is wrong.

The isn’t inaccessible, it’s simply that it carries no special meaning for platform accessibility APIs. Adding title doesn’t make it inaccessible either, but browsers and screen readers choose to expose it in different ways, so you have inconsistent experiences.

It seems obvious to me that the inclusion of the <abbr> element cannot be linked to improved accessibility. Ultimately, it is simply semantic HTML that, at present, offers little beyond providing an element to which specific CSS styles can be applied.

That is the purpose of this pull request (PR): to provide more options and information regarding the use of this element. I started working on it in May but hadn't found the time to finalise it until now.

This PR is submitted for comments; it is neither fully complete nor ready for production. It is a draft!

Summary of Changes

1. Adds 3 methods for inserting an <abbr> element:

• <abbr> element alone, without a description (when the full description has already been provided earlier in the document)
• <abbr> element + inline description in parentheses (recommended for the first use of the abbreviation)
• <abbr> element + title attribute (the only current option) + a warning about the inconsistency of this practice.

2. Adds auto text direction support (LTR/RTL)

3. Hardcoded colors to pass WCAG color-contrast.

4. Adds new SVG icons. There are no copyright issues, as I created them from scratch as original vector graphics.

5. Improves integration: just like with the link feature, when you click the <abbr> element, the corresponding icon in the toolbar is automatically highlighted.

What this PR does no do yet

• New text hardcoded (new language strings to be created before any commit).
• Need to check about color-contrast (in this draft, hardcoded), how and where to include this change as well for other TinyMCE elements and plugins (currently, not enough color contrast here and there in TinyMCE).
• Add new SVG icons, if accepted, to the TinyMCE editor plugin settings.

Testing Instructions

Here a video to showcase how it works.

• Insert an abbreviation directly using the button icon, or by selecting text that has already been typed.
• Test the 3 types of insertion. Check HTML source code.
• Select an existing <abbr> (click on the abbreviation text), and change its description and/or type of insertion.
• Insert an abbreviation into text written in a right-to-left (RTL) language. (The abbreviation should then be automatically positioned according to the reading direction when inserted inline.)

Actual result BEFORE applying this Pull Request

• Only <abbr> insertion with a title attribute for description is available.

Expected result AFTER applying this Pull Request

• You have 3 ways to insert an <abbr> element.

Link to documentations

Please select:

• Documentation link for guide.joomla.org: https://guide.joomla.org/how-to-guides/using-abbr

• No documentation changes for guide.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed