Additional Tel CSS Classes are applied to mailto links, and mailto/tel links also receive the Additional Link CSS Classes

Problem/Motivation

When the Additional Link CSS Classes, Additional MailTo CSS Classes and Additional Tel CSS Classes settings are all filled in, mailto links end up with the classes of all three link types. Tel links are not affected.

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.

There are two causes in js/extlink.js:

1. The additional tel classes are applied to mailtoLinks instead of telLinks:
   

   if (hasAdditionalTelClasses) {
     Drupal.extlink.applyClassAndSpan(
       mailtoLinks,
       drupalSettings.data.extlink.extAdditionalTelClasses,
       null,
     );
   }

2. The additional classes are applied in a second applyClassAndSpan() pass, with the additional class itself as className. In that pass className matches neither mailtoClass nor telClass, so the if/else chain in applyClassAndSpan() falls through to the last branch and adds the Additional Link CSS Classes as well:
   

   } else if (drupalSettings.data.extlink.extAdditionalLinkClasses) {
     // Is regular external link:
     linksToProcess[i].classList.add(
       drupalSettings.data.extlink.extAdditionalLinkClasses,
     );
   }

Tel links are only spared because of the first bug: they never get the second pass.

Steps to reproduce

1. Go to /admin/config/user-interface/extlink.
2. Set Additional Link CSS Classes to external-link, Additional MailTo CSS Classes to mailto-link and Additional Tel CSS Classes to tel-link, and enable Place an icon next to image links. Save.
3. Create a page containing <a href="mailto:test@example.com">Mail</a> and <a href="tel:0123456789">Phone</a>.
4. View the page and inspect both links.

Expected: the mailto link has mailto mailto-link, and the tel link has tel tel-link.

Actual: the mailto link has mailto mailto-link external-link tel-link, and the tel link has tel tel-link.

Note: with Place an icon next to image links 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.

Proposed resolution

• Pass telLinks instead of mailtoLinks when applying the additional tel classes.
• Only fall back to the Additional Link CSS Classes in applyClassAndSpan() when processing external links, i.e. when className === 'ext'. Drupal.extlink.attach() always passes 'ext' for external links, regardless of the extlink_class setting.

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.

Remaining tasks

• Review the merge request.
• Add test coverage for the additional CSS classes per link type.

User interface changes

None.

API changes

None.

Data model changes

None.

AI was used in the drafting of this issue summary, to help review for clarity, clean up language, and check grammar.