fix: Banner Carousel accessibility adjustments (kyma-project#4192)

Author: OliwiaGowor

public/i18n/en.yaml

@@ -418,6 +418,7 @@ common:
     days-ago: days ago
   'yes': 'yes'
 components:
+  banner-carousel: Banner Carousel
   dropdown:
     empty-list: No resources available
   error-panel:

src/shared/components/FeatureCard/BannerCarousel.tsx

@@ -1,7 +1,9 @@
 import { ReactNode, useEffect, useRef, useState } from 'react';
 import { Carousel } from '@ui5/webcomponents-react';
+import { useTranslation } from 'react-i18next';
 
 export default function BannerCarousel({ children }: { children: ReactNode }) {
+  const { t } = useTranslation();
   const carouselRef = useRef<React.ElementRef<typeof Carousel>>(null);
   const [childrenLength, setChildrenLength] = useState(0);
   const [activeIndex, setActiveIndex] = useState(0);
@@ -48,6 +50,7 @@ export default function BannerCarousel({ children }: { children: ReactNode }) {
       }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
+      accessibleName={t('components.banner-carousel')}
     >
       {children}
     </Carousel>

src/shared/components/FeatureCard/FeatureCard.tsx

@@ -17,6 +17,7 @@ import {
 } from './types';
 
 import './FeaturedCard.scss';
+import { useTranslation } from 'react-i18next';
 
 const getIllustration = (
   illustration: IllustrationType,
@@ -64,6 +65,7 @@ export function FeatureCardBanner({
   titleIcon,
   className = '',
 }: FeatureCardBannerProps) {
+  const { t } = useTranslation();
   const [hideBanner, setHideBanner] = useState(false);
   const hideBannerKey = `hideBanner${id}`;
   const theme = useAtomValue(themeAtom);
@@ -107,6 +109,7 @@ export function FeatureCardBanner({
             icon="decline"
             className="decline-button"
             onClick={handleToggle}
+            accessibleName={t('common.buttons.close')}
           />
           <div className="outer-container">
             <div className="inner-container">

src/shared/components/FeatureCard/FeaturedCard.scss

@@ -9,8 +9,11 @@
 }
 
 .banner-carousel {
+  position: relative;
+  top: 2px;
+  left: 2px;
   height: fit-content;
-  width: calc(100% - 1px);
+  width: calc(100% - 4px);
 }
 
 .feature-card {