refactor(cc-img)!: replace prop text by accessibleName

CleverCloud · Oct 30, 2023 · c8586f9 · c8586f9
1 parent a5d2d2b
commit c8586f9
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/src/components/cc-img/cc-img.js b/src/components/cc-img/cc-img.js
@@ -20,7 +20,7 @@ export class CcImg extends LitElement {
     return {
       skeleton: { type: Boolean, reflect: true },
       src: { type: String },
-      text: { type: String },
+      accessibleName: { type: String, attribute: 'accessible-name' },
       _error: { type: Boolean, state: true },
       _loaded: { type: Boolean, state: true },
     };
@@ -36,7 +36,7 @@ export class CcImg extends LitElement {
     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.text = null;
+    this.accessibleName = null;
 
     /** @type {boolean} */
     this._error = false;
@@ -65,16 +65,16 @@ export class CcImg extends LitElement {
   }
 
   render () {
-    const altValue = this.text ?? '';
+    const altValue = this.accessibleName ?? '';
     const isLoading = (this.src != null && !this._loaded && !this._error);
     const isSkeleton = (this.skeleton || isLoading);
-    const displayText = (this.src == null || this._error);
+    const displayAccessibleName = (this.src == null || this._error);
     return html`
-      <div class="wrapper ${classMap({ skeleton: isSkeleton, loaded: this._loaded, text: displayText })}">
+      <div class="wrapper ${classMap({ skeleton: isSkeleton, loaded: this._loaded, 'accessible-name': displayAccessibleName })}">
         <img src=${ifDefined(this.src ?? undefined)} @load=${this._onLoad} @error=${this._onError} alt=${altValue}>
-        ${displayText ? html`
+        ${displayAccessibleName ? html`
             <!-- We use aria-hidden because we already have an alt value. -->
-          <div class="error-msg" aria-hidden="true">${this.text}</div>
+          <div class="error-msg" aria-hidden="true">${this.accessibleName}</div>
         ` : ''}
       </div>
     `;

diff --git a/src/components/cc-img/cc-img.stories.js b/src/components/cc-img/cc-img.stories.js
@@ -22,24 +22,32 @@ const conf = {
 
 export const defaultStory = makeStory(conf, {
   items: [
-    { text: 'OMG' },
+    { accessibleName: 'OMG' },
+    { accessibleName: 'OMG', skeleton: true },
+    { accessibleName: 'OMG', skeleton: true, src: 'http://placekitten.com/200/200' },
+  ],
+});
+
+export const noAccessibleName = makeStory(conf, {
+  items: [
+    { },
     { skeleton: true },
-    { text: 'OMG', skeleton: true, src: 'http://placekitten.com/200/200' },
+    { skeleton: true, src: 'http://placekitten.com/200/200' },
   ],
 });
 
 export const imageFitContain = makeStory(conf, {
   items: [
-    { text: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 7em; width: 2em;' },
-    { text: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 2em; width: 7em;' },
-    { text: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 7em; width: 2em; --cc-img-fit: contain;' },
-    { text: 'CC', src: 'https://assets.clever-cloud.com/infra/clever-cloud.svg', style: 'border: 1px solid #000; height: 2em; width: 7em; --cc-img-fit: contain;' },
+    { 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;' },
   ],
 });
 
 export const noImage = makeStory(conf, {
-  docs: 'If `src` and `skeleton` are not defined, the `text` is displayed. Please make sure it fits the size you defined for the image.',
-  items: [{ text: 'OMG' }],
+  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' }],
 });
 
 export const loading = makeStory(conf, {
@@ -49,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: [{ text: 'OMG', skeleton: true }],
+  items: [{ accessibleName: 'OMG', skeleton: true }],
 });
 
 export const simulationWithSquareThenOther = makeStory(conf, {
@@ -58,7 +66,7 @@ export const simulationWithSquareThenOther = makeStory(conf, {
 1. load a square image
 1. load another image
 `,
-  items: [{ text: 'OMG', skeleton: true }],
+  items: [{ accessibleName: 'OMG', skeleton: true }],
   simulations: [
     storyWait(3000, ([component]) => {
       component.src = 'http://placekitten.com/200/200';
@@ -70,7 +78,7 @@ export const simulationWithSquareThenOther = makeStory(conf, {
 });
 
 export const simulationWithPortraitThenLandscape = makeStory(conf, {
-  items: [{ text: 'OMG', skeleton: true }],
+  items: [{ accessibleName: 'OMG', skeleton: true }],
   simulations: [
     storyWait(3000, ([component]) => {
       component.src = 'http://placekitten.com/200/500';
@@ -83,7 +91,7 @@ export const simulationWithPortraitThenLandscape = makeStory(conf, {
 });
 
 export const simulationWithLoadingThenError = makeStory(conf, {
-  items: [{ text: 'ERR', skeleton: true }],
+  items: [{ accessibleName: 'ERR', skeleton: true }],
   simulations: [
     storyWait(3000, ([component]) => {
       component.src = 'http://placekitten.com/bad/url';
@@ -93,6 +101,7 @@ export const simulationWithLoadingThenError = makeStory(conf, {
 
 enhanceStoriesNames({
   defaultStory,
+  noAccessibleName,
   imageFitContain,
   noImage,
   loading,