UHF-10907 external icon

[Arkkimaagi]

UHF-10907

• Our external link icons are arrows, not arrow out of box, this can confuse some users accessibilitywise
• Arabic buttons have broken hover state
• Ckeditor does not have link animations but has button animations

What was done

• All of the above were fixed

How to install

• Make sure your Etusivu instance is up and running on latest dev branch.
  • git pull origin dev
  • make fresh
• Update the HDBT theme
  • composer require drupal/hdbt:dev-UHF-10907_external_icon
• Run make drush-cr

How to test

Create a page with text-paragraph and this content both in a main language and arabic:

<figure class="table" tabindex="0">
  <table>
    <tbody>
      <tr>
        <td>Linkki</td>
        <td>Taustavärillinen</td>
        <td>Kehystetty</td>
        <td>Korostettu</td>
      </tr>
      <tr>
        <td><a href="/">Linkki</a></td>
        <td><a href="/" data-hds-component="button">Linkki</a></td>
        <td><a href="/" data-hds-variant="secondary" data-hds-component="button">Linkki</a></td>
        <td><a href="/" data-hds-variant="supplementary" data-hds-component="button">Linkki</a></td>
      </tr>
      <tr>
        <td><a data-is-external="true" href="https://suomi.fi">External</a></td>
        <td><a data-is-external="true" href="https://suomi.fi" data-hds-component="button">External</a></td>
        <td><a data-is-external="true" href="https://suomi.fi" data-hds-variant="secondary" data-hds-component="button">External</a></td>
        <td><a data-is-external="true" href="https://suomi.fi" data-hds-variant="supplementary" data-hds-component="button">External</a></td>
      </tr>
      <tr>
        <td><a data-protocol="mailto" href="mailto:[email protected]">Email</a></td>
        <td><a data-protocol="mailto" href="mailto:[email protected]" data-hds-component="button">Email</a></td>
        <td><a data-protocol="mailto" href="mailto:[email protected]" data-hds-variant="secondary" data-hds-component="button">Email</a></td>
        <td><a data-protocol="mailto" href="mailto:[email protected]" data-hds-variant="supplementary" data-hds-component="button">Email</a></td>
      </tr>
      <tr>
        <td><a data-protocol="tel" href="tel:050123456">Tel</a></td>
        <td><a data-protocol="tel" href="tel:050123456" data-hds-component="button">Tel</a></td>
        <td><a data-protocol="tel" href="tel:050123456" data-hds-variant="secondary" data-hds-component="button">Tel</a></td>
        <td><a data-protocol="tel" href="tel:050123456" data-hds-variant="supplementary" data-hds-component="button">Tel</a></td>
      </tr>
      <tr>
        <td>-</td>
        <td><a href="/" data-hds-icon-start="alert-circle" data-hds-component="button">Linkki</a></td>
        <td><a href="/" data-hds-icon-start="alert-circle" data-hds-variant="secondary" data-hds-component="button">Linkki</a></td>
        <td><a href="/" data-hds-icon-start="alert-circle" data-hds-variant="supplementary" data-hds-component="button">Linkki</a></td>
      </tr>
      <tr>
        <td>-</td>
        <td><a data-is-external="true" href="https://suomi.fi" data-hds-icon-start="alert-circle" data-hds-component="button">External</a></td>
        <td><a data-is-external="true" href="https://suomi.fi" data-hds-icon-start="alert-circle" data-hds-variant="secondary" data-hds-component="button">External</a></td>
        <td><a data-is-external="true" href="https://suomi.fi" data-hds-icon-start="alert-circle" data-hds-variant="supplementary" data-hds-component="button">External</a></td>
      </tr>
      <tr>
        <td>-</td>
        <td><a data-protocol="mailto" href="mailto:[email protected]" data-hds-icon-start="alert-circle" data-hds-component="button">Email</a></td>
        <td><a data-protocol="mailto" href="mailto:[email protected]" data-hds-icon-start="alert-circle" data-hds-variant="secondary" data-hds-component="button">Email</a></td>
        <td><a data-protocol="mailto" href="mailto:[email protected]" data-hds-icon-start="alert-circle" data-hds-variant="supplementary" data-hds-component="button">Email</a></td>
      </tr>
      <tr>
        <td>-</td>
        <td><a data-protocol="tel" href="tel:050123456" data-hds-icon-start="alert-circle" data-hds-component="button">Tel</a></td>
        <td><a data-protocol="tel" href="tel:050123456" data-hds-icon-start="alert-circle" data-hds-variant="secondary" data-hds-component="button">Tel</a></td>
        <td><a data-protocol="tel" href="tel:050123456" data-hds-icon-start="alert-circle" data-hds-variant="supplementary" data-hds-component="button">Tel</a></td>
      </tr>
    </tbody>
  </table>
</figure>

• Check that external link and button icons work.
  • Check all the external links you can find on site, I may have missed some.
  • Check that ckeditor icon animations work for buttons and links
  • Check also arabic language, icons are on wrong side in arabic, but otherwise animate and look better than previously
• Check that code follows our standards

Continuous documentation

• This feature has been documented/the documentation has been updated
• This change doesn't require updates to the documentation

[github-actions]

⚠️ Visual regression found! Please check if this change is wanted or accidental. You can check the output here: https://city-of-helsinki.github.io/drupal-hdbt-visual-regression/pull/1141/html_report/

[juho-lehmonen]

Looks good!