@semcore/carousel 3.42.5 → 3.43.4-prerelease.1

package/lib/cjs/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/lib/cjs/translations/de.json

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

package/lib/cjs/translations/en.json

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

package/lib/cjs/translations/es.json

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

package/lib/cjs/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/lib/cjs/translations/it.json

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

package/lib/cjs/translations/ja.json

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

package/lib/cjs/translations/ko.json

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

package/lib/cjs/translations/nl.json

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

package/lib/cjs/translations/pl.json

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

package/lib/cjs/translations/pt.json

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

package/lib/cjs/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/lib/cjs/translations/tr.json

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

package/lib/cjs/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/lib/cjs/translations/zh.json

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

package/lib/es6/Carousel.js

@@ -29,27 +29,27 @@ import i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 import logger from '@semcore/utils/lib/logger';
 /*__reshadow-styles__:"./style/carousel.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SCarousel_1pqd9_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SCarousel_1pqd9_gg_.__keyboardFocused_1pqd9_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SContainer_1pqd9_gg_{display:flex;transition:transform var(--duration_1pqd9) ease-in-out}.___SContentBox_1pqd9_gg_,.___SModalBox_1pqd9_gg_{overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SModalContainer_1pqd9_gg_{display:flex;transition:transform var(--duration_1pqd9) ease-in-out}.___SItem_1pqd9_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_1pqd9);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden}.___SItem_1pqd9_gg_.__zoomIn_1pqd9_gg_{cursor:zoom-in}.___SItem_1pqd9_gg_.__zoomOut_1pqd9_gg_{cursor:zoom-out}.___SIndicators_1pqd9_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px)}.___SIndicator_1pqd9_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;border-radius:var(--intergalactic-control-rounded, 6px);background-color:var(--intergalactic-icon-secondary-neutral, #a9abb6);opacity:var(--intergalactic-disabled-opacity, 0.3);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@media (hover:hover){.___SIndicator_1pqd9_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_1pqd9_gg_.__active_1pqd9_gg_{opacity:1}.___SIndicator_1pqd9_gg_.__inverted_1pqd9_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_1pqd9_gg_,.___SPrev_1pqd9_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_1pqd9_gg_ .___SNextButton_1pqd9_gg_ span:has(>svg:only-child),.___SNext_1pqd9_gg_ .___SPrevButton_1pqd9_gg_ span:has(>svg:only-child),.___SPrev_1pqd9_gg_ .___SNextButton_1pqd9_gg_ span:has(>svg:only-child),.___SPrev_1pqd9_gg_ .___SPrevButton_1pqd9_gg_ span:has(>svg:only-child){margin-left:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SPrev_1pqd9_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_1pqd9_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_1pqd9_gg_.__disabled_1pqd9_gg_,.___SPrev_1pqd9_gg_.__disabled_1pqd9_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_1pqd9_gg_{transition:none}}" /*__inner_css_end__*/, "1pqd9_gg_") /*__reshadow_css_end__*/, {
-  "__SCarousel": "___SCarousel_1pqd9_gg_",
-  "_keyboardFocused": "__keyboardFocused_1pqd9_gg_",
-  "__SContainer": "___SContainer_1pqd9_gg_",
-  "--duration": "--duration_1pqd9",
-  "__SContentBox": "___SContentBox_1pqd9_gg_",
-  "__SModalBox": "___SModalBox_1pqd9_gg_",
-  "__SModalContainer": "___SModalContainer_1pqd9_gg_",
-  "__SItem": "___SItem_1pqd9_gg_",
-  "--transform": "--transform_1pqd9",
-  "_zoomIn": "__zoomIn_1pqd9_gg_",
-  "_zoomOut": "__zoomOut_1pqd9_gg_",
-  "__SIndicators": "___SIndicators_1pqd9_gg_",
-  "__SIndicator": "___SIndicator_1pqd9_gg_",
-  "_active": "__active_1pqd9_gg_",
-  "_inverted": "__inverted_1pqd9_gg_",
-  "__SPrev": "___SPrev_1pqd9_gg_",
-  "__SNext": "___SNext_1pqd9_gg_",
-  "_disabled": "__disabled_1pqd9_gg_",
-  "__SPrevButton": "___SPrevButton_1pqd9_gg_",
-  "__SNextButton": "___SNextButton_1pqd9_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SCarousel_11eq6_gg_{overflow:hidden;outline:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.___SContainer_11eq6_gg_{display:flex;transition:transform var(--duration_11eq6) ease-in-out}.___SContentBox_11eq6_gg_,.___SModalBox_11eq6_gg_{position:relative;overflow:hidden;border-radius:var(--intergalactic-surface-rounded, 6px)}.___SContentBox_11eq6_gg_:has(.___SItem_11eq6_gg_.__keyboardFocused_11eq6_gg_):after,.___SModalBox_11eq6_gg_:has(.___SItem_11eq6_gg_.__keyboardFocused_11eq6_gg_):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_11eq6_gg_{display:flex;transition:transform var(--duration_11eq6) ease-in-out}.___SItem_11eq6_gg_{flex:0 0 100%;max-width:100%;box-sizing:border-box;transform:var(--transform_11eq6);border-radius:var(--intergalactic-surface-rounded, 6px);overflow:hidden;outline:0}.___SItem_11eq6_gg_.__zoomIn_11eq6_gg_{cursor:zoom-in}.___SItem_11eq6_gg_.__zoomOut_11eq6_gg_{cursor:zoom-out}.___SIndicators_11eq6_gg_{display:flex;justify-content:center;margin-top:var(--intergalactic-spacing-4x, 16px);outline:0;position:relative}.___SIndicators_11eq6_gg_.__keyboardFocused_11eq6_gg_: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_11eq6_gg_{margin:0 calc(.5*var(--intergalactic-spacing-3x, 12px));cursor:pointer;display:block;width:12px;height:12px;border-radius:var(--intergalactic-control-rounded, 6px);background-color:var(--intergalactic-icon-secondary-neutral, #a9abb6);opacity:var(--intergalactic-disabled-opacity, 0.3);-o-object-fit:cover;object-fit:cover;transition:ease-in-out opacity .1s}@media (hover:hover){.___SIndicator_11eq6_gg_:hover{opacity:calc(2*var(--intergalactic-disabled-opacity, 0.3))}}.___SIndicator_11eq6_gg_.__active_11eq6_gg_{opacity:1}.___SIndicator_11eq6_gg_.__inverted_11eq6_gg_{background-color:var(--intergalactic-icon-primary-invert, #ffffff)}.___SNext_11eq6_gg_,.___SPrev_11eq6_gg_{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--intergalactic-icon-primary-neutral, #6c6e79)}.___SNext_11eq6_gg_ .___SNextButton_11eq6_gg_ span:has(>svg:only-child),.___SNext_11eq6_gg_ .___SPrevButton_11eq6_gg_ span:has(>svg:only-child),.___SPrev_11eq6_gg_ .___SNextButton_11eq6_gg_ span:has(>svg:only-child),.___SPrev_11eq6_gg_ .___SPrevButton_11eq6_gg_ span:has(>svg:only-child){margin-left:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(2*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SNextButton_11eq6_gg_:focus-visible,.___SPrevButton_11eq6_gg_:focus-visible{box-shadow:none}.___SNextButton_11eq6_gg_:focus-visible:after,.___SPrevButton_11eq6_gg_:focus-visible: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_11eq6_gg_{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SNext_11eq6_gg_{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SNext_11eq6_gg_.__disabled_11eq6_gg_,.___SPrev_11eq6_gg_.__disabled_11eq6_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}@media (prefers-reduced-motion){.___SContainer_11eq6_gg_{transition:none}}" /*__inner_css_end__*/, "11eq6_gg_") /*__reshadow_css_end__*/, {
+  "__SCarousel": "___SCarousel_11eq6_gg_",
+  "__SContainer": "___SContainer_11eq6_gg_",
+  "--duration": "--duration_11eq6",
+  "__SModalContainer": "___SModalContainer_11eq6_gg_",
+  "__SItem": "___SItem_11eq6_gg_",
+  "--transform": "--transform_11eq6",
+  "_zoomIn": "__zoomIn_11eq6_gg_",
+  "_zoomOut": "__zoomOut_11eq6_gg_",
+  "__SIndicators": "___SIndicators_11eq6_gg_",
+  "_keyboardFocused": "__keyboardFocused_11eq6_gg_",
+  "__SIndicator": "___SIndicator_11eq6_gg_",
+  "_active": "__active_11eq6_gg_",
+  "_inverted": "__inverted_11eq6_gg_",
+  "__SPrev": "___SPrev_11eq6_gg_",
+  "__SNext": "___SNext_11eq6_gg_",
+  "_disabled": "__disabled_11eq6_gg_",
+  "__SContentBox": "___SContentBox_11eq6_gg_",
+  "__SModalBox": "___SModalBox_11eq6_gg_",
+  "__SPrevButton": "___SPrevButton_11eq6_gg_",
+  "__SNextButton": "___SNextButton_11eq6_gg_"
 });
 import { findAllComponents } from '@semcore/utils/lib/findComponent';
 import { createBreakpoints } from '@semcore/breakpoints';
@@ -60,8 +60,7 @@ var MAP_TRANSFORM = {
 };
 var enhance = {
   uid: uniqueIDEnhancement(),
-  getI18nText: i18nEnhance(localizedMessages),
-  keyboardFocusEnhance: keyboardFocusEnhance()
+  i18nEnahnce: i18nEnhance(localizedMessages)
 };
 var media = ['(min-width: 481px)', '(max-width: 480px)'];
 var BreakPoints = createBreakpoints(media);
@@ -348,7 +347,8 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
     value: function getPrevProps() {
       var _this$asProps = this.asProps,
         bounded = _this$asProps.bounded,
-        getI18nText = _this$asProps.getI18nText;
+        getI18nText = _this$asProps.getI18nText,
+        uid = _this$asProps.uid;
       var _this$state3 = this.state,
         items = _this$state3.items,
         selectedIndex = _this$state3.selectedIndex;
@@ -361,7 +361,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         onKeyDown: this.bindHandlerKeydownControl('left'),
         disabled: disabled,
         label: getI18nText('prev'),
-        tabIndex: -1
+        'aria-controls': "igc-".concat(uid, "-carousel")
       };
     }
   }, {
@@ -369,7 +369,8 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
     value: function getNextProps() {
       var _this$asProps2 = this.asProps,
         bounded = _this$asProps2.bounded,
-        getI18nText = _this$asProps2.getI18nText;
+        getI18nText = _this$asProps2.getI18nText,
+        uid = _this$asProps2.uid;
       var _this$state4 = this.state,
         items = _this$state4.items,
         selectedIndex = _this$state4.selectedIndex;
@@ -382,7 +383,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         onKeyDown: this.bindHandlerKeydownControl('right'),
         disabled: disabled,
         label: getI18nText('next'),
-        tabIndex: -1
+        'aria-controls': "igc-".concat(uid, "-carousel")
       };
     }
   }, {
@@ -390,6 +391,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
     value: function getIndicatorsProps() {
       var _this4 = this;
       var items = this.state.items;
+      var getI18nText = this.asProps.getI18nText;
       return {
         items: items.map(function (item, key) {
           return {
@@ -397,6 +399,22 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
             onClick: _this4.bindHandlerClickIndicator(key),
             key: key
           };
+        }),
+        role: 'tablist',
+        'aria-label': getI18nText('slides')
+      };
+    }
+  }, {
+    key: "getIndicatorProps",
+    value: function getIndicatorProps(_, index) {
+      var isCurrent = this.isSelected(index);
+      var getI18nText = this.asProps.getI18nText;
+      return {
+        role: 'tab',
+        'aria-selected': isCurrent,
+        'aria-controls': "igc-".concat(this.asProps.uid, "-carousel-item-").concat(index),
+        'aria-label': getI18nText('slide', {
+          slideNumber: index + 1
         })
       };
     }
@@ -428,9 +446,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "isSelected",
     value: function isSelected(index) {
-      var _this$state7 = this.state,
-        items = _this$state7.items,
-        selectedIndex = _this$state7.selectedIndex;
+      var items = this.state.items;
       if (items.length === 0) {
         return true;
       }
@@ -448,10 +464,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
         styles = _this$asProps3.styles,
         uid = _this$asProps3.uid,
         duration = _this$asProps3.duration,
-        hasZoom = _this$asProps3.zoom,
-        zoomWidth = _this$asProps3.zoomWidth,
-        ariaLabel = _this$asProps3['aria-label'],
-        ariaRoledescription = _this$asProps3['aria-roledescription'];
+        zoomWidth = _this$asProps3.zoomWidth;
       var isOpenZoom = this.state.isOpenZoom;
       return _ref9 = sstyled(styles), /*#__PURE__*/React.createElement(Modal, _ref9.cn("Modal", {
         "visible": isOpenZoom,
@@ -463,7 +476,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
       }), !isSmall && /*#__PURE__*/React.createElement(Carousel.Prev, {
         inverted: true
       }), /*#__PURE__*/React.createElement(SModalBox, _ref9.cn("SModalBox", {}), /*#__PURE__*/React.createElement(SModalContainer, _ref9.cn("SModalContainer", _objectSpread({}, _assignProps({
-        "role": 'list',
+        "aria-live": 'polite',
         "use:duration": "".concat(duration, "ms"),
         "ref": this.refModalContainer,
         "use:w": undefined,
@@ -503,6 +516,7 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
       var _this$asProps4 = this.asProps,
         styles = _this$asProps4.styles,
         Children = _this$asProps4.Children,
+        uid = _this$asProps4.uid,
         hasZoom = _this$asProps4.zoom,
         ariaLabel = _this$asProps4['aria-label'],
         ariaRoledescription = _this$asProps4['aria-roledescription'],
@@ -510,13 +524,15 @@ var CarouselRoot = /*#__PURE__*/function (_Component) {
       var ComponentItems = findAllComponents(Children, ['Carousel.Item']);
       var Controls = findAllComponents(Children, ['Carousel.Prev', 'Carousel.Next', 'Carousel.Indicators']);
       return _ref10 = sstyled(styles), /*#__PURE__*/React.createElement(SCarousel, _ref10.cn("SCarousel", _objectSpread({}, _assignProps2({
-        "role": 'group',
+        "role": 'region',
+        "roledescription": 'carousel',
         "onKeyDown": this.handlerKeyDown,
         "onTouchStart": this.handlerTouchStart,
         "onTouchEnd": this.handlerTouchEnd,
-        "ref": this.refCarousel
+        "ref": this.refCarousel,
+        "id": "igc-".concat(uid, "-carousel"),
+        "aria-roledescription": ariaRoledescription
       }, _ref2))), Controls.length === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flex, _ref10.cn("Flex", {}), /*#__PURE__*/React.createElement(Carousel.Prev, null), /*#__PURE__*/React.createElement(SContentBox, _ref10.cn("SContentBox", {}), /*#__PURE__*/React.createElement(Carousel.Container, {
-        "aria-roledescription": ariaRoledescription,
         "aria-label": ariaLabel
       }, /*#__PURE__*/React.createElement(Children, _ref10.cn("Children", {})))), /*#__PURE__*/React.createElement(Carousel.Next, null)), indicators === 'default' && /*#__PURE__*/React.createElement(Carousel.Indicators, null), indicators === 'preview' && /*#__PURE__*/React.createElement(Carousel.Indicators, null, function () {
         return ComponentItems.map(function (item, index) {
@@ -555,8 +571,8 @@ var Container = function Container(props) {
   var styles = props.styles,
     duration = props.duration;
   return _ref11 = sstyled(styles), /*#__PURE__*/React.createElement(SContainer, _ref11.cn("SContainer", _objectSpread({}, _assignProps3({
-    "role": 'list',
-    "use:duration": "".concat(duration, "ms")
+    "use:duration": "".concat(duration, "ms"),
+    "aria-live": 'polite'
   }, _ref3))));
 };
 var Item = /*#__PURE__*/function (_Component2) {
@@ -570,6 +586,7 @@ var Item = /*#__PURE__*/function (_Component2) {
     }
     _this7 = _super2.call.apply(_super2, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this7), "refItem", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this7), "keepFocusTimeout", void 0);
     return _this7;
   }
   _createClass(Item, [{
@@ -594,15 +611,25 @@ var Item = /*#__PURE__*/function (_Component2) {
       toggleItem && refItem && toggleItem({
         node: refItem
       }, true);
+      clearTimeout(this.keepFocusTimeout);
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
+      clearTimeout(this.keepFocusTimeout);
       var transform = this.props.transform;
       var refItem = this.refItem.current;
       if (prevProps.transform !== transform && refItem) {
         refItem.style.transform = "translateX(".concat(transform, "%)");
       }
+      if (this.props.current) {
+        this.keepFocusTimeout = setTimeout(function () {
+          var _document$activeEleme;
+          if (document.activeElement !== refItem && ((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.dataset.carousel) === (refItem === null || refItem === void 0 ? void 0 : refItem.dataset.carousel)) {
+            refItem === null || refItem === void 0 ? void 0 : refItem.focus();
+          }
+        }, 100);
+      }
     }
   }, {
     key: "render",
@@ -615,14 +642,15 @@ var Item = /*#__PURE__*/function (_Component2) {
         uid = _this$props2.uid,
         current = _this$props2.current,
         zoomIn = _this$props2.zoomIn,
-        onToggleZoomModal = _this$props2.onToggleZoomModal,
-        transform = _this$props2.transform;
+        onToggleZoomModal = _this$props2.onToggleZoomModal;
       var SItem = Box;
       return _ref12 = sstyled(styles), /*#__PURE__*/React.createElement(SItem, _ref12.cn("SItem", _objectSpread({}, _assignProps4({
         "ref": this.refItem,
-        "role": 'listitem',
+        "role": 'tabpanel',
+        "data-carousel": "igc-".concat(uid, "-carousel"),
         "id": "igc-".concat(uid, "-carousel-item-").concat(index),
         "aria-current": current,
+        "use:tabIndex": current ? 0 : -1,
         "onClick": zoomIn ? onToggleZoomModal : undefined,
         "zoomIn": zoomIn
       }, _ref4))));
@@ -630,6 +658,7 @@ var Item = /*#__PURE__*/function (_Component2) {
   }]);
   return Item;
 }(Component);
+_defineProperty(Item, "enhance", [keyboardFocusEnhance(false)]);
 var Prev = function Prev(props) {
   var _ref5 = arguments[0],
     _ref13;
@@ -639,8 +668,7 @@ var Prev = function Prev(props) {
     label = props.label,
     _props$top = props.top,
     top = _props$top === void 0 ? 0 : _props$top,
-    inverted = props.inverted,
-    tabIndex = props.tabIndex;
+    inverted = props.inverted;
   var SPrev = Box;
   var SPrevButton = Button;
   return _ref13 = sstyled(styles), /*#__PURE__*/React.createElement(SPrev, _ref13.cn("SPrev", _objectSpread({}, _assignProps5({
@@ -650,8 +678,7 @@ var Prev = function Prev(props) {
     "aria-label": label,
     "theme": inverted ? 'invert' : 'muted',
     "use": 'tertiary',
-    "size": 'l',
-    "tabIndex": tabIndex
+    "size": 'l'
   })));
 };
 var Next = function Next(props) {
@@ -663,8 +690,7 @@ var Next = function Next(props) {
     label = props.label,
     _props$top2 = props.top,
     top = _props$top2 === void 0 ? 0 : _props$top2,
-    inverted = props.inverted,
-    tabIndex = props.tabIndex;
+    inverted = props.inverted;
   var SNext = Box;
   var SNextButton = Button;
   return _ref14 = sstyled(styles), /*#__PURE__*/React.createElement(SNext, _ref14.cn("SNext", _objectSpread({}, _assignProps6({
@@ -674,8 +700,7 @@ var Next = function Next(props) {
     "aria-label": label,
     "theme": inverted ? 'invert' : 'muted',
     "use": 'tertiary',
-    "size": 'l',
-    "tabIndex": tabIndex
+    "size": 'l'
   })));
 };
 var Indicators = function Indicators(_ref19) {
@@ -688,13 +713,9 @@ var Indicators = function Indicators(_ref19) {
   var SIndicators = Box;
   if (Children.origin) {
     var _ref15;
-    return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicators, _ref15.cn("SIndicators", _objectSpread({}, _assignProps7({
-      "aria-hidden": 'true'
-    }, _ref7))), /*#__PURE__*/React.createElement(Children, _ref15.cn("Children", {})));
+    return _ref15 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicators, _ref15.cn("SIndicators", _objectSpread({}, _assignProps7({}, _ref7))), /*#__PURE__*/React.createElement(Children, _ref15.cn("Children", {})));
   }
-  return _ref16 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicators, _ref16.cn("SIndicators", _objectSpread({}, _assignProps8({
-    "aria-hidden": 'true'
-  }, _ref7))), items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+  return _ref16 = sstyled(styles), /*#__PURE__*/React.createElement(SIndicators, _ref16.cn("SIndicators", _objectSpread({}, _assignProps8({}, _ref7))), items === null || items === void 0 ? void 0 : items.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Carousel.Indicator, _extends({
       key: index
     }, item, {
@@ -702,6 +723,7 @@ var Indicators = function Indicators(_ref19) {
     }));
   }));
 };
+Indicators.enhance = [keyboardFocusEnhance()];
 var Indicator = function Indicator(_ref20) {
   var _ref8 = arguments[0],
     _ref17;