Merge pull request #33 from NASA-IMPACT/slide-number

Add current slide number/total slide number to carousel
NASA-IMPACT · Nov 17, 2023 · e7056a7 · e7056a7
2 parents e6856ed + 831634f
commit e7056a7
Showing 1 changed file with 29 additions and 19 deletions.
diff --git a/overrides/common/embedded-video-carousel.tsx b/overrides/common/embedded-video-carousel.tsx
@@ -70,6 +70,8 @@ const ButtonGroup = styled.div`
   gap: ${glsp(1)};
   top: calc(${(props) => props.topHeight}px + ${glsp(4)});
   left: unset;
+  align-items: center;
+  z-index: 5;
 `;
 
 const buttonStyle = createButtonStyles({
@@ -127,6 +129,30 @@ export default function Carousel({ items }: EmbeddedVideosPropType) {
         totalSlides={items.length}
         style={{ gridColumn: "1 / -1", gridRow: "2", position: "relative" }}
       >
+        {items.length > 1 && (
+          <ButtonGroup
+            topHeight={height}
+            role="group"
+            aria-label="Slide controls"
+          >
+            <ButtonBackStyled>
+              <CollecticonChevronLeft title="Go to previous slide" meaningful />
+            </ButtonBackStyled>
+            {/* A workaround to show current slide number/ total slide number */}
+            <DotGroup
+              renderDots={(props) => {
+                return (
+                  <span>
+                    {props.currentSlide + 1}/{items.length + 1}
+                  </span>
+                );
+              }}
+            />
+            <ButtonNextStyled>
+              <CollecticonChevronRight title="Go to next slide" meaningful />
+            </ButtonNextStyled>
+          </ButtonGroup>
+        )}
         <div role="region" aria-label="Carousel">
           <FeaturedList>
             <Slider>
@@ -150,29 +176,13 @@ export default function Carousel({ items }: EmbeddedVideosPropType) {
                       <p>{t.caption}</p>
                     </DescWrapper>
                   </Slide>
-                  <SROnly id={`carousel-item-${idx}__label`}>{t.title}</SROnly>
+                  <SROnly id={`carousel-item-${idx}__label`} aria-live="polite">
+                    {t.title}
+                  </SROnly>
                 </FeaturedContent>
               ))}
             </Slider>
           </FeaturedList>
-
-          {items.length > 1 && (
-            <ButtonGroup
-              topHeight={height}
-              role="group"
-              aria-label="Slide controls"
-            >
-              <ButtonBackStyled>
-                <CollecticonChevronLeft
-                  title="Go to previous slide"
-                  meaningful
-                />
-              </ButtonBackStyled>
-              <ButtonNextStyled>
-                <CollecticonChevronRight title="Go to next slide" meaningful />
-              </ButtonNextStyled>
-            </ButtonGroup>
-          )}
         </div>
       </CarouselProvider>
     </Lazyload>