From fb7ab8724ab241519326c8d5f19036397a96aa1a Mon Sep 17 00:00:00 2001
From: Aurelie Forzani <62591198+aurelie-forzani@users.noreply.github.com>
Date: Tue, 13 Aug 2024 16:10:06 +0200
Subject: [PATCH] [CES-18232] Make banner accessible (#632)

* [CES-18232] Make banner accessible

* add type="button"
---
 .../components/src/components/banner/Banner.tsx |  2 +-
 .../styles/src/components/atoms/_banner.scss    | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/banner/Banner.tsx b/packages/components/src/components/banner/Banner.tsx
index 6ecb0b60..54d9faa0 100644
--- a/packages/components/src/components/banner/Banner.tsx
+++ b/packages/components/src/components/banner/Banner.tsx
@@ -44,7 +44,7 @@ export const Banner: React.FC<BannerProps> = ({
 
       {/* Close button (optional) */}
       {isClosable && onClose && (
-        <div className="tk-banner__close" onClick={onClose} />
+        <button type="button" className="tk-banner__close" onClick={onClose} />
       )}
 
     </div>
diff --git a/packages/styles/src/components/atoms/_banner.scss b/packages/styles/src/components/atoms/_banner.scss
index 9c73e214..eaaed3cc 100644
--- a/packages/styles/src/components/atoms/_banner.scss
+++ b/packages/styles/src/components/atoms/_banner.scss
@@ -18,7 +18,6 @@
     &__action {
         appearance: none;
         background-color: transparent;
-        outline: none;
         border: none;
         text-decoration: underline;
     }
@@ -99,22 +98,34 @@
     &--small {
         padding: toRem(2) toRem(8);
 
-        .tk-banner__variant-icon, .tk-banner__close {
+        .tk-banner__variant-icon {
             &:before {
                 font-size: toRem(12);
                 top: toRem(4);
             }
         }
+
+        .tk-banner__close {
+            &:before {
+                font-size: toRem(12);
+            }
+        }
     }
 
     &--medium {
         padding: toRem(6) toRem(12);
 
-        .tk-banner__variant-icon, .tk-banner__close {
+        .tk-banner__variant-icon {
             &:before {
                 font-size: toRem(16);
                 top: toRem(2);
             }
         }
+
+        .tk-banner__close {
+            &:before {
+                font-size: toRem(16);
+            }
+        }
     }
 }