From 0fd487ea3e8c83863f1dc12e2c9630e5a30c664d Mon Sep 17 00:00:00 2001
From: Ruimin Hu <ruimhu@microsoft.com>
Date: Tue, 13 Sep 2022 19:55:46 +0800
Subject: [PATCH] fix accessibility

---
 website/configs/customFields.js         | 4 ++++
 website/src/components/Banner/index.tsx | 6 ++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/website/configs/customFields.js b/website/configs/customFields.js
index 008908780..cc2b55d95 100644
--- a/website/configs/customFields.js
+++ b/website/configs/customFields.js
@@ -21,6 +21,10 @@ module.exports = function ({ baseUrl }) {
             mobile: [...Array(bannerCount).keys()].map(i => getImageSource(i, 'mobile', baseUrl)),
             desktop: [...Array(bannerCount).keys()].map(i => getImageSource(i, 'desktop', baseUrl)),
         },
+        bannerImageSourcesAriaLabels: {
+            mobile: ["mobile-aria-0", "mobile-aria-1", "mobile-aria-2", "mobile-aria-3"],
+            desktop: ["desktop-aria-0", "desktop-aria-1", "desktop-aria-2", "desktop-aria-3"]
+        },
         sidebar: {
             sampleRoot: "https://github.com/Azure/azure-webpubsub/tree/main/samples/",
             reviewLink: "https://github.com/Azure/azure-webpubsub/issues/new?assignees=&labels=&template=30_sample_feedback.md",
diff --git a/website/src/components/Banner/index.tsx b/website/src/components/Banner/index.tsx
index 7e5855e6a..0879c5dc0 100644
--- a/website/src/components/Banner/index.tsx
+++ b/website/src/components/Banner/index.tsx
@@ -13,12 +13,14 @@ export default function Banner() {
   const isWide = IsWideDevice()
   const { siteConfig } = useDocusaurusContext()
   const bannerImageSources = siteConfig.customFields.bannerImageSources
+  const bannerImageSourcesAriaLabels = siteConfig.customFields.bannerImageSourcesAriaLabels
   const sources = isWide ? bannerImageSources.desktop : bannerImageSources.mobile
+  const ariaLabels = isWide ? bannerImageSourcesAriaLabels.desktop : bannerImageSourcesAriaLabels.mobile
   const slides = sources.map((src: string, i: number) => (
     <SwiperSlide key={i}>
-      <img src={src} className={styles.bannerImage}></img>
+        <img src={src} className={styles.bannerImage} aria-label={ariaLabels[i]}></img>
     </SwiperSlide>
-  ))
+    ))
   return (
     <Swiper
       slidesPerView={1}