diff --git a/packages/main/__karma_snapshots__/Carousel.md b/packages/main/__karma_snapshots__/Carousel.md
index fecee60eb7e..5758be2d752 100644
--- a/packages/main/__karma_snapshots__/Carousel.md
+++ b/packages/main/__karma_snapshots__/Carousel.md
@@ -7,75 +7,75 @@
   <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
-        <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
+        <div className="Carousel--carousel--- Carousel--carouselArrowPlacementContent---" style={{...}} title={[undefined]} slot={[undefined]} role="list" tabIndex={0} onKeyDown={[Function]}>
           <div className="Carousel--carouselInner---" style={{...}}>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={0} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={0} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 1
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={1} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={1} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 2
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={2} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={2} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 3
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={3} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={3} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 4
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={4} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={4} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 5
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={5} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={5} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 6
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={6} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={6} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 7
               </p>
             </div>
           </div>
           <CarouselPagination arrowsPlacement="Content" showPageIndicator={true} pageIndicatorPlacement="Bottom" activePage={0} goToPreviousPage={[Function]} goToNextPage={[Function]}>
-            <div className="-pagination--- -paginationArrowContent--- -paginationBottom---">
-              <div data-value="paginationArrow" className="-paginationArrow---" onClick={[Function]}>
+            <div className="CarouselPagination--pagination--- CarouselPagination--paginationArrowContent--- CarouselPagination--paginationBottom---">
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-left">
                   <ui5-icon src="sap-icon://slim-arrow-left" class="" />
                 </Icon>
               </div>
-              <div className="-paginationIndicator---">
-                <span className="-paginationIconActive--- -paginationIcon---" aria-label="Item 1 of 7 displayed">
+              <div className="CarouselPagination--paginationIndicator---">
+                <span className="CarouselPagination--paginationIcon--- CarouselPagination--paginationIconActive---" aria-label="Item 1 of 7 displayed">
                   1
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 2 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 2 of 7 displayed">
                   2
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 3 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 3 of 7 displayed">
                   3
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 4 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 4 of 7 displayed">
                   4
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 5 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 5 of 7 displayed">
                   5
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 6 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 6 of 7 displayed">
                   6
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 7 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 7 of 7 displayed">
                   7
                 </span>
               </div>
-              <div data-value="paginationArrow" className="-paginationArrow---" onClick={[Function]}>
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-right">
                   <ui5-icon src="sap-icon://slim-arrow-right" class="" />
                 </Icon>
@@ -96,74 +96,74 @@
   <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
-        <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
+        <div className="Carousel--carousel--- Carousel--carouselArrowPlacementContent---" style={{...}} title={[undefined]} slot={[undefined]} role="list" tabIndex={0} onKeyDown={[Function]}>
           <div className="Carousel--carouselInner---" style={{...}}>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={0} aria-setsize={10} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={0} aria-setsize={10} style={{...}}>
               <p>
                 Carousel 1
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={1} aria-setsize={10} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={1} aria-setsize={10} style={{...}}>
               <p>
                 Carousel 2
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={2} aria-setsize={10} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={2} aria-setsize={10} style={{...}}>
               <p>
                 Carousel 3
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={3} aria-setsize={10} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={3} aria-setsize={10} style={{...}}>
               <p>
                 Carousel 4
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={4} aria-setsize={10} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={4} aria-setsize={10} style={{...}}>
               <p>
                 Carousel 5
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={5} aria-setsize={10} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={5} aria-setsize={10} style={{...}}>
               <p>
                 Carousel 6
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={6} aria-setsize={10} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={6} aria-setsize={10} style={{...}}>
               <p>
                 Carousel 7
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={7} aria-setsize={10} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={7} aria-setsize={10} style={{...}}>
               <p>
                 Carousel 8
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={8} aria-setsize={10} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={8} aria-setsize={10} style={{...}}>
               <p>
                 Carousel 9
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={9} aria-setsize={10} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={9} aria-setsize={10} style={{...}}>
               <p>
                 Carousel 10
               </p>
             </div>
           </div>
           <CarouselPagination arrowsPlacement="Content" showPageIndicator={true} pageIndicatorPlacement="Bottom" activePage={0} goToPreviousPage={[Function]} goToNextPage={[Function]}>
-            <div className="-pagination--- -paginationArrowContent--- -paginationBottom---">
-              <div data-value="paginationArrow" className="-paginationArrow---" onClick={[Function]}>
+            <div className="CarouselPagination--pagination--- CarouselPagination--paginationArrowContent--- CarouselPagination--paginationBottom---">
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-left">
                   <ui5-icon src="sap-icon://slim-arrow-left" class="" />
                 </Icon>
               </div>
-              <div className="-paginationIndicator---">
+              <div className="CarouselPagination--paginationIndicator---">
                 <Label for="">
                   <ui5-label for="" class="">
                     Showing 1 of 10
                   </ui5-label>
                 </Label>
               </div>
-              <div data-value="paginationArrow" className="-paginationArrow---" onClick={[Function]}>
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-right">
                   <ui5-icon src="sap-icon://slim-arrow-right" class="" />
                 </Icon>
@@ -184,75 +184,75 @@
   <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel arrowsPlacement="Content" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
-        <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
+        <div className="Carousel--carousel--- Carousel--carouselArrowPlacementContent---" style={{...}} title={[undefined]} slot={[undefined]} role="list" tabIndex={0} onKeyDown={[Function]}>
           <div className="Carousel--carouselInner---" style={{...}}>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={0} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={0} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 1
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={1} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={1} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 2
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={2} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={2} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 3
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={3} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={3} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 4
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={4} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={4} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 5
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={5} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={5} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 6
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={6} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={6} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 7
               </p>
             </div>
           </div>
           <CarouselPagination arrowsPlacement="Content" showPageIndicator={true} pageIndicatorPlacement="Bottom" activePage={0} goToPreviousPage={[Function]} goToNextPage={[Function]}>
-            <div className="-pagination--- -paginationArrowContent--- -paginationBottom---">
-              <div data-value="paginationArrow" className="-paginationArrow---" onClick={[Function]}>
+            <div className="CarouselPagination--pagination--- CarouselPagination--paginationArrowContent--- CarouselPagination--paginationBottom---">
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-left">
                   <ui5-icon src="sap-icon://slim-arrow-left" class="" />
                 </Icon>
               </div>
-              <div className="-paginationIndicator---">
-                <span className="-paginationIconActive--- -paginationIcon---" aria-label="Item 1 of 7 displayed">
+              <div className="CarouselPagination--paginationIndicator---">
+                <span className="CarouselPagination--paginationIcon--- CarouselPagination--paginationIconActive---" aria-label="Item 1 of 7 displayed">
                   1
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 2 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 2 of 7 displayed">
                   2
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 3 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 3 of 7 displayed">
                   3
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 4 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 4 of 7 displayed">
                   4
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 5 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 5 of 7 displayed">
                   5
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 6 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 6 of 7 displayed">
                   6
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 7 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 7 of 7 displayed">
                   7
                 </span>
               </div>
-              <div data-value="paginationArrow" className="-paginationArrow---" onClick={[Function]}>
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-right">
                   <ui5-icon src="sap-icon://slim-arrow-right" class="" />
                 </Icon>
@@ -273,7 +273,7 @@
   <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel arrowsPlacement="PageIndicator" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
-        <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
+        <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list" tabIndex={0} onKeyDown={[Function]}>
           <div className="Carousel--carouselInner---" style={{...}}>
             <div className="Carousel--carouselItem---" role="listitem" aria-posinset={0} aria-setsize={7} style={{...}}>
               <p>
@@ -312,36 +312,36 @@
             </div>
           </div>
           <CarouselPagination arrowsPlacement="PageIndicator" showPageIndicator={true} pageIndicatorPlacement="Bottom" activePage={0} goToPreviousPage={[Function]} goToNextPage={[Function]}>
-            <div className="-pagination--- -paginationBottom---">
-              <div data-value={{...}} className="-paginationArrow---" onClick={[Function]}>
+            <div className="CarouselPagination--pagination--- CarouselPagination--paginationBottom---">
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-left">
                   <ui5-icon src="sap-icon://slim-arrow-left" class="" />
                 </Icon>
               </div>
-              <div className="-paginationIndicator---">
-                <span className="-paginationIconActive--- -paginationIcon---" aria-label="Item 1 of 7 displayed">
+              <div className="CarouselPagination--paginationIndicator---">
+                <span className="CarouselPagination--paginationIcon--- CarouselPagination--paginationIconActive---" aria-label="Item 1 of 7 displayed">
                   1
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 2 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 2 of 7 displayed">
                   2
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 3 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 3 of 7 displayed">
                   3
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 4 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 4 of 7 displayed">
                   4
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 5 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 5 of 7 displayed">
                   5
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 6 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 6 of 7 displayed">
                   6
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 7 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 7 of 7 displayed">
                   7
                 </span>
               </div>
-              <div data-value={{...}} className="-paginationArrow---" onClick={[Function]}>
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-right">
                   <ui5-icon src="sap-icon://slim-arrow-right" class="" />
                 </Icon>
@@ -362,38 +362,38 @@
   <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel arrowsPlacement="PageIndicator" pageIndicatorPlacement="Top" activePage={0} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false}>
-        <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
+        <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list" tabIndex={0} onKeyDown={[Function]}>
           <CarouselPagination arrowsPlacement="PageIndicator" showPageIndicator={true} pageIndicatorPlacement="Top" activePage={0} goToPreviousPage={[Function]} goToNextPage={[Function]}>
-            <div className="-pagination--- -paginationTop---">
-              <div data-value={{...}} className="-paginationArrow---" onClick={[Function]}>
+            <div className="CarouselPagination--pagination--- CarouselPagination--paginationTop---">
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-left">
                   <ui5-icon src="sap-icon://slim-arrow-left" class="" />
                 </Icon>
               </div>
-              <div className="-paginationIndicator---">
-                <span className="-paginationIconActive--- -paginationIcon---" aria-label="Item 1 of 7 displayed">
+              <div className="CarouselPagination--paginationIndicator---">
+                <span className="CarouselPagination--paginationIcon--- CarouselPagination--paginationIconActive---" aria-label="Item 1 of 7 displayed">
                   1
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 2 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 2 of 7 displayed">
                   2
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 3 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 3 of 7 displayed">
                   3
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 4 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 4 of 7 displayed">
                   4
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 5 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 5 of 7 displayed">
                   5
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 6 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 6 of 7 displayed">
                   6
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 7 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 7 of 7 displayed">
                   7
                 </span>
               </div>
-              <div data-value={{...}} className="-paginationArrow---" onClick={[Function]}>
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-right">
                   <ui5-icon src="sap-icon://slim-arrow-right" class="" />
                 </Icon>
@@ -449,38 +449,38 @@
   <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel arrowsPlacement="PageIndicator" pageIndicatorPlacement="Top" activePage={1} onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false}>
-        <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
+        <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list" tabIndex={0} onKeyDown={[Function]}>
           <CarouselPagination arrowsPlacement="PageIndicator" showPageIndicator={true} pageIndicatorPlacement="Top" activePage={1} goToPreviousPage={[Function]} goToNextPage={[Function]}>
-            <div className="-pagination--- -paginationTop---">
-              <div data-value={{...}} className="-paginationArrow---" onClick={[Function]}>
+            <div className="CarouselPagination--pagination--- CarouselPagination--paginationTop---">
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-left">
                   <ui5-icon src="sap-icon://slim-arrow-left" class="" />
                 </Icon>
               </div>
-              <div className="-paginationIndicator---">
-                <span className="null -paginationIcon---" aria-label="Item 1 of 7 displayed">
+              <div className="CarouselPagination--paginationIndicator---">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 1 of 7 displayed">
                   1
                 </span>
-                <span className="-paginationIconActive--- -paginationIcon---" aria-label="Item 2 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon--- CarouselPagination--paginationIconActive---" aria-label="Item 2 of 7 displayed">
                   2
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 3 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 3 of 7 displayed">
                   3
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 4 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 4 of 7 displayed">
                   4
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 5 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 5 of 7 displayed">
                   5
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 6 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 6 of 7 displayed">
                   6
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 7 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 7 of 7 displayed">
                   7
                 </span>
               </div>
-              <div data-value={{...}} className="-paginationArrow---" onClick={[Function]}>
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-right">
                   <ui5-icon src="sap-icon://slim-arrow-right" class="" />
                 </Icon>
@@ -538,75 +538,75 @@
   <JssProvider generateId={[Function]} jss={[undefined]}>
     <ThemeProvider theme={{...}}>
       <Carousel activePage={0} arrowsPlacement="Content" onPageChanged={[Function: onPageChanged]} height="100%" width="100%" showPageIndicator={true} loop={false} pageIndicatorPlacement="Bottom">
-        <div className="Carousel--carousel---" style={{...}} title={[undefined]} slot={[undefined]} role="list">
+        <div className="Carousel--carousel--- Carousel--carouselArrowPlacementContent---" style={{...}} title={[undefined]} slot={[undefined]} role="list" tabIndex={0} onKeyDown={[Function]}>
           <div className="Carousel--carouselInner---" style={{...}}>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={0} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={0} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 1
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={1} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={1} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 2
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={2} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={2} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 3
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={3} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={3} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 4
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={4} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={4} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 5
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={5} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={5} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 6
               </p>
             </div>
-            <div className="Carousel--carouselItem--- Carousel--carouselItemContentIndicator---" role="listitem" aria-posinset={6} aria-setsize={7} style={{...}}>
+            <div className="Carousel--carouselItem---" role="listitem" aria-posinset={6} aria-setsize={7} style={{...}}>
               <p>
                 Carousel 7
               </p>
             </div>
           </div>
           <CarouselPagination arrowsPlacement="Content" showPageIndicator={true} pageIndicatorPlacement="Bottom" activePage={0} goToPreviousPage={[Function]} goToNextPage={[Function]}>
-            <div className="-pagination--- -paginationArrowContent--- -paginationBottom---">
-              <div data-value="paginationArrow" className="-paginationArrow---" onClick={[Function]}>
+            <div className="CarouselPagination--pagination--- CarouselPagination--paginationArrowContent--- CarouselPagination--paginationBottom---">
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-left">
                   <ui5-icon src="sap-icon://slim-arrow-left" class="" />
                 </Icon>
               </div>
-              <div className="-paginationIndicator---">
-                <span className="-paginationIconActive--- -paginationIcon---" aria-label="Item 1 of 7 displayed">
+              <div className="CarouselPagination--paginationIndicator---">
+                <span className="CarouselPagination--paginationIcon--- CarouselPagination--paginationIconActive---" aria-label="Item 1 of 7 displayed">
                   1
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 2 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 2 of 7 displayed">
                   2
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 3 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 3 of 7 displayed">
                   3
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 4 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 4 of 7 displayed">
                   4
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 5 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 5 of 7 displayed">
                   5
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 6 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 6 of 7 displayed">
                   6
                 </span>
-                <span className="null -paginationIcon---" aria-label="Item 7 of 7 displayed">
+                <span className="CarouselPagination--paginationIcon---" aria-label="Item 7 of 7 displayed">
                   7
                 </span>
               </div>
-              <div data-value="paginationArrow" className="-paginationArrow---" onClick={[Function]}>
+              <div data-value="paginationArrow" className="CarouselPagination--paginationArrow---" onClick={[Function]}>
                 <Icon src="sap-icon://slim-arrow-right">
                   <ui5-icon src="sap-icon://slim-arrow-right" class="" />
                 </Icon>
diff --git a/packages/main/src/components/Carousel/Carousel.jss.ts b/packages/main/src/components/Carousel/Carousel.jss.ts
index 89c1edae6da..6eb47988ea4 100644
--- a/packages/main/src/components/Carousel/Carousel.jss.ts
+++ b/packages/main/src/components/Carousel/Carousel.jss.ts
@@ -10,9 +10,29 @@ const styles = ({ parameters }: JSSTheme) => ({
     minWidth: '15.5rem',
     fontFamily: parameters.sapUiFontFamily,
     backgroundColor: parameters.sapUiBaseBG,
-    '&:hover': {
-      '& [data-value="paginationArrow"]': {
-        opacity: 1
+    '&:focus': {
+      outline: 'none',
+      '&:before': {
+        border: '1px solid #000000',
+        position: 'absolute',
+        content: '" "',
+        top: '0',
+        right: '0',
+        bottom: '0',
+        left: '0',
+        zIndex: '2',
+        pointerEvents: 'none'
+      },
+      '&:after': {
+        border: '1px dotted #ffffff',
+        position: 'absolute',
+        content: '" "',
+        top: '0',
+        right: '0',
+        bottom: '0',
+        left: '0',
+        zIndex: '2',
+        pointerEvents: 'none'
       }
     }
   },
@@ -34,9 +54,19 @@ const styles = ({ parameters }: JSSTheme) => ({
     fontSize: '1rem',
     visibility: 'hidden'
   },
-  carouselItemContentIndicator: {
-    padding: '0 4rem',
-    width: 'calc(100% - 8rem)'
+  carouselArrowPlacementContent: {
+    '&:hover': {
+      '& [data-value="paginationArrow"]': {
+        opacity: 1,
+        '& ui5-icon': {
+          transform: 'rotate(0deg)'
+        }
+      }
+    },
+    '& $carouselItem': {
+      padding: '0 4rem',
+      width: 'calc(100% - 8rem)'
+    }
   }
 });
 
diff --git a/packages/main/src/components/Carousel/Carousel.karma.tsx b/packages/main/src/components/Carousel/Carousel.karma.tsx
index fcc5fad95ee..ecfdacc8a5a 100644
--- a/packages/main/src/components/Carousel/Carousel.karma.tsx
+++ b/packages/main/src/components/Carousel/Carousel.karma.tsx
@@ -150,4 +150,24 @@ describe('Carousel', () => {
     );
     expect(wrapper.render().find('[data-value="paginationArrow"]')).to.have.length(0);
   });
+
+  it('Navigation to next page with Keyboard', () => {
+    const callback = sinon.spy();
+    const wrapper = mountThemedComponent(renderCarousel({ activePage: 0, onPageChanged: callback }));
+    wrapper
+      .find('div[role="list"]')
+      .last()
+      .simulate('keydown', { key: 'ArrowRight' });
+    expect(getEventFromCallback(callback).getParameter('selectedIndex')).to.equal(1);
+  });
+
+  it('Navigation to previous page with Keyboard', () => {
+    const callback = sinon.spy();
+    const wrapper = mountThemedComponent(renderCarousel({ activePage: 1, onPageChanged: callback }));
+    wrapper
+      .find('div[role="list"]')
+      .first()
+      .simulate('keydown', { key: 'ArrowLeft' });
+    expect(getEventFromCallback(callback).getParameter('selectedIndex')).to.equal(0);
+  });
 });
diff --git a/packages/main/src/components/Carousel/CarouselPagination.jss.ts b/packages/main/src/components/Carousel/CarouselPagination.jss.ts
index 08b86b71d5f..144e129b6d1 100644
--- a/packages/main/src/components/Carousel/CarouselPagination.jss.ts
+++ b/packages/main/src/components/Carousel/CarouselPagination.jss.ts
@@ -39,15 +39,14 @@ const styles = ({ parameters }: JSSTheme) => ({
     borderRadius: '50%',
     alignSelf: 'center',
     boxSizing: 'border-box',
-    backgroundColor: parameters.sapUiContentNonInteractiveIconColor,
-    '&$paginationIconActive': {
-      margin: '0 0.25rem',
-      width: '0.5rem',
-      height: '0.5rem',
-      backgroundColor: parameters.sapUiSelected
-    }
+    backgroundColor: parameters.sapUiContentNonInteractiveIconColor
+  },
+  paginationIconActive: {
+    margin: '0 0.25rem',
+    width: '0.5rem',
+    height: '0.5rem',
+    backgroundColor: parameters.sapUiSelected
   },
-  paginationIconActive: {},
   paginationArrow: {
     boxShadow: 'none',
     border: `1px solid ${parameters.sapUiButtonBorderColor}`,
@@ -66,6 +65,9 @@ const styles = ({ parameters }: JSSTheme) => ({
       color: parameters.sapUiButtonEmphasizedTextColor
     }
   },
+  '@global html[dir="rtl"] div[data-value="paginationArrow"] ui5-icon': {
+    transform: 'rotate(180deg)'
+  },
   paginationArrowContent: {
     '& $paginationArrow': {
       boxShadow: parameters.sapUiShadowLevel1,
@@ -86,21 +88,13 @@ const styles = ({ parameters }: JSSTheme) => ({
     }
   },
   paginationArrowContentNoBar: {
+    composes: ['$paginationArrowContent'],
     '& $paginationArrow': {
-      boxShadow: parameters.sapUiShadowLevel1,
       '&:first-child': {
-        position: 'absolute',
-        top: 'calc(50% - 1rem)',
-        left: '0.5rem',
-        opacity: 0,
-        zIndex: ZIndex.InputModal
+        top: 'calc(50% - 1rem)'
       },
       '&:last-child': {
-        position: 'absolute',
-        top: 'calc(50% - 1rem)',
-        right: '0.5rem',
-        opacity: 0,
-        zIndex: ZIndex.InputModal
+        top: 'calc(50% - 1rem)'
       }
     }
   }
diff --git a/packages/main/src/components/Carousel/CarouselPagination.tsx b/packages/main/src/components/Carousel/CarouselPagination.tsx
index 23202422d3a..743e8485585 100644
--- a/packages/main/src/components/Carousel/CarouselPagination.tsx
+++ b/packages/main/src/components/Carousel/CarouselPagination.tsx
@@ -8,7 +8,7 @@ import { Label } from '../../lib/Label';
 import { PlacementType } from '../../lib/PlacementType';
 import styles from './CarouselPagination.jss';
 
-const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles);
+const useStyles = createUseStyles<JSSTheme, keyof ReturnType<typeof styles>>(styles, { name: 'CarouselPagination' });
 
 export interface CarouselPaginationPropTypes {
   /**
@@ -56,17 +56,6 @@ const CarouselPagination: FC<CarouselPaginationPropTypes> = (props) => {
   const numberOfChildren = React.Children.count(children);
   const showTextIndicator = numberOfChildren >= TEXT_INDICATOR_THRESHOLD;
 
-  const paginationClasses = StyleClassHelper.of(classes.pagination);
-  if (arrowsPlacement === CarouselArrowsPlacement.Content) {
-    paginationClasses.put(classes.paginationArrowContent);
-  }
-  if (pageIndicatorPlacement === PlacementType.Top) {
-    paginationClasses.put(classes.paginationTop);
-  }
-  if (pageIndicatorPlacement === PlacementType.Bottom) {
-    paginationClasses.put(classes.paginationBottom);
-  }
-
   const shouldRenderPaginationBar = useMemo(() => {
     return showPageIndicator || arrowsPlacement === CarouselArrowsPlacement.PageIndicator;
   }, [showPageIndicator, arrowsPlacement]);
@@ -84,13 +73,20 @@ const CarouselPagination: FC<CarouselPaginationPropTypes> = (props) => {
     );
   }
 
+  const paginationClasses = StyleClassHelper.of(classes.pagination);
+  if (arrowsPlacement === CarouselArrowsPlacement.Content) {
+    paginationClasses.put(classes.paginationArrowContent);
+  }
+  if (pageIndicatorPlacement === PlacementType.Top) {
+    paginationClasses.put(classes.paginationTop);
+  }
+  if (pageIndicatorPlacement === PlacementType.Bottom) {
+    paginationClasses.put(classes.paginationBottom);
+  }
+
   return (
     <div className={paginationClasses.valueOf()}>
-      <div
-        data-value={arrowsPlacement === CarouselArrowsPlacement.Content ? 'paginationArrow' : null}
-        className={classes.paginationArrow}
-        onClick={goToPreviousPage}
-      >
+      <div data-value="paginationArrow" className={classes.paginationArrow} onClick={goToPreviousPage}>
         <Icon src="sap-icon://slim-arrow-left" />
       </div>
 
@@ -102,7 +98,7 @@ const CarouselPagination: FC<CarouselPaginationPropTypes> = (props) => {
           Children.map(children, (item, index) => (
             <span
               key={index}
-              className={`${activePage === index ? classes.paginationIconActive : null} ${classes.paginationIcon}`}
+              className={`${classes.paginationIcon}${activePage === index ? ` ${classes.paginationIconActive}` : ''}`}
               aria-label={`Item ${index + 1} of ${numberOfChildren} displayed`}
             >
               {index + 1}
@@ -110,11 +106,7 @@ const CarouselPagination: FC<CarouselPaginationPropTypes> = (props) => {
           ))}
       </div>
 
-      <div
-        data-value={arrowsPlacement === CarouselArrowsPlacement.Content ? 'paginationArrow' : null}
-        className={classes.paginationArrow}
-        onClick={goToNextPage}
-      >
+      <div data-value="paginationArrow" className={classes.paginationArrow} onClick={goToNextPage}>
         <Icon src="sap-icon://slim-arrow-right" />
       </div>
     </div>
diff --git a/packages/main/src/components/Carousel/demo.stories.tsx b/packages/main/src/components/Carousel/demo.stories.tsx
index a47e2ee408f..efd4a445888 100644
--- a/packages/main/src/components/Carousel/demo.stories.tsx
+++ b/packages/main/src/components/Carousel/demo.stories.tsx
@@ -10,6 +10,7 @@ import { PlacementType } from '../../lib/PlacementType';
 function renderCarousel() {
   return (
     <Carousel
+      width="90%"
       activePage={number('active', 0)}
       onPageChanged={action('onPageChanged')}
       arrowsPlacement={select(
diff --git a/packages/main/src/components/Carousel/index.tsx b/packages/main/src/components/Carousel/index.tsx
index 329210a9992..81f38635294 100644
--- a/packages/main/src/components/Carousel/index.tsx
+++ b/packages/main/src/components/Carousel/index.tsx
@@ -83,7 +83,7 @@ const Carousel: FC<CarouselPropTypes> = forwardRef((props: CarouselPropTypes, re
 
   const carouselItemClasses = StyleClassHelper.of(classes.carouselItem);
   if (arrowsPlacement === CarouselArrowsPlacement.Content) {
-    carouselItemClasses.put(classes.carouselItemContentIndicator);
+    classNameString.put(classes.carouselArrowPlacementContent);
   }
 
   const selectPageAtIndex = useCallback(
@@ -96,27 +96,64 @@ const Carousel: FC<CarouselPropTypes> = forwardRef((props: CarouselPropTypes, re
 
   const childElementCount = Children.count(children);
   const goToNextPage = useCallback(
-    (e) => {
+    (e, skipManualInversion = false) => {
+      if (
+        document.dir === 'rtl' &&
+        arrowsPlacement === CarouselArrowsPlacement.Content &&
+        e.type === 'click' &&
+        !skipManualInversion
+      ) {
+        return goToPreviousPage(e, true);
+      }
       if (loop === false && currentlyActivePage === childElementCount - 1) {
         return;
       }
       const nextPage = currentlyActivePage === childElementCount - 1 ? 0 : currentlyActivePage + 1;
       selectPageAtIndex(nextPage, e);
     },
-    [loop, currentlyActivePage, selectPageAtIndex, childElementCount]
+    [loop, currentlyActivePage, selectPageAtIndex, childElementCount, arrowsPlacement]
   );
 
   const goToPreviousPage = useCallback(
-    (e) => {
+    (e, skipManualInversion = false) => {
+      if (
+        document.dir === 'rtl' &&
+        arrowsPlacement === CarouselArrowsPlacement.Content &&
+        e.type === 'click' &&
+        !skipManualInversion
+      ) {
+        return goToNextPage(e, true);
+      }
       if (loop === false && currentlyActivePage === 0) {
         return;
       }
       const previousPage = currentlyActivePage === 0 ? childElementCount - 1 : currentlyActivePage - 1;
       selectPageAtIndex(previousPage, e);
     },
-    [loop, childElementCount, currentlyActivePage, selectPageAtIndex]
+    [loop, childElementCount, currentlyActivePage, selectPageAtIndex, arrowsPlacement, goToNextPage]
+  );
+
+  const onKeyDown = useCallback(
+    (e) => {
+      if (e.key === 'ArrowRight') {
+        if (document.dir === 'rtl') {
+          goToPreviousPage(e);
+        } else {
+          goToNextPage(e);
+        }
+      }
+      if (e.key === 'ArrowLeft') {
+        if (document.dir === 'rtl') {
+          goToNextPage(e);
+        } else {
+          goToPreviousPage(e);
+        }
+      }
+    },
+    [goToPreviousPage, goToNextPage]
   );
 
+  const translateXPrefix = document.dir === 'rtl' ? '' : '-';
   return (
     <div
       className={classNameString.toString()}
@@ -125,6 +162,8 @@ const Carousel: FC<CarouselPropTypes> = forwardRef((props: CarouselPropTypes, re
       slot={props['slot']}
       ref={ref}
       role="list"
+      tabIndex={0}
+      onKeyDown={onKeyDown}
     >
       {childElementCount > 1 && pageIndicatorPlacement === PlacementType.Top && (
         <CarouselPagination
@@ -140,7 +179,7 @@ const Carousel: FC<CarouselPropTypes> = forwardRef((props: CarouselPropTypes, re
       <div
         className={classes.carouselInner}
         style={{
-          transform: `translateX(-${currentlyActivePage * 100}%)`
+          transform: `translateX(${translateXPrefix}${currentlyActivePage * 100}%)`
         }}
       >
         {Children.map(children, (item, index) => (