`[aria-*]` attributes do not match their roles when using FA icons

I tested this patch on an environment that had previously been receiving the "`[aria-*]` attributes do not match their roles" error and confirm that this error went away once the patch was applied.

Steps to test:

• Discover the "`[aria-*]` attributes do not match their roles" error on a site during a Lighthouse scan (recreate the error).
• Download the patch attached to this issue and apply it using composer.
• Clear the cache, then re-run the Lighthouse scan on the offending page.
• Confirm that the error is no longer present on the site.

Thank you!

Checked related documentation for this. Removing aria-label will fix this issue, but information in that label is lost, and it is not used at all any more. So if we want to go this route then we should also remove extlink_label and extlink_mailto_label configurations.

Instead of this we can move aria-label to link wrapper, as suggested in section 'aria-label in links'.

Then for font icons we should use role="img" and aria-hidden="true" as suggested in 'Simple approach' and 'Visual but accessible icon' and Semantically identifying a font icon with role="img".

With this new approach the assistive technology browser will ignore the icon and will read the link like "link Drupal link is external".

Instead of moving aria-label to a link tag, we could also leave it in a span, add a new span and hide it with visually-hidden CSS rule. For me aria-label looks as a more elegant solution.

Here is a patch with a new approach.

Can the issue summary be updated using standard template.

Need an issue summary update to understand what's being fixed exactly.

Re-opening and did my best with issue summary. This is still an issue, and we have been using patch at #0 in production for a long time.

Added "Related WCAG success criteria and techniques" to issue description to provide context and clarity.

Updated patch from #4 against latest 2.0.x-dev. There were quite a few changes from 8.x-1.x-dev JS version of the code. I've also reused `drupalSettings.data.extlink.extHideIcons` option for aria-hidden value as the code is already doing it for embedded images.

Attaching also patch version for 2.0.0-beta1 version so we can use this with composer build easily.

Changes should be in MRs please

MR created.

smustgrave → closed merge request !34

Sorry, needs to reopen this because I introduced a small bug in previous MR. There is a double quote bug for a tel element on line 362:

iconElement.innerHTML = `<span class="${drupalSettings.data.extlink.extFaTelClasses}" data-extlink-placement="${iconPlacement}""></span>`;

New MR !35 should fix this.

Also attaching a updated patch for 2.0.0-beta1.

Automatically closed - issue fixed for 2 weeks with no activity.