feat(cc-icon): deprecate accessible-name in favor of a11y-name

Fixes #893
CleverCloud · Nov 29, 2023 · 2b573fd · 2b573fd
1 parent beed80f
commit 2b573fd
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/src/components/cc-icon/cc-icon.js b/src/components/cc-icon/cc-icon.js
@@ -12,7 +12,7 @@ import { skeletonStyles } from '../../styles/skeleton.js';
  *
  * **Accessibility guidelines:**
  *
- * Use the `accessible-name` prop only if your icon provides information that is not already given in its surrounding text.
+ * Use the `a11y-name` prop only if your icon provides information that is not already given in its surrounding text.
  *
  * If this prop has a value:
  *
@@ -32,6 +32,7 @@ export class CcIcon extends LitElement {
   static get properties () {
     return {
       accessibleName: { type: String, attribute: 'accessible-name' },
+      a11yName: { type: String, attribute: 'a11y-name' },
       icon: { type: Object },
       size: { type: String, reflect: true },
       skeleton: { type: Boolean },
@@ -52,7 +53,7 @@ export class CcIcon extends LitElement {
      *
      * If this prop has no value, sets an `aria-hidden="true"` attribute on the `<svg>` element so that it can be ignored by assistive technologies.
      */
-    this.accessibleName = null;
+    this.a11yName = null;
 
     /** @type {IconModel|null} Icon to be rendered */
     this.icon = null;
@@ -64,26 +65,38 @@ export class CcIcon extends LitElement {
     this.skeleton = false;
   }
 
+  get accessibleName () {
+    return this.a11yName;
+  }
+
+  /**
+   * Deprecated property. Use `a11yName` property or `a11y-name` attribute instead.
+   * @deprecated
+   */
+  set accessibleName (value) {
+    this.a11yName = value;
+  }
+
   updated (changedProperties) {
-    const shouldPatchSvg = changedProperties.has('accessibleName') || changedProperties.has('icon');
+    const shouldPatchSvg = changedProperties.has('a11yName') || changedProperties.has('icon');
     const svg = this.shadowRoot.querySelector('svg');
     if (shouldPatchSvg && svg != null) {
-      if (this.accessibleName == null || this.accessibleName === '') {
+      if (this.a11yName == null || this.a11yName === '') {
         svg.setAttribute('aria-hidden', 'true');
         svg.removeAttribute('aria-label');
         svg.removeAttribute('role');
         svg.querySelector('title')?.remove();
       }
       else {
         svg.removeAttribute('aria-hidden');
-        svg.setAttribute('aria-label', this.accessibleName);
+        svg.setAttribute('aria-label', this.a11yName);
         svg.setAttribute('role', 'img');
         let title = svg.querySelector('title');
         if (title == null) {
           title = document.createElement('title');
           svg.prepend(title);
         }
-        title.textContent = this.accessibleName;
+        title.textContent = this.a11yName;
       }
     }
   }

diff --git a/src/components/cc-icon/cc-icon.stories.js b/src/components/cc-icon/cc-icon.stories.js
@@ -7,6 +7,7 @@ import {
   iconRemixErrorWarningFill as iconWarning,
 } from '../../assets/cc-remix.icons.js';
 import './cc-icon.js';
+import '../cc-notice/cc-notice.js';
 import { makeStory } from '../../stories/lib/make-story.js';
 import { enhanceStoriesNames } from '../../stories/lib/story-names.js';
 
@@ -50,11 +51,24 @@ export const color = makeStory(conf, {
   ],
 });
 export const accessibleName = makeStory(conf, {
+  css: `
+    div {
+      margin-top: 2em;
+      margin-bottom: 0.5em;
+    }
+  `,
   dom: (container) => {
     const storyOutput = html`
+        <cc-notice intent="warning"><span slot="message">The <code>accessible-name</code> attribute is deprecated in favor of <code>a11y-name</code></span></cc-notice>
         <p>The accessible name can be checked by using the accessibility inspector of your browser.</p>
+
+        <div>With <code>accessible-name</code> attribute:</div>
         <cc-icon .icon="${iconSuccess}" size="xl" accessible-name="Success"></cc-icon>
         <cc-icon .icon="${iconWarning}" size="xl" accessible-name="Warning"></cc-icon>
+
+        <div>With <code>a11y-name</code> attribute:</div>
+        <cc-icon .icon="${iconSuccess}" size="xl" a11y-name="Success"></cc-icon>
+        <cc-icon .icon="${iconWarning}" size="xl" a11y-name="Warning"></cc-icon>
     `;
     render(storyOutput, container);
   },