>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3631097. --> Reported by: [joshuaramaekers](https://www.drupal.org/user/1729132) Related to !72 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>When the <em>Additional Link CSS Classes</em>, <em>Additional MailTo CSS Classes</em> and <em>Additional Tel CSS Classes</em> settings are all filled in, mailto links end up with the classes of all three link types. Tel links are not affected.</p> <p>This makes it impossible to style external, mailto and tel links separately by their additional classes. For example, mailto links pick up the external link styling.</p> <p>There are two causes in <code>js/extlink.js</code>:</p> <ol> <li>The additional tel classes are applied to <code>mailtoLinks</code> instead of <code>telLinks</code>:<br> <pre><div class="codeblock"><code class="language-js">if (hasAdditionalTelClasses) {<br>&nbsp; Drupal.extlink.applyClassAndSpan(<br>&nbsp;&nbsp;&nbsp; mailtoLinks,<br>&nbsp;&nbsp;&nbsp; drupalSettings.data.extlink.extAdditionalTelClasses,<br>&nbsp;&nbsp;&nbsp; null,<br>&nbsp; );<br>} <li>The additional classes are applied in a second <code>applyClassAndSpan()</code> pass, with the additional class itself as <code>className</code>. In that pass <code>className</code> matches neither <code>mailtoClass</code> nor <code>telClass</code>, so the if/else chain in <code>applyClassAndSpan()</code> falls through to the last branch and adds the <em>Additional Link CSS Classes</em> as well:<br> <pre><div class="codeblock"><code class="language-js">} else if (drupalSettings.data.extlink.extAdditionalLinkClasses) {<br>&nbsp; // Is regular external link:<br>&nbsp; linksToProcess[i].classList.add(<br>&nbsp;&nbsp;&nbsp; drupalSettings.data.extlink.extAdditionalLinkClasses,<br>&nbsp; );<br>} <p>Tel links are only spared because of the first bug: they never get the second pass.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Go to <code>/admin/config/user-interface/extlink</code>.</li> <li>Set <em>Additional Link CSS Classes</em> to <code>external-link</code>, <em>Additional MailTo CSS Classes</em> to <code>mailto-link</code> and <em>Additional Tel CSS Classes</em> to <code>tel-link</code>, and enable <em>Place an icon next to image links</em>. Save.</li> <li>Create a page containing <code>&amp;lt;a href="mailto:test@example.com"&amp;gt;Mail&amp;lt;/a&amp;gt;</code> and <code>&amp;lt;a href="tel:0123456789"&amp;gt;Phone&amp;lt;/a&amp;gt;</code>.</li> <li>View the page and inspect both links.</li> </ol> <p><strong>Expected:</strong> the mailto link has <code>mailto mailto-link</code>, and the tel link has <code>tel tel-link</code>.</p> <p><strong>Actual:</strong> the mailto link has <code>mailto mailto-link external-link tel-link</code>, and the tel link has <code>tel tel-link</code>.</p> <p>Note: with <em>Place an icon next to image links</em> disabled, the bug is hidden. The icon appended in the first pass excludes the mailto/tel links from the additional classes pass. The bug also shows when the mailto/tel icons are disabled, since the links then have no icon.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <ul> <li>Pass <code>telLinks</code> instead of <code>mailtoLinks</code> when applying the additional tel classes.</li> <li>Only fall back to the <em>Additional Link CSS Classes</em> in <code>applyClassAndSpan()</code> when processing external links, i.e. when <code>className === 'ext'</code>. <code>Drupal.extlink.attach()</code> always passes <code>'ext'</code> for external links, regardless of the <em>extlink_class</em> setting.</li> </ul> <p>An alternative would be to drop the separate "additional classes" passes altogether, since the first pass already adds the additional mailto and tel classes through the if/else chain.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <ul> <li>Review the merge request.</li> <li>Add test coverage for the additional CSS classes per link type.</li> </ul> <h3 id="summary-ui-changes">User interface changes</h3> <p>None.</p> <h3 id="summary-api-changes">API changes</h3> <p>None.</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>None.</p> <p><em>AI was used in the drafting of this issue summary, to help review for clarity, clean up language, and check grammar.</em></p> </code></div></pre></li></code></div></pre></li></ol>