Making WordPress.org

Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#4473 closed defect (bug) (fixed)

Glossary tooltips break HTML markup

Reported by: sergeybiryukov's profile SergeyBiryukov Owned by:
Milestone: Priority: normal
Component: Make (Get Involved) / P2 Keywords: has-screenshots
Cc:

Description

On https://make.wordpress.org/polyglots/teams/, there's this part of a sentence:

...or contact the translation editor(s) for your language using the “Team” link.

The new glossary tooltips interfere with the page, causing invalid markup and display issues:

or contact the <span tabindex='0' class='glossary-item-container'>translation editor<span class='glossary-item-hidden-content'><span class='glossary-item-header'>Translation Editor</span> <span class='glossary-item-description'>Translation editors can approve translations for projects. The GTE (General Translation Editor) and LM (Locale Manager) roles can add new users with the "Project Translation Editor" role that can approve translations for specific projects.
<br />
<br />There are two different Translation Editor roles, see:
<br /><ul>
<br /> 	<li><a href="#general-translation-editor">General Translation Editor</a></li>
<br /> 	<li><a href="#project-translation-editor">Project Translation Editor</a></li>
<br /></ul><br><a href="https://make.wordpress.org/polyglots/wp-admin/post.php?post=5951&amp;action=edit">Edit Entry</a></span></span></span>(s) for your language using the “Team” link.

Three issues here:

  • <ul> inside <span> is invalid.
  • <br /> outside of <li> is invalid.
  • Extra text is displayed on the page, instead of being in a tooltip.

The same issue appears in the Polyglots glossary itself.

See the screenshots. Tested in the latest Google Chrome and Microsoft Edge on Windows 10.

Attachments (2)

4473.translation-teams.png (21.8 KB) - added by SergeyBiryukov 6 years ago.
4473.glossary.png (19.7 KB) - added by SergeyBiryukov 6 years ago.

Download all attachments as: .zip

Change History (5)

#1 @tellyworth
6 years ago

Thanks for pointing this out.

Some possible approaches to fixing this:

  • Use a block-level element instead of span for the tooltip content
  • Simplify or strip tags from the content before generating the tooltip
  • (as a temporary workaround) Manually edit the glossary entry so it doesn't include a ul/li

#2 @tellyworth
6 years ago

  • Resolution set to fixed
  • Status changed from new to closed

I went with the middle option, running a more restrictive kses when rendering the tooltip content. See https://plugins.trac.wordpress.org/changeset/2095178

Note: See TracTickets for help on using tickets.