From a14642b62adb4b73f023cb51860c4c3a527232f4 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 16 Nov 2021 09:19:49 -0500
Subject: [PATCH] don't guess labels

---
 src/components/icon/icon.ts | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts
index b17d8d75..e36362a7 100644
--- a/src/components/icon/icon.ts
+++ b/src/components/icon/icon.ts
@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { emit } from '../../internal/event';
 import { watch } from '../../internal/watch';
@@ -30,7 +31,7 @@ export default class SlIcon extends LitElement {
   /** An external URL of an SVG file. */
   @property() src: string;
 
-  /** An alternative description to use for accessibility. If omitted, the name or src will be used to generate it. */
+  /** An alternate description to use for accessibility. If omitted, the icon will be ignored by assistive devices. */
   @property() label: string;
 
   /** The name of a registered custom icon library. */
@@ -50,20 +51,6 @@ export default class SlIcon extends LitElement {
     unwatchIcon(this);
   }
 
-  getLabel() {
-    let label = '';
-
-    if (this.label) {
-      label = this.label;
-    } else if (this.name) {
-      label = this.name.replace(/-/g, ' ');
-    } else if (this.src) {
-      label = this.src.replace(/.*\//, '').replace(/-/g, ' ').replace(/\.svg/i, '');
-    }
-
-    return label;
-  }
-
   private getUrl(): string {
     const library = getIconLibrary(this.library);
     if (this.name && library) {
@@ -123,7 +110,17 @@ export default class SlIcon extends LitElement {
   }
 
   render() {
-    return html` <div part="base" class="icon" role="img" aria-label=${this.getLabel()}>${unsafeSVG(this.svg)}</div>`;
+    const hasLabel = typeof this.label === 'string' && this.label.length > 0;
+
+    return html` <div
+      part="base"
+      class="icon"
+      role=${ifDefined(hasLabel ? 'img' : undefined)}
+      aria-label=${ifDefined(hasLabel ? this.label : undefined)}
+      aria-hidden=${ifDefined(hasLabel ? undefined : 'true')}
+    >
+      ${unsafeSVG(this.svg)}
+    </div>`;
   }
 }