Issue #3275748 by pivica, randy Tang, penyaskito, morganlyndel, katannshaw:...

Issue #3275748 by pivica, randy Tang, penyaskito, morganlyndel, katannshaw: `[aria-*]` attributes do not match their roles when using FA icons

js/extlink.js

@@ -420,18 +420,25 @@
           iconElement = document.createElement('span');
           iconElement.setAttribute('class', `fa-${className} extlink`);
           if (className === drupalSettings.data.extlink.mailtoClass) {
-            iconElement.innerHTML = `<span class="${drupalSettings.data.extlink.extFaMailtoClasses}" data-extlink-placement="${iconPlacement}" aria-label="${drupalSettings.data.extlink.mailtoLabel}"></span>`;
+            if (drupalSettings.data.extlink.mailtoLabel) {
+              link.ariaLabel = drupalSettings.data.extlink.mailtoLabel;
+            }
+            iconElement.innerHTML = `<span class="${drupalSettings.data.extlink.extFaMailtoClasses}" data-extlink-placement="${iconPlacement}"></span>`;
           } else if (className === drupalSettings.data.extlink.extClass) {
-            iconElement.innerHTML = `<span class="${drupalSettings.data.extlink.extFaLinkClasses}" data-extlink-placement="${iconPlacement}" aria-label="${drupalSettings.data.extlink.extLabel}"></span>`;
+            if (drupalSettings.data.extlink.extLabel) {
+              link.ariaLabel = drupalSettings.data.extlink.extLabel;
+            }
+            iconElement.innerHTML = `<span class="${drupalSettings.data.extlink.extFaLinkClasses}" data-extlink-placement="${iconPlacement}"></span>`;
           } else if (className === drupalSettings.data.extlink.telClass) {
-            iconElement.innerHTML = `<span class="${drupalSettings.data.extlink.extFaTelClasses}" data-extlink-placement="${iconPlacement}" aria-label="${drupalSettings.data.extlink.telLabel}"></span>`;
+            if (drupalSettings.data.extlink.telLabel) {
+              link.ariaLabel = drupalSettings.data.extlink.telLabel;
+            }
+            iconElement.innerHTML = `<span class="${drupalSettings.data.extlink.extFaTelClasses}" data-extlink-placement="${iconPlacement}""></span>`;
           }
         } else {
           iconElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
           iconElement.setAttribute('focusable', 'false');
           iconElement.classList.add(className);
-          iconElement.setAttribute('role', 'img');
-          iconElement.setAttribute('aria-hidden', drupalSettings.data.extlink.extHideIcons);
           iconElement.setAttribute('data-extlink-placement', iconPlacement);
           if (className === drupalSettings.data.extlink.mailtoClass) {
             iconElement.setAttribute('aria-label', drupalSettings.data.extlink.mailtoLabel);
@@ -447,6 +454,8 @@
             iconElement.innerHTML = `<metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><sliceSourceBounds y="-8160" x="-8165" width="16389" height="16384" bottomLeftOrigin="true"/><optimizationSettings><targetSettings targetSettingsID="0" fileFormat="PNG24Format"><PNG24Format transparency="true" filtered="false" interlaced="false" noMatteColor="false" matteColor="#FFFFFF"/></targetSettings></optimizationSettings></sfw></metadata><title>${drupalSettings.data.extlink.telLabel}</title><path xmlns="http://www.w3.org/2000/svg"  d="M169.393,167.37l-14.919,9.848c-9.604,6.614-50.531,14.049-106.211-53.404     C-5.415,58.873,9.934,22.86,17.134,14.555L29.523,1.678c2.921-2.491,7.328-2.198,9.839,0.811l32.583,38.543l0.02,0.02     c2.384,2.824,2.306,7.22-0.83,9.868v0.029l-14.44,10.415c-5.716,5.667-0.733,14.587,5.11,23.204l27.786,32.808     c12.926,12.477,20.009,18.241,26.194,14.118l12.008-13.395c2.941-2.472,7.328-2.169,9.839,0.821l32.603,38.543v0.02     C172.607,160.316,172.519,164.703,169.393,167.37z"/>`;
           }
         }
+        iconElement.setAttribute('role', 'img');
+        iconElement.setAttribute('aria-hidden', drupalSettings.data.extlink.extHideIcons);
         link[iconPlacement](iconElement);
       }
     }