Skip to content

22 · Social menu links: aria-label is empty after "Follow us on" and not translatable
Project Mercury (and themes generated from it: Haven, Byte, Everbright, Forma, Event Horizon)
Component Templates / accessibility
Category Bug report
Priority Normal
Status Reported upstream as #3592162

Problem/Motivation

templates/navigation/menu--social.html.twig, line 28:

aria-label="Follow us on {{ item.title|striptags|trim }}"
  1. Accessibility: item.title is already the SVG icon (aria-hidden); striptags yields an empty string. Screen readers announce only "Follow us on" – without the network, identical for all links.
  2. Translation: the text is not passed through |t.

Steps to reproduce

  1. Install Drupal CMS with Haven.
  2. Inspect a social link in the footer: aria-label="Follow us on ".

Proposed resolution

aria-label="{{ 'Follow us on @network'|t({'@network': item.original_link.getTitle()|striptags|trim}) }}"

(Morphos already uses item.original_link.getTitle().)

Additional information

Verified with the German installer's workaround: the DOM shows "Folgen Sie uns auf LinkedIn".

Copy to drupal.org

Issue title:

Social menu links: aria-label is empty after "Follow us on" and not translatable

Issue summary (paste it into the "Issue summary" field; project, component, category and priority are in the table above):

<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p><code>templates/navigation/menu--social.html.twig</code>, line 28:</p>
<code>aria-label="Follow us on {{ item.title|striptags|trim }}"</code>
<ol>
<li><strong>Accessibility:</strong> <code>item.title</code> is already the SVG icon (<code>aria-hidden</code>); <code>striptags</code> yields an empty string. Screen readers announce only "Follow us on" – without the network, identical for all links.</li>
<li><strong>Translation:</strong> the text is not passed through <code>|t</code>.</li>
</ol>
<h3 id="summary-steps-reproduce">Steps to reproduce</h3>
<ol>
<li>Install Drupal CMS with Haven.</li>
<li>Inspect a social link in the footer: <code>aria-label="Follow us on "</code>.</li>
</ol>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<code>aria-label="{{ 'Follow us on @network'|t({'@network': item.original_link.getTitle()|striptags|trim}) }}"</code>
<p>(Morphos already uses <code>item.original_link.getTitle()</code>.)</p>
<h3>Additional information</h3>
<p>Verified with the German installer's workaround: the DOM shows "Folgen Sie uns auf LinkedIn".</p>