From b0667d73cd7c76030a0bf255eb80facb1fccae9a Mon Sep 17 00:00:00 2001
From: norddinh <nordine.bounabi@gmail.com>
Date: Wed, 4 Dec 2024 16:34:01 +0100
Subject: [PATCH 1/3] a11y checkbox/radio

---
 packages/react/components/checkbox/Checkbox.tsx        |  3 +--
 .../components/checkbox/tiles/tile/CheckboxTile.tsx    |  3 +--
 packages/react/components/radio/Radio.tsx              |  3 +--
 .../react/components/radio/tiles/tile/RadioTile.tsx    |  3 +--
 .../styles/framework/src/components/_autolayout.scss   | 10 ++++++++--
 packages/styles/framework/src/utilities/_mixins.scss   | 10 +++++++++-
 packages/styles/scripts/autolayout.ts                  |  4 +++-
 7 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/react/components/checkbox/Checkbox.tsx b/packages/react/components/checkbox/Checkbox.tsx
index 4799aa46..15256349 100644
--- a/packages/react/components/checkbox/Checkbox.tsx
+++ b/packages/react/components/checkbox/Checkbox.tsx
@@ -41,9 +41,8 @@ const Checkbox = ({
   }, [checked, readonly])
 
   return (
-    <div className={hashClass(styled, clsx('checkbox', className))} tabIndex={0}>
+    <div className={hashClass(styled, clsx('checkbox', className))}>
       <input
-        aria-checked={checked}
         type='checkbox'
         readOnly={readonly}
         id={id}
diff --git a/packages/react/components/checkbox/tiles/tile/CheckboxTile.tsx b/packages/react/components/checkbox/tiles/tile/CheckboxTile.tsx
index 7da8e887..b3068ce7 100644
--- a/packages/react/components/checkbox/tiles/tile/CheckboxTile.tsx
+++ b/packages/react/components/checkbox/tiles/tile/CheckboxTile.tsx
@@ -40,9 +40,8 @@ const CheckboxTile = ({
   }, [checked, readonly])
 
   return (
-    <div className={hashClass(styled, clsx('checkbox-tile', horizontal && is('horizontal'), className))} tabIndex={0}>
+    <div className={hashClass(styled, clsx('checkbox-tile', horizontal && is('horizontal'), className))}>
       <input
-        aria-checked={checked}
         type='checkbox'
         readOnly={readonly}
         id={id}
diff --git a/packages/react/components/radio/Radio.tsx b/packages/react/components/radio/Radio.tsx
index c8365acc..fb97d4d9 100644
--- a/packages/react/components/radio/Radio.tsx
+++ b/packages/react/components/radio/Radio.tsx
@@ -41,9 +41,8 @@ const Radio = ({
   }, [checked, readonly])
 
   return (
-    <div className={hashClass(styled, clsx('radio', className))} tabIndex={0}>
+    <div className={hashClass(styled, clsx('radio', className))}>
       <input
-        aria-checked={checked}
         type='radio'
         readOnly={readonly}
         id={id}
diff --git a/packages/react/components/radio/tiles/tile/RadioTile.tsx b/packages/react/components/radio/tiles/tile/RadioTile.tsx
index bc3f8e9e..619b6028 100644
--- a/packages/react/components/radio/tiles/tile/RadioTile.tsx
+++ b/packages/react/components/radio/tiles/tile/RadioTile.tsx
@@ -40,9 +40,8 @@ const RadioTile = ({
   }, [checked, readonly])
 
   return (
-    <div className={hashClass(styled, clsx('radio-tile', horizontal && is('horizontal'), className))} tabIndex={0}>
+    <div className={hashClass(styled, clsx('radio-tile', horizontal && is('horizontal'), className))}>
       <input
-        aria-checked={checked}
         type='radio'
         readOnly={readonly}
         id={id}
diff --git a/packages/styles/framework/src/components/_autolayout.scss b/packages/styles/framework/src/components/_autolayout.scss
index 2b70fd4c..ca1f18b7 100644
--- a/packages/styles/framework/src/components/_autolayout.scss
+++ b/packages/styles/framework/src/components/_autolayout.scss
@@ -5,10 +5,13 @@ body:not(.is-tight) {
   .card:not(:last-child) {
     margin-bottom: 24px;
   }
+  .columns:not(:last-child) {
+    margin-bottom: 24px;
+  }
   .box:not(:last-child) {
     margin-bottom: 24px;
   }
-  *:has(+.divider):not(:last-child) {
+  *:has(+ .divider):not(:last-child) {
     margin-bottom: 24px;
   }
   .divider:not(:last-child) {
@@ -156,10 +159,13 @@ body:not(.is-tight) {
   .card:not(:last-child) {
       margin-bottom: 16px;
     }
+  .columns:not(:last-child) {
+      margin-bottom: 16px;
+    }
   .box:not(:last-child) {
       margin-bottom: 16px;
     }
-  *:has(+.divider):not(:last-child) {
+  *:has(+ .divider):not(:last-child) {
       margin-bottom: 16px;
     }
   .divider:not(:last-child) {
diff --git a/packages/styles/framework/src/utilities/_mixins.scss b/packages/styles/framework/src/utilities/_mixins.scss
index de24d639..e8d39970 100644
--- a/packages/styles/framework/src/utilities/_mixins.scss
+++ b/packages/styles/framework/src/utilities/_mixins.scss
@@ -409,7 +409,9 @@
     }
 
     input {
-      display: none;
+      opacity: 0;
+      position: absolute;
+      outline: none;
 
       &:checked ~ label.#{$type}-label {
         border-color: getColor('main');
@@ -422,6 +424,9 @@
           background-color: getColor('main');
         }
       }
+      &:focus-visible ~ label.#{$type}-label:before {
+        outline: 1px solid;
+      }
 
       &:disabled,
       &:disabled:checked {
@@ -495,6 +500,9 @@
         @include disabledRules;
       }
     }
+    &:has(input:focus-visible) label.#{$type}-label{
+      outline:  1px solid;
+    }
 
     &:first-child {
       margin-left: 0;
diff --git a/packages/styles/scripts/autolayout.ts b/packages/styles/scripts/autolayout.ts
index 07ddaa31..4f4f1a82 100644
--- a/packages/styles/scripts/autolayout.ts
+++ b/packages/styles/scripts/autolayout.ts
@@ -15,9 +15,11 @@ const { THREE, FOUR, FIVE, TWO, ONE, SEVEN, ZERO, SIX } = SpacerSize
  * */
 export const DEFAULT_SPACING_MATRIX: DefaultSpacingMatrix = [
   [INSERT_SPACE_BETWEEN, '.accordions', 'default', FIVE, FOUR],
+  [INSERT_SPACE_BETWEEN, '.buttons', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.card', 'default', FIVE, FOUR],
+  [INSERT_SPACE_BETWEEN, '.columns', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.box', 'default', FIVE, FOUR],
-  [INSERT_SPACE_BETWEEN, '*:has(+.divider)', 'default', FIVE, FOUR],
+  [INSERT_SPACE_BETWEEN, '*:has(+ .divider)', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.divider', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.table', 'default', FIVE, FOUR],
   [INSERT_SPACE_BETWEEN, '.list', 'default', FIVE, FOUR],

From bd86b53154528a3f2b9f3239e824dab47878ada8 Mon Sep 17 00:00:00 2001
From: norddinh <nordine.bounabi@gmail.com>
Date: Wed, 4 Dec 2024 17:10:47 +0100
Subject: [PATCH 2/3] Fix a11y switch

---
 packages/styles/framework/src/elements/_switch.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/styles/framework/src/elements/_switch.scss b/packages/styles/framework/src/elements/_switch.scss
index 18dfaa36..7567c4bb 100644
--- a/packages/styles/framework/src/elements/_switch.scss
+++ b/packages/styles/framework/src/elements/_switch.scss
@@ -8,8 +8,13 @@
   }
 
   input {
-    display: none;
+    opacity: 0;
+    position: absolute;
+    outline: none;
 
+    &:focus-visible ~ label:before{
+      outline: 2px solid;
+    }
     &:disabled ~ label,
     &:disabled:checked ~ label {
       cursor: not-allowed;

From b9277a7490b8652fdfa7ddd700de3061d0ce266d Mon Sep 17 00:00:00 2001
From: norddinh <nordine.bounabi@gmail.com>
Date: Wed, 4 Dec 2024 17:29:18 +0100
Subject: [PATCH 3/3] Fix ghost button

---
 packages/styles/framework/src/elements/_button.scss        | 5 +++++
 packages/styles/framework/src/theming/buttons_partial.scss | 2 +-
 packages/styles/framework/src/utilities/_colors.scss       | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/styles/framework/src/elements/_button.scss b/packages/styles/framework/src/elements/_button.scss
index 36117556..b9274963 100644
--- a/packages/styles/framework/src/elements/_button.scss
+++ b/packages/styles/framework/src/elements/_button.scss
@@ -53,6 +53,11 @@ $button-border-width: 2px !default;
     }
   }
 
+  &.is-ghost:hover {
+    background-color: var(--color-main-fade);
+    filter: none !important;
+  }
+
   &[disabled],
   &[aria-disabled=true] {
     background-color: getColorValue('main-fade') !important;
diff --git a/packages/styles/framework/src/theming/buttons_partial.scss b/packages/styles/framework/src/theming/buttons_partial.scss
index d88b5a34..3922b3ee 100644
--- a/packages/styles/framework/src/theming/buttons_partial.scss
+++ b/packages/styles/framework/src/theming/buttons_partial.scss
@@ -10,7 +10,7 @@ $button-colors: (
   'accent':['conversion', 'accent', 'background'],
   'primary': ['primary', 'main', 'background'],
   'secondary': ['secondary', 'main-fade', 'main'],
-  'ghost': ['ghost', 'background', 'main'],
+  'ghost': ['ghost', 'transparent', 'main']
 ) !default;
 
 %buttons-states {
diff --git a/packages/styles/framework/src/utilities/_colors.scss b/packages/styles/framework/src/utilities/_colors.scss
index 8fabdc6d..3b163158 100644
--- a/packages/styles/framework/src/utilities/_colors.scss
+++ b/packages/styles/framework/src/utilities/_colors.scss
@@ -11,6 +11,7 @@ $suffix: '';
  */
 $colors: (
   'background': [#fff, 'white', 'main'],
+  'transparent': ['transparent', 'transparent', 'transparent'],
   'main':[ #3d5d7e, 'main', 'white'],
   'main-fade':[ #eff2f8, 'main-fade', 'white'],
   'accent':[ #da641b,'accent', 'white'],