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

Fixes #893
CleverCloud · Nov 29, 2023 · 33d546c · 33d546c
1 parent 1119239
commit 33d546c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/src/components/cc-popover/cc-popover.js b/src/components/cc-popover/cc-popover.js
@@ -56,6 +56,7 @@ export class CcPopover extends LitElement {
   static get properties () {
     return {
       accessibleName: { type: String, attribute: 'accessible-name' },
+      a11yName: { type: String, attribute: 'a11y-name' },
       hideText: { type: Boolean, attribute: 'hide-text' },
       icon: { type: Object },
       isOpen: { type: Boolean, attribute: 'is-open', reflect: true },
@@ -66,8 +67,8 @@ export class CcPopover extends LitElement {
   constructor () {
     super();
 
-    /** @type {string|null} Sets the accessibleName property of the underlying `cc-button` element. CAUTION: The accessible name should always start with the visible text if there is one. */
-    this.accessibleName = null;
+    /** @type {string|null} Sets the a11yName property of the underlying `cc-button` element. CAUTION: The accessible name should always start with the visible text if there is one. */
+    this.a11yName = null;
 
     /** @type {boolean} Whether the button text should be hidden. */
     this.hideText = false;
@@ -119,6 +120,18 @@ export class CcPopover extends LitElement {
 
   // region Public methods
 
+  get accessibleName () {
+    return this.a11yName;
+  }
+
+  /**
+   * Deprecated property. Use `a11yName` property or `a11y-name` attribute instead.
+   * @deprecated
+   */
+  set accessibleName (value) {
+    this.a11yName = value;
+  }
+
   /**
    * Opens the popover.
    */
@@ -199,7 +212,7 @@ export class CcPopover extends LitElement {
         <cc-button
           ${ref(this._buttonRef)}
           .a11yExpanded=${this.isOpen}
-          .accessibleName=${this.accessibleName}
+          .a11yName=${this.a11yName}
           ?hide-text=${this.hideText}
           .icon=${this.icon}
           @cc-button:click=${this.toggle}

diff --git a/src/components/cc-popover/cc-popover.stories.js b/src/components/cc-popover/cc-popover.stories.js
@@ -34,28 +34,28 @@ const items = [
     hideText: true,
     icon: iconArrowLeftUp,
     position: 'top-right',
-    accessibleName: 'Click me to toggle popover',
+    a11yName: 'Click me to toggle popover',
   },
   {
     innerHTML: '<div>This is the popover content</div>',
     hideText: true,
     icon: iconArrowRightUp,
     position: 'top-left',
-    accessibleName: 'Click me to toggle popover',
+    a11yName: 'Click me to toggle popover',
   },
   {
     innerHTML: '<div>This is the popover content</div>',
     hideText: true,
     icon: iconArrowLeftDown,
     position: 'bottom-right',
-    accessibleName: 'Click me to toggle popover',
+    a11yName: 'Click me to toggle popover',
   },
   {
     innerHTML: '<div>This is the popover content</div>',
     hideText: true,
     icon: iconArrowRightDown,
     position: 'bottom-left',
-    accessibleName: 'Click me to toggle popover',
+    a11yName: 'Click me to toggle popover',
   },
 ];