Claro removes default styling from abbreviations (<abbr> tag)

Created on 23 November 2023, over 1 year ago
Updated 19 September 2024, 7 months ago

Problem/Motivation

Claro removes text-decoration styling from <abbr> tags, so there is no visual indication that it's an abbreviation.

Screenshot is with Gin but same issue applies:

This is due to a CSS rule in claro/css/base/elements.css line 239 that sets the text decoration to none for abbreviations that have a title (abbr[title]). I think this is unintentional and would have to have a really good reason for removing the expected behavior of a dotted underline (however the effect is achieved). Seems that Claro and normalize.css might be tripping over each other here?

Steps to reproduce

Add an <abbr> tag to any content that is displayed in Claro. See there is no styling of the tag to indicate it is an abbreviation.
The title text <abbr title="My abbr title text">for this abbr</abbr> should appear on hover.

Proposed resolution

Remove the following rule from Claro's styles:

abbr[title] {
  -webkit-text-decoration: none;
  text-decoration: none;
}

Remaining tasks

There should be visual indication for

User interface changes

Abbreviations and acronyms are visibly hover-overable to get tooltip title with their expansion.

Before:

After:

API changes

None.

Data model changes

None.

Release notes snippet

🐛 Bug report
Status

Needs review

Version

11.0 🔥

Component
Claro 

Last updated 1 day ago

Created by

🇺🇸United States mlncn Minneapolis, MN, USA

Live updates comments and jobs are added and updated live.
  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024