fix(cc-img): populate alt value

Fixes #726
CleverCloud · Oct 30, 2023 · a5d2d2b · a5d2d2b
1 parent 8cfaffb
commit a5d2d2b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/components/cc-img/cc-img.js b/src/components/cc-img/cc-img.js
@@ -65,14 +65,16 @@ export class CcImg extends LitElement {
   }
 
   render () {
+    const altValue = this.text ?? '';
     const isLoading = (this.src != null && !this._loaded && !this._error);
     const isSkeleton = (this.skeleton || isLoading);
     const displayText = (this.src == null || this._error);
     return html`
       <div class="wrapper ${classMap({ skeleton: isSkeleton, loaded: this._loaded, text: displayText })}">
-        <img src=${ifDefined(this.src ?? undefined)} @load=${this._onLoad} @error=${this._onError} alt="">
+        <img src=${ifDefined(this.src ?? undefined)} @load=${this._onLoad} @error=${this._onError} alt=${altValue}>
         ${displayText ? html`
-          <div class="error-msg">${this.text}</div>
+            <!-- We use aria-hidden because we already have an alt value. -->
+          <div class="error-msg" aria-hidden="true">${this.text}</div>
         ` : ''}
       </div>
     `;

diff --git a/src/components/cc-img/cc-img.stories.js b/src/components/cc-img/cc-img.stories.js
@@ -23,7 +23,7 @@ const conf = {
 export const defaultStory = makeStory(conf, {
   items: [
     { text: 'OMG' },
-    { text: 'OMG', skeleton: true },
+    { skeleton: true },
     { text: 'OMG', skeleton: true, src: 'http://placekitten.com/200/200' },
   ],
 });