fix: even if there is not alt text, the attribute must always be pres…

…ent for assistive technolgies
sbb-design-systems · Apr 22, 2024 · f688448 · f688448
1 parent 117b38c
commit f688448
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/src/components/image/image.e2e.ts b/src/components/image/image.e2e.ts
@@ -41,7 +41,7 @@ describe(`sbb-image with ${fixture.name}`, () => {
             <source media="(min-width: 64rem)" sizes="1200px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1200&amp;h=675&amp;q=45 1200w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=2400&amp;h=1350&amp;q=20 2400w">
             <source media="(min-width: 37.5rem)" sizes="976px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=976&amp;h=549&amp;q=45 976w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1952&amp;h=1098&amp;q=20 1952w">
             <source media="(max-width: 37.4375rem)" sizes="320px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=320&amp;h=180&amp;q=45 320w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=640&amp;h=360&amp;q=20 640w">
-            <img class="image__img" decoding="auto" height="562" loading="eager" src="${url}" width="1000">
+            <img alt="" class="image__img" decoding="auto" height="562" loading="eager" src="${url}" width="1000">
           </picture>
         </div>
       </figure>

diff --git a/src/components/image/image.ts b/src/components/image/image.ts
@@ -507,7 +507,7 @@ export class SbbImageElement extends LitElement {
               ];
             })}
             <img
-              alt=${this.alt || nothing}
+              alt=${this.alt || ''}
               @load=${this._imageLoaded}
               class="image__img"
               src=${this.imageSrc!}