Consider removing title attributes from Classic Editor scripts

[sabernhardt]

Related: #24766

The WordPress script adds title attributes to the placeholder images for style, script, More and Next Page tags.

• The ​More tag and ​Next Page tag have an empty alt but use a title attribute (like alt="" title="Read more..."). The title text theoretically could be assigned as the alt, though the tooltip could help in cases of low color contrast.
• The ​WP_More command has a similar pattern for More and Next Page tags, but I did not find how—or if—that is used.
• ​Style and script tags have redundant title attributes, matching their alt text (like alt="<style>" title="<style>"). However, the tooltip is the only way to distinguish these two placeholders visually (unless it's worth replacing the transparent GIF with something like a ​text-based SVG).

Additional title attributes are in other (external) TinyMCE-related scripts:

• The ​character map plugin, which is designed for mouse users, has two title attributes for each character. The script ​uses the `td` title later for the larger preview on the side. Switching each 'button' div's title to an ARIA label might be a small improvement. (Note that the ​latest charmap plugin does not have titles anymore.)
• form_utils.js has tooltips in ​getColorPickerHTML() and ​getBrowserHTML(), but I did not find these two functions in use.
• The ​text color picker uses tooltips for each color name, without actual text (except for the × times symbol for 'No color').

[sabernhardt]

placeholder images, showing the style tag tooltip, with Twenty Twenty's default background color

[sabernhardt]

placeholder images, with a black background color

[sabernhardt]

This is what I entered in the Classic Editor's Text mode (now "Code" tab) to get the placeholder images (screenshots use WordPress 6.7.1).

More tag

<!--more-->

More tag with custom text

<!--more More tag with custom text-->

Page break tag

<!--nextpage-->

Style tag

<style>.style{}</style>

Script tag

<script>console.log('<script>');</script>

[sabernhardt]

As discussed in today's bug scrub, this ticket should focus on only the wordpress/plugin.js placeholder images. Any revision or replacement for the external plugins could have its own ticket.

Trac ticket: 62861

Removes redundant title attributes from Classic Editor placeholder images and moves tooltip text to alt attributes for better accessibility.

The Classic Editor uses placeholder images for special elements (More tag, Next Page tag, Style/Script tags). Currently:

More/Next Page tags have empty alt but use the title for tooltips
Style/Script tags have redundant title attributes that duplicate their alt text

This causes accessibility issues as:

Screen readers may handle title attributes inconsistently
Empty alt attributes with title text don't follow accessibility best practices
Redundant attributes create unnecessary duplication

This PR:

Moved tooltip text from title to alt for More and Next Page tags
Removed redundant title attributes from Style/Script tag placeholders
Maintained all existing functionality and visual indicators through CSS classes

[abcd95]

Hi @sabernhardt, Thanks for raising this.

I have created a PR in an attempt to fix this, please take a look at your convenience and let me know if it tests well for you.

[joedolson]

The PR tests fine; but I'm bothered by the fact that there's no distinction between the script img and the style image for sighted users now. The title attribute only provided assistance for some use cases, but it was *something*.

If we added CSS generated content on the placeholder wrapper or override the background image on .mce-object we might be able to improve this. But I think being able to see that the replacement is for a style or a script tag is necessary.

[sabernhardt]

I gave suggestions on the PR to override the background image for the style and script. Pseudo-elements do not work with images, and my earlier suggestion of a text-based SVG could be significantly larger than 20 by 20 pixels.

[joedolson]

I was suggestion a pseudo-element on the wrapper around the image, for what it's worth; but will look at the PR suggestions. A larger image would definitely be desirable.

[sabernhardt]

The mce-object images do not have a wrapper.

If some ​20-by-20 images are good enough, they would be least disruptive. If the new images are wider than they are tall, they would need to ​enforce the height because wp-content.css and some themes set img height to auto in the editor (​Twenty Twenty uses high specificity).

Hey @sabernhardt, Thanks for reviewing the PR.

Now that the changes look good to you, shall I go ahead and make the changes in the other places as you suggested in the ticket 62861?

shall I go ahead and make the changes in the other places...?

No, leave the external libraries as they are.

[joedolson]

This is looking and testing well; I think it's good to go.

[joedolson]

In 60007:

TinyMCE: A11y: Remove title attributes and improve placeholders.

Shifts the title attribute on more and page-break placeholder images to alt, moves the title attribute to alt on the style and script placeholders and replaces the images to differentiate between CSS and JS content.

Props sabernhardt, abcd95, joedolson.
Fixes #62861.

Merged in the Changeset [60007]