From 4dd8bfb99a3d9eedecc1ea157f2cdf79509ae8f9 Mon Sep 17 00:00:00 2001
From: Brent Swisher <brent.swisher@ithaka.org>
Date: Mon, 27 Nov 2023 15:27:05 -0500
Subject: [PATCH] feat(icon): use a11y-title instead of a11y-label

The most accesssible way to label an svg icon is to use a title
element in the svg itself. This is better than using aria-label
which should be reserved for cases where an accessible name can
not be derived. See this page for more details:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title
---
 packages/pharos/src/components/icon/pharos-icon.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/pharos/src/components/icon/pharos-icon.ts b/packages/pharos/src/components/icon/pharos-icon.ts
index 1897852e0..572b554e0 100644
--- a/packages/pharos/src/components/icon/pharos-icon.ts
+++ b/packages/pharos/src/components/icon/pharos-icon.ts
@@ -36,11 +36,11 @@ export class PharosIcon extends PharosElement {
   public description = '';
 
   /**
-   * Indicates the aria-label to apply to the icon.
-   * @attr a11y-label
+   * Indicates the svg title to apply to the icon.
+   * @attr a11y-title
    */
-  @property({ type: String, reflect: true, attribute: 'a11y-label' })
-  public a11yLabel?: string;
+  @property({ type: String, reflect: true, attribute: 'a11y-title' })
+  public a11yTitle?: string;
 
   /**
    * Indicates whether the icon should be hidden from assistive technology.
@@ -57,7 +57,7 @@ export class PharosIcon extends PharosElement {
     super.update && super.update(changedProperties);
     if (this.description.length) {
       console.warn(
-        "The 'description' attribute of pharos-icon is deprecated and will be removed in the next major release. Please use a11y-label or mark the icon as descriptive by using a11y-hidden instead."
+        "The 'description' attribute of pharos-icon is deprecated and will be removed in the next major release. Please use a11y-title or mark the icon as descriptive by using a11y-hidden instead."
       );
     }
   }
@@ -84,7 +84,7 @@ export class PharosIcon extends PharosElement {
 
   protected override render(): TemplateResult {
     const size = this._getIconSize();
-    const accessiblityLabel = this.a11yLabel ?? this.description;
+    const accessibilityLabel = this.a11yTitle ?? this.description;
     return html`
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -93,11 +93,11 @@ export class PharosIcon extends PharosElement {
         class="icon"
         role="img"
         aria-hidden=${this.a11yHidden || this.description === ''}
-        aria-label=${accessiblityLabel}
         height="${size}"
         width="${size}"
         focusable="false"
       >
+        <title>${accessibilityLabel}</title>
         ${unsafeSVG(this._svg)}
       </svg>
     `;