From a5d2d2b988666ca8da92c114b1944a2e7bfc7f09 Mon Sep 17 00:00:00 2001
From: Helene Amouzou <helene.amouzou@clever-cloud.com>
Date: Wed, 4 Oct 2023 16:13:24 +0200
Subject: [PATCH] fix(cc-img): populate `alt` value

Fixes #726
---
 src/components/cc-img/cc-img.js         | 6 ++++--
 src/components/cc-img/cc-img.stories.js | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/cc-img/cc-img.js b/src/components/cc-img/cc-img.js
index 01ca8b4f6..140e39b66 100644
--- 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
index 9485748d0..223de7e76 100644
--- 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' },
   ],
 });