feat(cc-icon)!: remove the accessibleName prop & associated attribute

Use the `a11y-name` attribute or the `a11yName` property instead.

docs/adr/adr-0022-new-icon-system.md

@@ -189,18 +189,18 @@ Using `role="img"` and `aria-label` attributes on a custom element does not seem
 
 Since we could not rely on the custom element itself, we had to rely on the `<svg>` element and manipulate it depending on its context.
 
-If the developer does not provide any `accessible-name` prop, the component adds an `aria-hidden="true"` attribute to the inner `<svg>` element.
-If the developer does provide an `accessible-name` prop, the component adds to the inner `<svg>` element:
+If the developer does not provide any `a11y-name` prop, the component adds an `aria-hidden="true"` attribute to the inner `<svg>` element.
+If the developer does provide an `a11y-name` prop, the component adds to the inner `<svg>` element:
 
 * A `role="img"` attribute,
-* An `aria-label` which value matches the value of the `accessible-name` prop,
-* A `<title>` element which value matches the value of the `accessible-name` prop.
+* An `aria-label` which value matches the value of the `a11y-name` prop,
+* A `<title>` element which value matches the value of the `a11y-name` prop.
 
 The addition of the `<title>` element is not necessary but this is the native HTML way for informative `<svg>` elements so we decided to keep it.
 
 Example of an informative `<cc-icon>`:
 ```html
-<cc-icon accessible-name="Caution">
+<cc-icon a11y-name="Caution">
   <svg role="img" aria-label="Caution">
     <title>Caution</title>
     ...
@@ -229,15 +229,15 @@ We considered using an `alt` prop and attribute to mimic the `<img>` API.
 
 We did not choose to go this way because we want to avoid using existing native attributes like `title` for instance.
 
-##### Using a custom accessible-name attribute
+##### Using a custom a11y-name attribute
 
-We chose to use a `accessible-name` attribute that should only be used if the icon conveys information.
+We chose to use a `a11y-name` attribute that should only be used if the icon conveys information.
 
 This simplifies the API for developers because:
 
 * In most cases, icons are decorative so there is nothing to do.
 * When the icon is informative, they only have one attribute to add.
-* We already use an `accessible-name` attribute on the `<cc-button>`. This means this attribute should be familiar for developers using our components. It is also a well-known concept for many people who have worked on accessibility before.
+* We already use an `a11y-name` attribute on the `<cc-button>`. This means this attribute should be familiar for developers using our components. It is also a well-known concept for many people who have worked on accessibility before.
 
 ## Limits and prospects
 

src/components/cc-icon/cc-icon.js

@@ -31,7 +31,6 @@ import { skeletonStyles } from '../../styles/skeleton.js';
 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 },
@@ -65,18 +64,6 @@ 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('a11yName') || changedProperties.has('icon');
     const svg = this.shadowRoot.querySelector('svg');

src/components/cc-icon/cc-icon.stories.js

@@ -59,7 +59,6 @@ export const accessibleName = makeStory(conf, {
   `,
   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>a11y-name</code> attribute:</div>