@semcore/carousel 3.42.5 → 3.43.4-prerelease.1

package/src/Carousel.tsx

@@ -32,8 +32,7 @@ const MAP_TRANSFORM: Record<string, 'left' | 'right'> = {
 
 const enhance = {
   uid: uniqueIDEnhancement(),
-  getI18nText: i18nEnhance(localizedMessages),
-  keyboardFocusEnhance: keyboardFocusEnhance(),
+  i18nEnahnce: i18nEnhance(localizedMessages),
 };
 const media = ['(min-width: 481px)', '(max-width: 480px)'];
 const BreakPoints = createBreakpoints(media);
@@ -43,7 +42,12 @@ class CarouselRoot extends Component<
   CarouselProps,
   CarouselContext,
   CarouselState,
-  typeof enhance
+  typeof enhance & {
+    getI18nText: (
+      messageId: string,
+      variables?: { [key: string]: string | number | undefined },
+    ) => string;
+  }
 > {
   static displayName = 'Carousel';
   static defaultProps = {
@@ -358,7 +362,7 @@ class CarouselRoot extends Component<
   };
 
   getPrevProps() {
-    const { bounded, getI18nText } = this.asProps;
+    const { bounded, getI18nText, uid } = this.asProps;
     const { items, selectedIndex } = this.state;
     let disabled = false;
     if (items.length && bounded) {
@@ -369,12 +373,12 @@ class CarouselRoot extends Component<
       onKeyDown: this.bindHandlerKeydownControl('left'),
       disabled,
       label: getI18nText('prev'),
-      tabIndex: -1,
+      'aria-controls': `igc-${uid}-carousel`,
     };
   }
 
   getNextProps() {
-    const { bounded, getI18nText } = this.asProps;
+    const { bounded, getI18nText, uid } = this.asProps;
     const { items, selectedIndex } = this.state;
     let disabled = false;
     if (items.length && bounded) {
@@ -386,12 +390,13 @@ class CarouselRoot extends Component<
       onKeyDown: this.bindHandlerKeydownControl('right'),
       disabled,
       label: getI18nText('next'),
-      tabIndex: -1,
+      'aria-controls': `igc-${uid}-carousel`,
     };
   }
 
   getIndicatorsProps() {
     const { items } = this.state;
+    const { getI18nText } = this.asProps;
 
     return {
       items: items.map((item, key) => ({
@@ -399,6 +404,20 @@ class CarouselRoot extends Component<
         onClick: this.bindHandlerClickIndicator(key),
         key,
       })),
+      role: 'tablist',
+      'aria-label': getI18nText('slides'),
+    };
+  }
+
+  getIndicatorProps(_: any, index: number) {
+    const isCurrent = this.isSelected(index);
+    const { getI18nText } = this.asProps;
+
+    return {
+      role: 'tab',
+      'aria-selected': isCurrent,
+      'aria-controls': `igc-${this.asProps.uid}-carousel-item-${index}`,
+      'aria-label': getI18nText('slide', { slideNumber: index + 1 }),
     };
   }
 
@@ -430,7 +449,7 @@ class CarouselRoot extends Component<
   }
 
   isSelected(index: number) {
-    const { items, selectedIndex } = this.state;
+    const { items } = this.state;
 
     if (items.length === 0) {
       return true;
@@ -442,15 +461,7 @@ class CarouselRoot extends Component<
   renderModal(isSmall: boolean, ComponentItems: any[]) {
     const SModalContainer = Root;
     const SModalBox = Box;
-    const {
-      styles,
-      uid,
-      duration,
-      zoom: hasZoom,
-      zoomWidth,
-      'aria-label': ariaLabel,
-      'aria-roledescription': ariaRoledescription,
-    } = this.asProps;
+    const { styles, uid, duration, zoomWidth } = this.asProps;
     const { isOpenZoom } = this.state;
 
     return sstyled(styles)(
@@ -465,7 +476,7 @@ class CarouselRoot extends Component<
           <SModalBox>
             <SModalContainer
               render={Box}
-              role='list'
+              aria-live='polite'
               use:duration={`${duration}ms`}
               ref={this.refModalContainer}
               use:w={undefined}
@@ -508,6 +519,7 @@ class CarouselRoot extends Component<
     const {
       styles,
       Children,
+      uid,
       zoom: hasZoom,
       'aria-label': ariaLabel,
       'aria-roledescription': ariaRoledescription,
@@ -523,21 +535,21 @@ class CarouselRoot extends Component<
     return sstyled(styles)(
       <SCarousel
         render={Box}
-        role='group'
+        role='region'
+        roledescription='carousel'
         onKeyDown={this.handlerKeyDown}
         onTouchStart={this.handlerTouchStart}
         onTouchEnd={this.handlerTouchEnd}
         ref={this.refCarousel}
+        id={`igc-${uid}-carousel`}
+        aria-roledescription={ariaRoledescription}
       >
         {Controls.length === 0 ? (
           <>
             <Flex>
               <Carousel.Prev />
               <SContentBox>
-                <Carousel.Container
-                  aria-roledescription={ariaRoledescription}
-                  aria-label={ariaLabel}
-                >
+                <Carousel.Container aria-label={ariaLabel}>
                   <Children />
                 </Carousel.Container>
               </SContentBox>
@@ -581,11 +593,15 @@ const Container = (props: BoxProps & { duration?: number }) => {
   const SContainer = Root;
   const { styles, duration } = props;
 
-  return sstyled(styles)(<SContainer render={Box} role='list' use:duration={`${duration}ms`} />);
+  return sstyled(styles)(
+    <SContainer render={Box} use:duration={`${duration}ms`} aria-live='polite' />,
+  );
 };
 
 class Item extends Component<CarouselItemProps> {
   refItem = React.createRef<HTMLElement>();
+  keepFocusTimeout: NodeJS.Timeout | undefined;
+  static enhance = [keyboardFocusEnhance(false)];
 
   componentDidMount() {
     const { toggleItem, transform } = this.props;
@@ -603,28 +619,43 @@ class Item extends Component<CarouselItemProps> {
     const refItem = this.refItem.current;
 
     toggleItem && refItem && toggleItem({ node: refItem }, true);
+    clearTimeout(this.keepFocusTimeout);
   }
 
   componentDidUpdate(prevProps: CarouselItemProps) {
+    clearTimeout(this.keepFocusTimeout);
+
     const transform = this.props.transform;
     const refItem = this.refItem.current;
 
     if (prevProps.transform !== transform && refItem) {
       refItem.style.transform = `translateX(${transform}%)`;
     }
+    if (this.props.current) {
+      this.keepFocusTimeout = setTimeout(() => {
+        if (
+          document.activeElement !== refItem &&
+          (document.activeElement as HTMLElement)?.dataset.carousel === refItem?.dataset.carousel
+        ) {
+          refItem?.focus();
+        }
+      }, 100);
+    }
   }
 
   render() {
-    const { styles, index, uid, current, zoomIn, onToggleZoomModal, transform } = this.props;
+    const { styles, index, uid, current, zoomIn, onToggleZoomModal } = this.props;
     const SItem = Root;
 
     return sstyled(styles)(
       <SItem
         render={Box}
         ref={this.refItem}
-        role='listitem'
+        role='tabpanel'
+        data-carousel={`igc-${uid}-carousel`}
         id={`igc-${uid}-carousel-item-${index}`}
         aria-current={current}
+        use:tabIndex={current ? 0 : -1}
         onClick={zoomIn ? onToggleZoomModal : undefined}
         zoomIn={zoomIn}
       />,
@@ -633,7 +664,7 @@ class Item extends Component<CarouselItemProps> {
 }
 
 const Prev = (props: CarouselButtonProps) => {
-  const { styles, children, Children, label, top = 0, inverted, tabIndex } = props;
+  const { styles, children, Children, label, top = 0, inverted } = props;
   const SPrev = Root;
   const SPrevButton = Button;
 
@@ -648,7 +679,6 @@ const Prev = (props: CarouselButtonProps) => {
           theme={inverted ? 'invert' : 'muted'}
           use={'tertiary'}
           size={'l'}
-          tabIndex={tabIndex}
         />
       )}
     </SPrev>,
@@ -656,7 +686,7 @@ const Prev = (props: CarouselButtonProps) => {
 };
 
 const Next = (props: CarouselButtonProps) => {
-  const { styles, children, Children, label, top = 0, inverted, tabIndex } = props;
+  const { styles, children, Children, label, top = 0, inverted } = props;
   const SNext = Root;
   const SNextButton = Button;
 
@@ -671,7 +701,6 @@ const Next = (props: CarouselButtonProps) => {
           theme={inverted ? 'invert' : 'muted'}
           use={'tertiary'}
           size={'l'}
-          tabIndex={tabIndex}
         />
       )}
     </SNext>,
@@ -682,19 +711,20 @@ const Indicators = ({ items, styles, Children, inverted }: CarouselIndicatorsPro
   const SIndicators = Root;
   if (Children.origin) {
     return sstyled(styles)(
-      <SIndicators render={Box} aria-hidden='true'>
+      <SIndicators render={Box}>
         <Children />
       </SIndicators>,
     );
   }
   return sstyled(styles)(
-    <SIndicators render={Box} aria-hidden='true'>
+    <SIndicators render={Box}>
       {items?.map((item, index) => (
         <Carousel.Indicator key={index} {...item} inverted={inverted} />
       ))}
     </SIndicators>,
   );
 };
+Indicators.enhance = [keyboardFocusEnhance()];
 
 const Indicator = ({ styles, Children }: CarouselIndicatorProps) => {
   const SIndicator = Root;

package/src/style/carousel.shadow.css

@@ -4,10 +4,6 @@ SCarousel {
   user-select: none;
 }
 
-SCarousel[keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-  z-index: 1;
-}
 
 SContainer {
   display: flex;
@@ -15,8 +11,22 @@ SContainer {
 }
 
 SContentBox, SModalBox {
+  position: relative;
   overflow: hidden;
   border-radius: var(--intergalactic-surface-rounded, 6px);
+  &:has(SItem[keyboardFocused]) {
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+      z-index: 1;
+      width: calc(100% - 3px * 2);
+      height: calc(100% - 3px * 2);
+      top: 3px;
+      left: 3px;
+    }
+  }
 }
 
 SModalContainer {
@@ -31,6 +41,7 @@ SItem {
   transform: var(--transform);
   border-radius: var(--intergalactic-surface-rounded, 6px);
   overflow: hidden;
+  outline: none;
 }
 
 SItem[zoomIn] {
@@ -44,6 +55,20 @@ SIndicators {
   display: flex;
   justify-content: center;
   margin-top: var(--intergalactic-spacing-4x, 16px);
+  outline: none;
+  position: relative;
+}
+
+SIndicators[keyboardFocused]:after {
+  content: '';
+  display: block;
+  position: absolute;
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+  z-index: 1;
+  width: calc(100% - 3px * 2);
+  height: calc(100% - 3px);
+  top: 0;
+  left: 3px;
 }
 
 SIndicator {
@@ -83,6 +108,25 @@ SNext {
     margin-left: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
     margin-right: calc(2 * var(--intergalactic-spacing-1x, 4px) - 1px);
   }
+  
+}
+
+SPrevButton, SNextButton {
+  &:focus-visible {
+    box-shadow: none;
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+      box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+      z-index: 1;
+      width: calc(100% - 3px * 2);
+      height: calc(100% - 3px * 2);
+      top: 3px;
+      left: 3px;
+      border-radius: var(--intergalactic-control-rounded, 6px);
+    }
+  }
 }
 
 SPrev {

package/src/translations/de.json

@@ -1,4 +1,6 @@
 {
-  "next": "Weiter",
-  "prev": "Vorher"
+  "next": "Nächste Folie",
+  "prev": "Vorherige Folie",
+  "slides": "Folien",
+  "slide": "Folie {slideNumber}"
 }

package/src/translations/en.json

@@ -1,4 +1,6 @@
 {
-  "next": "Next",
-  "prev": "Previous"
+  "next": "Next slide",
+  "prev": "Previous slide",
+  "slides": "Slides",
+  "slide": "Slide {slideNumber}"
 }

package/src/translations/es.json

@@ -1,4 +1,6 @@
 {
-  "next": "Siguiente",
-  "prev": "Anterior"
+  "next": "Próxima diapositiva",
+  "prev": "Diapositiva anterior",
+  "slides": "Diapositivas",
+  "slide": "Diapositiva {slideNumber}"
 }

package/src/translations/fr.json

@@ -1,4 +1,6 @@
 {
-  "next": "Suivant",
-  "prev": "Précédent"
+  "next": "Diapositive suivante",
+  "prev": "Diapositive précédente",
+  "slides": "Diapositives",
+  "slide": "Diapositive {slideNumber}"
 }

package/src/translations/it.json

@@ -1,4 +1,6 @@
 {
-  "next": "Succ.",
-  "prev": "Precedente"
+  "next": "Slide successiva",
+  "prev": "Slide precedente",
+  "slides": "Slide",
+  "slide": "Slide {slideNumber}"
 }

package/src/translations/ja.json

@@ -1,4 +1,6 @@
 {
-  "next": "次へ",
-  "prev": "前へ"
+  "next": "次のスライド",
+  "prev": "前のスライド",
+  "slides": "スライド",
+  "slide": "スライド{slideNumber}"
 }

package/src/translations/ko.json

@@ -1,4 +1,6 @@
 {
-  "next": "다음",
-  "prev": "이전"
+  "next": "다음 슬라이드",
+  "prev": "이전 슬라이드",
+  "slides": "슬라이드",
+  "slide": "슬라이드 {slideNumber}"
 }

package/src/translations/nl.json

@@ -1,4 +1,6 @@
 {
-  "next": "Volgende",
-  "prev": "Vorige"
+  "next": "Volgende dia",
+  "prev": "Vorige dia",
+  "slides": "Dia's",
+  "slide": "Dia {slideNumber}"
 }

package/src/translations/pl.json

@@ -1,4 +1,6 @@
 {
-  "next": "Dalej",
-  "prev": "Poprzednio"
+  "next": "Następny slajd",
+  "prev": "Poprzedni slajd",
+  "slides": "Slajdy",
+  "slide": "Slajd {slideNumber}"
 }

package/src/translations/pt.json

@@ -1,4 +1,6 @@
 {
-  "next": "Seguinte",
-  "prev": "Anterior"
+  "next": "Próximo slide",
+  "prev": "Slide anterior",
+  "slides": "Slides",
+  "slide": "Slide {slideNumber}"
 }

package/src/translations/sv.json

@@ -1,4 +1,6 @@
 {
-  "next": "Nästa",
-  "prev": "Föregående"
+  "next": "Nästa bild",
+  "prev": "Föregående bild",
+  "slides": "Bilder",
+  "slide": "Bild {slideNumber}"
 }

package/src/translations/tr.json

@@ -1,4 +1,6 @@
 {
-  "next": "Sonraki",
-  "prev": "Önceki"
+  "next": "Sonraki slayt",
+  "prev": "Önceki slayt",
+  "slides": "Slaytlar",
+  "slide": "Slayt {slideNumber}"
 }

package/src/translations/vi.json

@@ -1,4 +1,6 @@
 {
-  "next": "Tiếp",
-  "prev": "Trước"
+  "next": "Slide tiếp theo",
+  "prev": "Slide trước",
+  "slides": "Slide",
+  "slide": "Slide {slideNumber}"
 }

package/src/translations/zh.json

@@ -1,4 +1,6 @@
 {
-  "next": "下一个",
-  "prev": "上一个"
+  "next": "下一张幻灯片",
+  "prev": "上一张幻灯片",
+  "slides": "幻灯片",
+  "slide": "幻灯片 {slideNumber}"
 }