From cef58390a517753a9767c2adea9f9afee5524cef Mon Sep 17 00:00:00 2001
From: Pierre DE SOYRES <pierre.de-soyres@clever-cloud.com>
Date: Wed, 29 Nov 2023 12:42:54 +0100
Subject: [PATCH] feat(cc-badge): deprecate `icon-accessible-name` in favor of
 `icon-a11y-name`

Fixes #893
---
 src/components/cc-badge/cc-badge.js         | 19 ++++++++++++++++---
 src/components/cc-badge/cc-badge.stories.js |  8 ++++----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/components/cc-badge/cc-badge.js b/src/components/cc-badge/cc-badge.js
index b20832975..c161e1f18 100644
--- a/src/components/cc-badge/cc-badge.js
+++ b/src/components/cc-badge/cc-badge.js
@@ -23,6 +23,7 @@ export class CcBadge extends LitElement {
       circle: { type: Boolean },
       icon: { type: Object },
       iconAccessibleName: { type: String, attribute: 'icon-accessible-name' },
+      iconA11yName: { type: String, attribute: 'icon-a11y-name' },
       intent: { type: String },
       skeleton: { type: Boolean },
       weight: { type: String },
@@ -38,8 +39,8 @@ export class CcBadge extends LitElement {
     /** @type {IconModel|null} If set, enables icon mode and displays the required icon in the <cc-icon> component. */
     this.icon = null;
 
-    /** @type {string|null} Sets the `accessible-name` attribute value on the `<cc-icon>` tag. Only use if the icon conveys additional info compared to surrounding text. Check the `<cc-icon>` documentation for more details. */
-    this.iconAccessibleName = null;
+    /** @type {string|null} Sets the `a11y-name` attribute value on the `<cc-icon>` tag. Only use if the icon conveys additional info compared to surrounding text. Check the `<cc-icon>` documentation for more details. */
+    this.iconA11yName = null;
 
     /** @type {BadgeIntent} Sets the accent color used for the badge. */
     this.intent = 'neutral';
@@ -51,6 +52,18 @@ export class CcBadge extends LitElement {
     this.weight = 'dimmed';
   }
 
+  get iconAccessibleName () {
+    return this.a11yName;
+  }
+
+  /**
+   * Deprecated property. Use `iconA11yName` property or `icon-a11y-name` attribute instead.
+   * @deprecated
+   */
+  set iconAccessibleName (value) {
+    this.a11yName = value;
+  }
+
   render () {
     const modes = {
       dimmed: this.weight == null || this.weight === 'dimmed',
@@ -68,7 +81,7 @@ export class CcBadge extends LitElement {
     return html`
       <span class="cc-badge ${classMap(modes)}">
         ${this.icon != null ? html`
-          <cc-icon .icon=${this.icon} accessible-name=${ifDefined(this.iconAccessibleName)}></cc-icon>
+          <cc-icon .icon=${this.icon} a11y-name=${ifDefined(this.iconA11yName)}></cc-icon>
         ` : ''}
         <span>
           <slot></slot>
diff --git a/src/components/cc-badge/cc-badge.stories.js b/src/components/cc-badge/cc-badge.stories.js
index 4da9ce6a5..80a187e96 100644
--- a/src/components/cc-badge/cc-badge.stories.js
+++ b/src/components/cc-badge/cc-badge.stories.js
@@ -43,28 +43,28 @@ const iconsItems = [
     weight: 'dimmed',
     innerHTML: 'this is info',
     icon: iconInfo,
-    iconAccessibleName: 'Info',
+    iconA11yName: 'Info',
   },
   {
     intent: 'success',
     weight: 'outlined',
     innerHTML: 'this is success',
     icon: iconSuccess,
-    iconAccessibleName: 'Success',
+    iconA11yName: 'Success',
   },
   {
     intent: 'danger',
     weight: 'outlined',
     innerHTML: 'this is danger',
     icon: iconError,
-    iconAccessibleName: 'Error',
+    iconA11yName: 'Error',
   },
   {
     intent: 'warning',
     weight: 'strong',
     innerHTML: 'this is warning',
     icon: iconWarning,
-    iconAccessibleName: 'Warning',
+    iconA11yName: 'Warning',
   },
   {
     intent: 'neutral',