🐛 Fix labelling to image carousel (#2497)

equinor · Sep 11, 2024 · f25c9bb · f25c9bb
1 parent 57eab31
commit f25c9bb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
@@ -279,7 +279,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
       {...(hasSectionTitle && {
         role: 'region',
       })}
-      {...(labelledbyId && {
+      {...(typeof labelledbyId !== undefined && {
         'aria-labelledby': labelledbyId,
       })}
       {...(!labelledbyId &&

diff --git a/web/sections/ImageCarousel/ImageCarousel.tsx b/web/sections/ImageCarousel/ImageCarousel.tsx
@@ -21,24 +21,26 @@ const ImageCarousel = forwardRef<HTMLUListElement, ImageCarouselProps>(function
 
   return (
     <BackgroundContainer background={background} id={anchor} className={envisTwMerge(`pb-page-content`, className)}>
-      <div className="w-full flex flex-col px-layout-lg max-w-viewport mx-auto pb-8">
-        {title && !hideTitle && (
-          <Heading
-            as="h2"
-            id={headingId}
-            value={title}
-            className={`${ingress ? 'pb-6' : ''} text-xl max-w-text text-pretty`}
-          />
-        )}
-        {ingress && <Paragraph value={ingress} className="max-w-text text-pretty" />}
-      </div>
+      {((title && !hideTitle) || ingress) && (
+        <div className="w-full flex flex-col px-layout-lg max-w-viewport mx-auto pb-8">
+          {title && !hideTitle && (
+            <Heading
+              as="h2"
+              id={headingId}
+              value={title}
+              className={`${ingress ? 'pb-6' : ''} text-xl max-w-text text-pretty`}
+            />
+          )}
+          {ingress && <Paragraph value={ingress} className="max-w-text text-pretty" />}
+        </div>
+      )}
       <Carousel
         ref={ref}
         items={items}
         displayMode={items?.length < 3 ? 'scroll' : 'single'}
         variant="image"
-        hasSectionTitle={!!title}
-        labelledbyId={title ? headingId : undefined}
+        hasSectionTitle={title && !hideTitle}
+        labelledbyId={title && !hideTitle ? headingId : undefined}
         title={title}
         autoRotation={options?.autoplay}
       />