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

Fixes #893
CleverCloud · Dec 12, 2023 · fa2e860 · fa2e860
1 parent 12e2e73
commit fa2e860
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 20 deletions.
diff --git a/src/components/cc-img/cc-img.js b/src/components/cc-img/cc-img.js
@@ -18,9 +18,10 @@ export class CcImg extends LitElement {
 
   static get properties () {
     return {
+      accessibleName: { type: String, attribute: 'accessible-name' },
+      a11yName: { type: String, attribute: 'a11y-name' },
       skeleton: { type: Boolean, reflect: true },
       src: { type: String },
-      accessibleName: { type: String, attribute: 'accessible-name' },
       _error: { type: Boolean, state: true },
       _loaded: { type: Boolean, state: true },
     };
@@ -29,22 +30,34 @@ export class CcImg extends LitElement {
   constructor () {
     super();
 
+    /** @type {string|null} Sets short fallback text to display when the image cannot be loaded or if `src` is not defined and `skeleton` is `false`. */
+    this.a11yName = null;
+
     /** @type {boolean} Enables skeleton screen UI pattern (loading hint). */
     this.skeleton = false;
 
     /** @type {string|null} Sets `src` attribute on inner native `<img>` element. */
     this.src = null;
 
-    /** @type {string|null} Sets short fallback text to display when the image cannot be loaded or if `src` is not defined and `skeleton` is `false`. */
-    this.accessibleName = null;
-
     /** @type {boolean} */
     this._error = false;
 
     /** @type {boolean} */
     this._loaded = false;
   }
 
+  get accessibleName () {
+    return this.a11yName;
+  }
+
+  /**
+   * Deprecated property. Use `a11yName` property or `a11y-name` attribute instead.
+   * @deprecated
+   */
+  set accessibleName (value) {
+    this.a11yName = value;
+  }
+
   _onLoad (e) {
     this._loaded = true;
     // WARNING: we modify the exposed property "skeleton" from the inside
@@ -65,16 +78,16 @@ export class CcImg extends LitElement {
   }
 
   render () {
-    const altValue = this.accessibleName ?? '';
+    const altValue = this.a11yName ?? '';
     const isLoading = (this.src != null && !this._loaded && !this._error);
     const isSkeleton = (this.skeleton || isLoading);
     const displayAccessibleName = (this.src == null || this._error);
     return html`
-      <div class="wrapper ${classMap({ skeleton: isSkeleton, loaded: this._loaded, 'accessible-name': displayAccessibleName })}">
+      <div class="wrapper ${classMap({ skeleton: isSkeleton, loaded: this._loaded })}">
         <img src=${ifDefined(this.src ?? undefined)} @load=${this._onLoad} @error=${this._onError} alt=${altValue}>
         ${displayAccessibleName ? html`
             <!-- We use aria-hidden because we already have an alt value. -->
-          <div class="error-msg" aria-hidden="true">${this.accessibleName}</div>
+          <div class="error-msg" aria-hidden="true">${altValue}</div>
         ` : ''}
       </div>
     `;

diff --git a/src/components/cc-img/cc-img.stories.js b/src/components/cc-img/cc-img.stories.js
@@ -22,9 +22,9 @@ const conf = {
 
 export const defaultStory = makeStory(conf, {
   items: [
-    { accessibleName: 'OMG' },
-    { accessibleName: 'OMG', skeleton: true },
-    { accessibleName: 'OMG', skeleton: true, src: 'http://placekitten.com/200/200' },
+    { a11yName: 'OMG' },
+    { a11yName: 'OMG', skeleton: true },
+    { a11yName: 'OMG', skeleton: true, src: 'http://placekitten.com/200/200' },
   ],
 });
 
@@ -38,16 +38,16 @@ export const noAccessibleName = makeStory(conf, {
 
 export const imageFitContain = makeStory(conf, {
   items: [
-    { accessibleName: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 7em; width: 2em;' },
-    { accessibleName: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 2em; width: 7em;' },
-    { accessibleName: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 7em; width: 2em; --cc-img-fit: contain;' },
-    { accessibleName: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 2em; width: 7em; --cc-img-fit: contain;' },
+    { a11yName: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 7em; width: 2em;' },
+    { a11yName: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 2em; width: 7em;' },
+    { a11yName: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 7em; width: 2em; --cc-img-fit: contain;' },
+    { a11yName: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 2em; width: 7em; --cc-img-fit: contain;' },
   ],
 });
 
 export const noImage = makeStory(conf, {
-  docs: 'If `src` and `skeleton` are not defined, the `accessibleName` is displayed. Please make sure it fits the size you defined for the image.',
-  items: [{ accessibleName: 'OMG' }],
+  docs: 'If `src` and `skeleton` are not defined, the `a11yName` is displayed. Please make sure it fits the size you defined for the image.',
+  items: [{ a11yName: 'OMG' }],
 });
 
 export const loading = makeStory(conf, {
@@ -57,7 +57,7 @@ It's up to you to set \`skeleton\` while you're waiting for the URL of the image
 * The skeleton state will stay after the \`src\` is set, while waiting for the image to load.
 * \`skeleton\` will be set back to \`false\` by the component once the image is loaded is loaded (success or error).
 `,
-  items: [{ accessibleName: 'OMG', skeleton: true }],
+  items: [{ a11yName: 'OMG', skeleton: true }],
 });
 
 export const simulationWithSquareThenOther = makeStory(conf, {
@@ -66,7 +66,7 @@ export const simulationWithSquareThenOther = makeStory(conf, {
 1. load a square image
 1. load another image
 `,
-  items: [{ accessibleName: 'OMG', skeleton: true }],
+  items: [{ a11yName: 'OMG', skeleton: true }],
   simulations: [
     storyWait(3000, ([component]) => {
       component.src = 'http://placekitten.com/200/200';
@@ -78,7 +78,7 @@ export const simulationWithSquareThenOther = makeStory(conf, {
 });
 
 export const simulationWithPortraitThenLandscape = makeStory(conf, {
-  items: [{ accessibleName: 'OMG', skeleton: true }],
+  items: [{ a11yName: 'OMG', skeleton: true }],
   simulations: [
     storyWait(3000, ([component]) => {
       component.src = 'http://placekitten.com/200/500';
@@ -91,7 +91,7 @@ export const simulationWithPortraitThenLandscape = makeStory(conf, {
 });
 
 export const simulationWithLoadingThenError = makeStory(conf, {
-  items: [{ accessibleName: 'ERR', skeleton: true }],
+  items: [{ a11yName: 'ERR', skeleton: true }],
   simulations: [
     storyWait(3000, ([component]) => {
       component.src = 'http://placekitten.com/bad/url';