Merge pull request #197 from BouyguesTelecom/fix-style

checkbox style + a11y checkbox/radio
BouyguesTelecom · Dec 4, 2024 · 3b73386 · 3b73386
2 parents 8b8996b + b9277a7
commit 3b73386
Show file tree

Hide file tree

Showing 11 changed files with 37 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/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/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;

diff --git 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
@@ -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'],

diff --git 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
@@ -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],