[CES-18232] Make banner accessible (#632)

* [CES-18232] Make banner accessible * add type="button"
SymphonyPlatformSolutions · Aug 13, 2024 · fb7ab87 · fb7ab87
1 parent f00f775
commit fb7ab87
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git 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
@@ -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);
+ }
+ }
  }
 }