From 7095e34cf3f0ed3f3ce3662dc3bc15c09e3d3a43 Mon Sep 17 00:00:00 2001
From: Borghild Selle <104756130+BorghildSelle@users.noreply.github.com>
Date: Mon, 4 Nov 2024 08:41:31 +0100
Subject: [PATCH] :art: add tabindex to overflow elements (#2577)

---
 web/core/Carousel/Carousel.tsx                     | 3 +++
 web/pageComponents/pageTemplates/ErrorFallback.tsx | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
index ee7f9401e..78818bff8 100644
--- a/web/core/Carousel/Carousel.tsx
+++ b/web/core/Carousel/Carousel.tsx
@@ -330,6 +330,9 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
         title && {
           'aria-label': toPlainText(title),
         })}
+      {...(displayMode === 'scroll' && {
+        tabIndex: 0,
+      })}
       aria-roledescription="carousel"
       className={envisTwMerge(
         `w-full
diff --git a/web/pageComponents/pageTemplates/ErrorFallback.tsx b/web/pageComponents/pageTemplates/ErrorFallback.tsx
index 599a5abf0..c80fe8b10 100644
--- a/web/pageComponents/pageTemplates/ErrorFallback.tsx
+++ b/web/pageComponents/pageTemplates/ErrorFallback.tsx
@@ -90,13 +90,13 @@ export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
           Error Details
         </Heading>
         <StyledCode>
-          <StyledPre>{error.message}</StyledPre>
+          <StyledPre tabIndex={0}>{error.message}</StyledPre>
         </StyledCode>
         <StyledDetails>
           <StyledSummary>Expand to Show Error Stack Traces</StyledSummary>
           <Heading level="h3">Stack Trace</Heading>
           <StyledCode>
-            <StyledPre>{sliceErrorStack(error.stack)}</StyledPre>
+            <StyledPre tabIndex={0}>{sliceErrorStack(error.stack)}</StyledPre>
           </StyledCode>
         </StyledDetails>
       </ContentWrapper>