Problem/Motivation

In gin if you have a page title overflow the line, than you get get an Accessibility-Issue (SC 1.4.12: Text Spacing - Level AA). Because the title is getting cut off and cannot be accessed in full length in any way.

See: https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html#use-of-ell...

Steps to reproduce

Go in the backend and go to a page with a very long page title.
(In our case happening in commerce environment if cancelling a subcription - the title is getting cutt off).

Proposed resolution

The proposed solution is to discuss:

- Add a possibility to access the full title (e.g. via accessible tooltip) or to remove the ellipse behavior:

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

to:

  white-space: normal;

https://git.drupalcode.org/project/gin/-/blob/5.0.x/styles/base/_title.scss

Issue fork gin-3570087

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

joville created an issue. See original summary.

yashaswi18’s picture

yashaswi18 commented

Thanks for raising this! Long titles being truncated with ellipses can be an accessibility issue (WCAG 2.2 SC 1.4.12), but in some projects the ellipsis may be intentional to preserve layout.

A possible solution could be showing the full title when the user clicks on the ellipsis itself (accessible tooltip or expandable element), or providing a theme setting to allow wrapping. This keeps the design intact while improving accessibility.

Would love to hear your thoughts on this approach.

joville’s picture

joville commented

@yashaswi18

Thanks for your answer! A tooltip would be the most feasible solution there, because wrapping would destroy the design, was I found it out later.

yashaswi18 opened merge request !766

yashaswi18’s picture

yashaswi18 commented
Status: Active » Needs review
joville’s picture

joville commented

@yashaswi18

The title attribute is not an accessibility technique anymore, because this also not a tooltip in an accessible way. The problem: the tooltip itself is not controllable by the user (keeping the tooltip open and close it at the time wanted). Therefore this way is not feasible!

mgifford’s picture

mgifford
he/him
Primary language English
commented

Tooltips are a bit of a known problem in accessibility, most folks just assume if it is supported in HTML it is good to go. Sadly, this is not the case as is pointed out here.

I have some alternate practices which I've put together here (with other examples)
https://mgifford.github.io/ACCESSIBILITY.md/examples/TOOLTIP_ACCESSIBILI...

@joville how does this functionality compare with Core? Should we bring the pattern you suggest up so that it affects all themes (with titles that are too long).