Fix title for target blank link/button

Created on 26 October 2023, over 1 year ago
Updated 15 December 2023, about 1 year ago

Problem/Motivation

When using a link or button pattern, if the URL is external, there is automatically a target="_blank" attribute, and a title="@title - new window".
However, this title handles only the initial "title" given : if no title had been given, it renders title=" - new window", which is not OK for accessibility.
In that case, it should reuse the link text, in order to render something like title="My link text - new window".

Proposed resolution

Add a condition on title : use label if title is empty.

🐛 Bug report
Status

Closed: won't fix

Version

1.0

Component

Code

Created by

🇫🇷France mh_nichts

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @mh_nichts
  • Assigned to shiv_yadav
  • Issue was unassigned.
  • Status changed to Needs review over 1 year ago
  • 🇦🇷Argentina tguerineau

    Hi,

    I've addressed the issue where external links with a target="_blank" attribute that didn't have a provided title were rendering the title attribute as " - new window". This was identified as a potential accessibility concern.

    Changes Made:

    1- Modified the pattern-link.html.twig template to check if a title is set for the link.
    2- If the title isn't set, the visible link text (label) is used as the title.

    I've attached a patch which contains these changes.

    Please review the attached patch and let me know if there are any concerns or additional changes needed.

  • 🇦🇷Argentina tguerineau

    I realized I missed addressing the button pattern in the initial patch. This updated patch now encompasses changes for both the link and button patterns as originally mentioned in the issue.

    In this update:

    - Added adjustments to pattern-button.html.twig using {% set title = title|default(label) %}.
    - Retained the link pattern modifications from the previous patch.

    Kindly review, and I apologize for the oversight in the initial patch. Thank you!

  • Status changed to Needs work over 1 year ago
  • 🇫🇷France pdureau Paris

    Thanks a lot

    Can you do a MR instead of patch?

  • 🇦🇷Argentina tguerineau

    Certainly!

    I've created a Merge Request (MR) with the changes.

    Let me know if there's anything else needed. Thank you!

  • Status changed to Needs review over 1 year ago
  • Status changed to Needs work over 1 year ago
  • 🇫🇷France pdureau Paris

    I see your commit: https://git.drupalcode.org/issue/ui_suite_dsfr-3396955/-/commit/a1448841...

    It looks great but I don't find the MR (and I don't know how to create it myself. I guess you have to create it).

  • @tguerineau opened merge request.
  • Status changed to Needs review over 1 year ago
  • 🇦🇷Argentina tguerineau

    Thank you for your feedback!

    My apologies for the oversight. I've now created the MR. You can review and merge it. Appreciate your patience!

  • Assigned to pdureau
  • 🇫🇷France pdureau Paris

    Thanks for the MR.

    I have to apologies too ;) I told you the change "looks great" 2 days ago, but I now see an issue.

    When you do:

    {% set title = title|default(label) %}

    Title is a text prop (textfield setting) but label is a slot (can host any renderable).

    I will have a deeper look

  • 🇦🇷Argentina tguerineau

    Hi @pdureau, thank you for pointing that out. I overlooked the distinction between title as a text property and label as a more complex renderable slot. Please let me know the findings of your deeper look, and I'll be ready to make necessary adjustments. Appreciate the thorough review!

  • Issue was unassigned.
  • Status changed to Postponed over 1 year ago
  • 🇫🇷France pdureau Paris

    Hello Tom'as,

    We may do something like that:

    {% set title = title|default(label|render|striptags) %}

    But I am not conformable with such a trick.

    All the "magic" of the render API is based on the late rendering, and it is common to consider premature rendering as a bad practice. Also, AFAIK, render filter is only accepting render arrays and we have to consider the eventuality some printable scalars are sometimes sent.

    Do we cancel this change?

  • Status changed to Closed: won't fix about 1 year ago
Production build 0.71.5 2024