UHF-X: Fix unsupported aria-attribute a11y problem

[Arkkimaagi]

UHF-X

• Siteimprove found a problem with our fallback iframe links. Aria-attribute aria-labelledby is not supported on non-interactive elements like span that we're using.
• We also have some situations where we do not have accessible link text available, and on these cases screen reader get no proper hint what the button does.

Where the problems appear:

Example of missing accessible text:

Notice how the screen reader sees only the external site text, but not the actual point of the link.

What was done

• The aria-labelledby was replaced with aria-hidden="true" and class="visually-hidden"-combination
• An check for the existence of the screenreader only text was added and it now has a fallback mode of regular link text instead of specific screenreader text.

How to install

• Make sure your SOTE 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-0000_insert_correct_branch
• Run make drush-cr

How to test

• Open this page on your local Sote instance
  • Check that screen reader text is rendered like this
• Open this page on your local Sote instance
  • Check that the missing screen reader text causes the link to be rendered without it, so that screen readers get a hint what the button does.
    
• 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/pull/941/html_report/

[teroelonen]

This is very nice 🦖