fix(14063): fix some components focused states (#98)

* fix(14063): fix some components focused states --------- Co-authored-by: Natallia Harshunova <[email protected]>
konturio · Aug 29, 2024 · f89fef0 · f89fef0
1 parent 5c7c909
commit f89fef0
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 12 deletions.
diff --git a/packages/default-theme/typography.css b/packages/default-theme/typography.css
@@ -20,7 +20,11 @@ select,
 button,
 a {
   &:focus {
-    outline-color: var(--complimentary-strong);
+    outline: none;
+    box-shadow: none;
+  }
+  &:focus-visible {
+    outline: 2px solid var(--complimentary-strong);
   }
 }
 

diff --git a/packages/ui-kit/src/Checkbox/style.module.css b/packages/ui-kit/src/Checkbox/style.module.css
@@ -25,8 +25,9 @@
     }
   }
 
-  &:focus {
+  &:focus-visible {
     box-shadow: 0px 0px 0px 2px var(--complimentary-strong-down);
+    outline: none;
   }
 
   &:disabled {

diff --git a/packages/ui-kit/src/Radio/Radio.fixture.tsx b/packages/ui-kit/src/Radio/Radio.fixture.tsx
@@ -23,8 +23,8 @@ export default {
     return (
       <div style={{ display: 'flex', flexFlow: 'column nowrap' }}>
         <Radio id="one" label="Foo" value="foo" checked={state === 'foo'} onChange={onChange('foo')} />
-        <Radio id="two" label="Bar" value="bar" checked={state === 'bar'} onChange={onChange('two')} />
-        <Radio id="three" label="Baz" value="baz" checked={state === 'baz'} onChange={onChange('three')} />
+        <Radio id="two" label="Bar" value="bar" checked={state === 'bar'} onChange={onChange('bar')} />
+        <Radio id="three" label="Baz" value="baz" checked={state === 'baz'} onChange={onChange('baz')} />
         <code style={{ whiteSpace: 'pre', marginTop: '1em' }}>{JSON.stringify(state, null, 2)}</code>
       </div>
     );

diff --git a/packages/ui-kit/src/Radio/style.module.css b/packages/ui-kit/src/Radio/style.module.css
@@ -6,7 +6,6 @@
   width: var(--double-unit);
   height: var(--double-unit);
   border-radius: 50%;
-  outline: none;
   margin: 0;
   cursor: pointer;
   margin-right: var(--unit);
@@ -31,8 +30,9 @@
     border-color: var(--base-strong);
   }
 
-  &:focus {
+  &:focus-visible {
     box-shadow: 0px 0px 0px 2px var(--complimentary-strong-down);
+    outline: none;
   }
 
   &:disabled {

diff --git a/packages/ui-kit/src/Select/components/SelectButton/style.module.css b/packages/ui-kit/src/Select/components/SelectButton/style.module.css
@@ -115,9 +115,8 @@
       background-color: var(--base-weak-up);
     }
 
-    &:focus-within,
-    &:active,
-    &:focus {
+    &:has(:focus),
+    &:focus-visible {
       box-shadow: 0 0 0 2px var(--complimentary-strong-down);
       background-color: var(--base-weak-up);
     }
@@ -162,8 +161,8 @@
     }
   }
 
-  & button:focus .placeholder,
-  & button:focus .alwaysShowPlaceholder .placeholder {
+  & button:focus-visible .placeholder,
+  & button:focus-visible .alwaysShowPlaceholder .placeholder {
     color: var(--complimentary-strong-down);
   }
 }
diff --git a/packages/ui-kit/src/Toggler/style.module.css b/packages/ui-kit/src/Toggler/style.module.css
@@ -19,7 +19,7 @@
       }
     }
   }
-  :focus ~ .toggle {
+  :focus-visible ~ .toggle {
     box-shadow: 0px 0px 0px 2px var(--complimentary-strong-down);
   }
 }