feat(cc-badge): deprecate icon-accessible-name in favor of `icon-a1…

…1y-name` Fixes #893
CleverCloud · Dec 12, 2023 · 8b25182 · 8b25182
1 parent a41f5a1
commit 8b25182
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git 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
@@ -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',