feat(Carousel, CenteredCarousel, Slideshow): design changes and a11y improvements (#1388)

Spec:
https://www.figma.com/design/hxJvuIQQ1xf50xIOQFUZbQ/%F0%9F%94%B8-Carousel-Specs?node-id=4498-15575&t=6bLo1yGJsdBrEBkT-0

---------

Co-authored-by: vdedios <victor.dedios@outlook.com>
Co-authored-by: Victor Dedios <57688116+vdedios@users.noreply.github.com>

Author: wyunreal

src/__acceptance_tests__/__ssr_pages__/carousel.tsx

@@ -5,7 +5,7 @@ const CarouselTest = (): JSX.Element => (
     <ResponsiveLayout>
         <Carousel
             withBullets
-            items={Array.from({length: 3}, (_, idx) => (
+            items={Array.from({length: 4}, (_, idx) => (
                 <MediaCard
                     headline={<Tag type="promo">Headline</Tag>}
                     title={'Card ' + idx}

src/__private_stories__/carousel-on-different-container-sizes-story.tsx

@@ -5,9 +5,7 @@ import {
     ResponsiveLayout,
     MediaCard,
     ButtonLink,
-    Callout,
     Stack,
-    IconInformationRegular,
     Image,
     GridLayout,
     Placeholder,
@@ -33,16 +31,19 @@ const ExampleCarousel = ({
     bullets,
     cardsTitlePrefix,
     itemsPerPage,
+    'aria-label': ariaLabelProp,
 }: {
     numItems: number;
     bullets: boolean;
     cardsTitlePrefix: number;
     itemsPerPage: {mobile: number; tablet: number; desktop: {small: number; medium: number; large: number}};
+    'aria-label': string;
 }) => (
     <Carousel
         dataAttributes={{testid: 'carousel-story'}}
         withBullets={bullets}
         itemsPerPage={itemsPerPage}
+        aria-label={ariaLabelProp}
         items={Array.from({length: numItems}, (_, idx) => (
             <MediaCard
                 aria-label={`Carousel ${cardsTitlePrefix} item ${idx}`}
@@ -82,17 +83,14 @@ export const Default: StoryComponent<Args> = ({
         <Box paddingY={24}>
             <ResponsiveLayout>
                 <Stack space={16}>
-                    <Callout
-                        description="Arrow controls disappear in touch devices"
-                        asset={<IconInformationRegular />}
-                    />
                     <GridLayout
                         template="8+4"
                         left={
                             <ExampleCarousel
                                 numItems={numItems}
                                 bullets={bullets}
                                 itemsPerPage={itemsPerPage}
+                                aria-label="Component story, right placeholder"
                                 cardsTitlePrefix={1}
                             />
                         }
@@ -106,6 +104,7 @@ export const Default: StoryComponent<Args> = ({
                                 numItems={numItems}
                                 bullets={bullets}
                                 itemsPerPage={itemsPerPage}
+                                aria-label="Component story, left placeholder"
                                 cardsTitlePrefix={2}
                             />
                         }
@@ -115,6 +114,7 @@ export const Default: StoryComponent<Args> = ({
                         bullets={bullets}
                         itemsPerPage={itemsPerPage}
                         cardsTitlePrefix={3}
+                        aria-label="Component story, no placeholder"
                     />
                 </Stack>
             </ResponsiveLayout>