Remove redundant title attributes from Classic Editor placeholders

[himanshupathak95]

Trac ticket: 62861

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

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

• 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

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props abcd95, joedolson, sabernhardt.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[sabernhardt]

Thanks for starting this PR.

To make a visual distinction between the style and script placeholders, you could:

1. Add small style.png and script.png images to the src\js\_enqueues\vendor\tinymce\skins\wordpress\images directory.
2. Add styles to src\js\_enqueues\vendor\tinymce\skins\wordpress\wp-content.css, probably after .mce-content-body img[data-wp-more="nextpage"].

.mce-content-body img.mce-object-style {
	background-image: url( images/style.png );
}

.mce-content-body img.mce-object-script {
	background-image: url( images/script.png );
}

3. Add an extra class to the placeholder images.

Suggested change

	'class="mce-object" ' +
	'class="mce-object mce-object-' + tag + '" ' +

---

I made these simple images with "CSS" and "JS" (in Trebuchet MS font) at 20 by 20 pixels, if you would like to use them.

• style.png
• script.png

[sabernhardt]

Or a similar design in vector format:

• style.svg
• script.svg

.mce-object-style {
	background-image: url( images/style.svg );
}

.mce-object-script {
	background-image: url( images/script.svg );
}

[himanshupathak95]

Thanks @sabernhardt for the suggestions.

I have used SVGs for the images and addressed all the changes in the latest commit.

[himanshupathak95]

[himanshupathak95]

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?

[sabernhardt]

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

No, leave the external libraries as they are.

[himanshupathak95]

Merged in the Changeset [60007]