[SDPAP-6333] Added alt text to hero banner logos. (#1228)

* feat: ♿ Add alt text to hero logos * fix: ✅ [SDPAP-6333] Update hero banners logo prop in storybook story * fix: [SDPAP-6333] set default logo value back to null Co-authored-by: David Featherston <david.featherstone@dpc.vic.gov.au>
dpc-sdp · Aug 15, 2022 · 6d747f5 · 6d747f5
1 parent d08c9b4
commit 6d747f5
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/packages/components/Organisms/HeroBanner/HeroBanner.vue b/packages/components/Organisms/HeroBanner/HeroBanner.vue
@@ -5,7 +5,7 @@
   }" :style="heroBannerStyles">
     <rpl-row v-if="logo">
       <div class="rpl-hero-banner__left">
-        <img class="rpl-hero-banner__logo" :src="logo" alt="" />
+        <img class="rpl-hero-banner__logo" :src="logo.url" :alt="logo.alt" />
       </div>
     </rpl-row>
     <rpl-row>
@@ -95,7 +95,7 @@ export default {
     moreLink: Object,
     theme: { type: String, default: 'light' },
     showLinks: { type: Boolean, default: true },
-    logo: String,
+    logo: Object,
     backgroundGraphic: String
   },
   components: {

diff --git a/packages/components/Organisms/HeroBanner/heroBanner.stories.mdx b/packages/components/Organisms/HeroBanner/heroBanner.stories.mdx
@@ -52,7 +52,7 @@ export const Template = (args, { argTypes }) => ({
       moreLink: { text: 'See more', url: '#' },
       theme: 'light',
       showLinks: true,
-      logo: '/herologo.png',
+      logo: { url: '/herologo.png', alt: 'Image of hero logo' },
       backgroundGraphic: '/bggraphiclower.png'
     }}
   >

diff --git a/packages/ripple-nuxt-tide/lib/middleware/banners.js b/packages/ripple-nuxt-tide/lib/middleware/banners.js
@@ -19,7 +19,10 @@ const tideBanners = async (context, pageData) => {
   heroBanner.keyJourneys = pageData.tidePage.field_landing_page_key_journeys || {}
   heroBanner.theme = pageData.tidePage.field_landing_page_hero_theme
   heroBanner.showLinks = !hasImageBanner
-  heroBanner.logo = pageData.tidePage.field_landing_page_hero_logo ? pageData.tidePage.field_landing_page_hero_logo.field_media_image.url : null
+  heroBanner.logo = pageData.tidePage.field_landing_page_hero_logo ? {
+    url: pageData.tidePage.field_landing_page_hero_logo.field_media_image.url,
+    alt: pageData.tidePage.field_landing_page_hero_logo.field_media_image.meta.alt || ''
+  } : null
 
   if (pageData.tidePage.field_landing_page_hero_image && pageData.tidePage.field_landing_page_hero_image.field_media_image) {
     const mediaImage = pageData.tidePage.field_landing_page_hero_image.field_media_image