Set aria-hidden if no label has been set

umbraco · Oct 14, 2023 · 8bdfbec · 8bdfbec
1 parent fc61c8b
commit 8bdfbec
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/packages/uui-icon/lib/uui-icon.element.ts b/packages/uui-icon/lib/uui-icon.element.ts
@@ -43,6 +43,15 @@ export class UUIIconElement extends LitElement {
   @state()
   private _nameSvg: string | null = null;
 
+  /**
+   * An alternate description to use for assistive devices.
+   * If omitted, the icon will be considered presentational and ignored by assistive devices.
+   * @type {string}
+   * @attr
+   * @default
+   */
+  @property() label = '';
+
   /**
    * Icon name is used to retrieve the icon from a parent Icon Registry.
    * If no Icon Registry responds to the given name, the fallback svg will be used.
@@ -60,6 +69,7 @@ export class UUIIconElement extends LitElement {
       this.requestIcon();
     }
   }
+
   private requestIcon() {
     if (this._name !== '' && this._name !== null) {
       const event = new UUIIconRequestEvent(UUIIconRequestEvent.ICON_REQUEST, {
@@ -116,6 +126,19 @@ export class UUIIconElement extends LitElement {
     if (this._retrievedNameIcon === false) {
       this.requestIcon();
     }
+
+    const hasLabel = typeof this.label === 'string' && this.label.length > 0;
+
+    if (hasLabel) {
+      this.setAttribute('role', 'img');
+      this.setAttribute('aria-label', this.label);
+      this.removeAttribute('aria-hidden');
+    } else {
+      this.removeAttribute('role');
+      this.removeAttribute('aria-label');
+      this.setAttribute('aria-hidden', 'true');
+    }
+
   }
 
   render() {