feat(front): ❤️ add assistive text to hero background image (#1234)

Closes: #1234
dgrebb · Feb 14, 2024 · f7df07e · f7df07e
1 parent 1e12f26
commit f7df07e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/front/src/lib/components/posts/Post.svelte b/front/src/lib/components/posts/Post.svelte
@@ -42,7 +42,8 @@
     heroMime,
     loaded,
     position,
-    heroThumb;
+    heroThumb,
+    heroAlt;
 
   /**
    * Sets the active link in the page navigation.
@@ -105,6 +106,7 @@
         {loaded}
         {position}
         {heroThumb}
+        {heroAlt}
         slot="header"
       />
       {#if (toc && toc.length) || (categories && categories.length) || (related && related.length)}

diff --git a/front/src/lib/components/posts/PostHero.svelte b/front/src/lib/components/posts/PostHero.svelte
@@ -9,6 +9,7 @@
    * @property {string} heroImage - URL of the hero image.
    * @property {string} heroMime - MIME type of the hero image.
    * @property {string} heroThumb - URL of the hero thumbnail.
+   * @property {string} heroAlt - Alt text for the hero image.
    * @property {boolean} loaded - Flag indicating whether the hero image is loaded.
    * @property {string} position - CSS background position for the images.
    */
@@ -28,6 +29,11 @@
    */
   export let heroThumb;
 
+  /**
+   * @type {Props}
+   */
+  export let heroAlt;
+
   /**
    * @type {Props}
    */
@@ -70,11 +76,15 @@
     <div
       class={`post-hero {loaded ? 'post-hero-loaded' : ''}`}
       style={`background-image: url('${heroThumb}'); background-position: ${position}`}
+      role="img"
+      aria-label={heroAlt ? heroAlt : null}
     />
     <noscript>
       <div
         class="post-hero noscript"
         style="background-image: url('{heroImage}'); background-position: {position};"
+        role="img"
+        aria-label={heroAlt}
       />
     </noscript>
   </div>

diff --git a/front/src/routes/post/[slug]/+page.svelte b/front/src/routes/post/[slug]/+page.svelte
@@ -24,6 +24,7 @@
     ? hero.formats.thumbnail.url
     : false;
   $: heroImage = hero?.url ? hero.url : false;
+  $: heroAlt = hero?.alternativeText ? hero.alternativeText : false;
   $: heroMime = hero?.mime;
   $: position = post.position || 'center center';
   $: ({ publishedAt, updatedAt } = post);
@@ -65,6 +66,7 @@
       {loaded}
       {position}
       {heroThumb}
+      {heroAlt}
     />
   </section>