diff --git a/src/components/cc-popover/cc-popover.js b/src/components/cc-popover/cc-popover.js index f6c2d68fa..23000e08b 100644 --- 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 { This is the popover content', hideText: true, icon: iconArrowRightUp, position: 'top-left', - accessibleName: 'Click me to toggle popover', + a11yName: 'Click me to toggle popover', }, { innerHTML: '
This is the popover content
', hideText: true, icon: iconArrowLeftDown, position: 'bottom-right', - accessibleName: 'Click me to toggle popover', + a11yName: 'Click me to toggle popover', }, { innerHTML: '
This is the popover content
', hideText: true, icon: iconArrowRightDown, position: 'bottom-left', - accessibleName: 'Click me to toggle popover', + a11yName: 'Click me to toggle popover', }, ];