fix: added focus ring on checkbox and radio

shashank1010 · Feb 22, 2021 · 9b76184 · 9b76184
1 parent a92549b
commit 9b76184
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 43 deletions.
diff --git a/package.json b/package.json
@@ -154,11 +154,10 @@
   "dependencies": {
     "@react-aria/visually-hidden": "^3.2.1",
     "@react-native-aria/button": "^0.2.1",
-    "@react-native-aria/checkbox": "^0.2.1",
-    "@react-native-aria/focus": "^0.2.2",
+    "@react-native-aria/checkbox": "^0.2.2",
+    "@react-native-aria/focus": "^0.2.4",
     "@react-native-aria/interactions": "^0.2.1",
     "@react-native-aria/radio": "^0.2.1",
-    "@react-native-aria/switch": "^0.2.1",
     "@react-stately/radio": "^3.2.1",
     "babel-eslint": "^10.1.0",
     "deepmerge": "^4.2.2",

diff --git a/src/components/primitives/Checkbox/Checkbox.tsx b/src/components/primitives/Checkbox/Checkbox.tsx
@@ -19,6 +19,7 @@ import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { CheckboxGroupContext } from './CheckboxGroup';
 import { useHover } from '@react-native-aria/interactions';
 import { useCheckbox, useCheckboxGroupItem } from '@react-native-aria/checkbox';
+import { useFocusRing } from '@react-native-aria/focus';
 
 const Checkbox = ({ icon, ...props }: ICheckboxProps, ref: any) => {
   const formControlContext: IFormControlContext = React.useContext(
@@ -124,12 +125,21 @@ const Checkbox = ({ icon, ...props }: ICheckboxProps, ref: any) => {
     </Box>
   );
 
+  const { focusProps, isFocusVisible } = useFocusRing();
+
   return (
     <>
       {Platform.OS === 'web' ? (
-        <label ref={mergedRef}>
+        <label
+          ref={mergedRef}
+          style={
+            isFocusVisible // Chrome's default focus outline
+              ? { outline: `#4D90FE auto 1px` }
+              : {}
+          }
+        >
           <VisuallyHidden>
-            <input {...inputProps} ref={mergedRef}></input>
+            <input {...inputProps} {...focusProps} ref={mergedRef}></input>
           </VisuallyHidden>
 
           {component}

diff --git a/src/components/primitives/Radio/Radio.tsx b/src/components/primitives/Radio/Radio.tsx
@@ -13,6 +13,7 @@ import { useHover } from '@react-native-aria/interactions';
 import { useRadio } from '@react-native-aria/radio';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
 import { RadioContext } from './RadioGroup';
+import { useFocusRing } from '@react-native-aria/focus';
 
 const Radio = ({ icon, children, ...props }: IRadioProps, ref: any) => {
   let contextState = React.useContext(RadioContext);
@@ -105,12 +106,25 @@ const Radio = ({ icon, children, ...props }: IRadioProps, ref: any) => {
     </Box>
   );
 
+  const { focusProps, isFocusVisible } = useFocusRing();
+
   return (
     <>
       {Platform.OS === 'web' ? (
-        <label ref={_ref}>
+        <label
+          ref={_ref}
+          style={
+            isFocusVisible
+              ? {
+                  outline:
+                    // Chrome's default focus outline
+                    `#4D90FE auto 1px`,
+                }
+              : {}
+          }
+        >
           <VisuallyHidden>
-            <input {...inputProps} ref={ref} />
+            <input {...inputProps} ref={ref} {...focusProps} />
           </VisuallyHidden>
 
           {component}

diff --git a/yarn.lock b/yarn.lock
@@ -1977,16 +1977,6 @@
   dependencies:
     "@babel/runtime" "^7.6.2"
 
-"@react-aria/switch@^3.1.1":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@react-aria/switch/-/switch-3.1.1.tgz#a67239302908426dedc383a05bf7543190bec948"
-  integrity sha512-VPuonUcZ0IFs3FAAL3cAWtZr95DH0nyzTWDgVfbfGQCz6zVcD1R6OlA0mUPEdqUl5jQamBvFIk/W/5KbtrpdQw==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    "@react-aria/toggle" "^3.1.1"
-    "@react-stately/toggle" "^3.2.1"
-    "@react-types/switch" "^3.1.1"
-
 "@react-aria/toggle@^3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@react-aria/toggle/-/toggle-3.1.1.tgz#5a1e523af0a2425c4cd73dbeb9e9116c65ea7437"
@@ -2031,21 +2021,21 @@
     "@react-stately/toggle" "^3.2.1"
     "@react-types/checkbox" "^3.2.1"
 
-"@react-native-aria/checkbox@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-aria/checkbox/-/checkbox-0.2.1.tgz#319f68c7c5d0f0b1807b2ce4702779047864dbcc"
-  integrity sha512-sl7Ki7+UrPKCQjYTWddNGSiVR7ZJ0FCSTiqKXzCgPeDFWcz+LQQwyku0NQcCU6Z7/HPxq6kL117M9F9QFSSamQ==
+"@react-native-aria/checkbox@0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@react-native-aria/checkbox/-/checkbox-0.2.2.tgz#fc63537bee8eace82755c27d93249bfd9377aa83"
+  integrity sha512-Jtl5A1TTbQbF9QrABm/3fJ2RtHtal/LSgnMoyrfW24UZk4PytMnLxhcPCKipSaivUV6CAxQPkaLUk7lDHzVt2g==
   dependencies:
     "@react-aria/checkbox" "^3.2.1"
     "@react-aria/utils" "^3.5.0"
-    "@react-native-aria/toggle" "^0.2.1"
-    "@react-native-aria/utils" "^0.2.1"
+    "@react-native-aria/toggle" "^0.2.2-alpha.0"
+    "@react-native-aria/utils" "^0.2.2"
     "@react-stately/toggle" "^3.2.1"
 
-"@react-native-aria/focus@^0.2.2":
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/@react-native-aria/focus/-/focus-0.2.2.tgz#773e2aa66e2b97f16af0c256fb4c5847ac736e33"
-  integrity sha512-cpPE+RQAZASTU0/AnAQBXE7sKXirWRN8wBWLdzLM9Q0DWwwn1qXkiiLm2eGYeaU0OtcTPA6hFPvw7Wc0uIt7kQ==
+"@react-native-aria/focus@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@react-native-aria/focus/-/focus-0.2.4.tgz#9402eb5c7913f9ce933e1d6582007ec730680a59"
+  integrity sha512-W/6yU9r896TZ8Z9+7FdWpnAFvurabu6oBVtCCrz8fEUeLaPhUFJXLm/aZmPcF30lYED157ICkx9xJBdGihJZzw==
   dependencies:
     "@react-aria/focus" "^3.2.3"
 
@@ -2070,21 +2060,10 @@
     "@react-stately/radio" "^3.2.1"
     "@react-types/radio" "^3.1.1"
 
-"@react-native-aria/switch@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-aria/switch/-/switch-0.2.1.tgz#2c00c0bb4055e25dfe8abe64941d9d50b5879f24"
-  integrity sha512-GhE3X7B2q9wr0pyi+LloKi8k2g5bQnJeMdSpbmoXvd40QP1lwY4Ytm8ZwVFDLR8638N014rkffHMaZjs6/awCQ==
-  dependencies:
-    "@react-aria/switch" "^3.1.1"
-    "@react-aria/utils" "^3.5.0"
-    "@react-native-aria/toggle" "^0.2.1"
-    "@react-stately/toggle" "^3.2.1"
-    "@react-types/switch" "^3.1.1"
-
-"@react-native-aria/toggle@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-aria/toggle/-/toggle-0.2.1.tgz#3bdad70b59691d17ec0f7e8adc8a6e88833c9e9b"
-  integrity sha512-Rr2c0maXKuj5+JO9h6VMfGg8hTUHsyVEof+zMt2gLcZ46xsZ4PopEWKY3dBOJ8fRTxU8jBFK5qRhD47gbKI+9A==
+"@react-native-aria/toggle@^0.2.2-alpha.0":
+  version "0.2.2-alpha.0"
+  resolved "https://registry.yarnpkg.com/@react-native-aria/toggle/-/toggle-0.2.2-alpha.0.tgz#b50e285c7403fe4475b320297f02904cba73ae4d"
+  integrity sha512-c9SD7hJtzVOOqaj5MDUFHdn/TmYdgXQzdDfJMx2QZtQk8XWcQ7gB/hDuK0BtyjlGXpINvjJycQ0xgX4lz/1JpA==
   dependencies:
     "@react-aria/focus" "^3.2.3"
     "@react-aria/utils" "^3.5.0"
@@ -2093,7 +2072,7 @@
     "@react-stately/toggle" "^3.2.1"
     "@react-types/checkbox" "^3.2.1"
 
-"@react-native-aria/utils@^0.2.1":
+"@react-native-aria/utils@^0.2.1", "@react-native-aria/utils@^0.2.2":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@react-native-aria/utils/-/utils-0.2.1.tgz#b12f2981ef937e738a311feb94823534fbdedbf3"
   integrity sha512-qidrRPA5cQXIH3fJXw3EJiQ1JsyyxK+dzM55jsgAoRq7XbIL8WH9cN1wkkZEm+mINazG/VQ21Nx/hjkPDEzkuA==