Merge pull request GeekyAnts#3492 from GeekyAnts/fix/v3-focusring

Fix/v3 add focusring on checkbox and radio
shashank1010 · Feb 22, 2021 · 9177d6a · 9177d6a
2 parents d2211a0 + 92e9dca
commit 9177d6a
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 58 deletions.
diff --git a/package.json b/package.json
@@ -153,12 +153,11 @@
   },
   "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/interactions": "^0.2.1",
-    "@react-native-aria/radio": "^0.2.1",
-    "@react-native-aria/switch": "^0.2.1",
+    "@react-native-aria/button": "^0.2.2",
+    "@react-native-aria/checkbox": "^0.2.2",
+    "@react-native-aria/focus": "^0.2.4",
+    "@react-native-aria/interactions": "^0.2.2",
+    "@react-native-aria/radio": "^0.2.2",
     "@react-native-picker/picker": "^1.9.11",
     "@react-stately/radio": "^3.2.1",
     "babel-eslint": "^10.1.0",

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,16 +125,25 @@ const Checkbox = ({ icon, ...props }: ICheckboxProps, ref: any) => {
     </Box>
   );
 
+  const { focusProps, isFocusVisible } = useFocusRing();
+
   return (
     <>
       {Platform.OS === 'web' ? (
-        <label ref={mergedRef}>
+        <Box
+          // @ts-ignore - RN web supports accessibilityRole="label"
+          accessibilityRole="label"
+          ref={mergedRef}
+          outlineWidth={isFocusVisible ? 1 : 0}
+          outlineColor={activeColor}
+          outlineStyle={'solid'}
+        >
           <VisuallyHidden>
-            <input {...inputProps} ref={mergedRef}></input>
+            <input {...inputProps} {...focusProps} ref={mergedRef}></input>
           </VisuallyHidden>
 
           {component}
-        </label>
+        </Box>
       ) : (
         <TouchableOpacity
           {...(inputProps as TouchableOpacityProps)}

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,16 +106,25 @@ const Radio = ({ icon, children, ...props }: IRadioProps, ref: any) => {
     </Box>
   );
 
+  const { focusProps, isFocusVisible } = useFocusRing();
+
   return (
     <>
       {Platform.OS === 'web' ? (
-        <label ref={_ref}>
+        <Box
+          // @ts-ignore - RN web supports accessibilityRole="label"
+          accessibilityRole="label"
+          ref={_ref}
+          outlineWidth={isFocusVisible ? 1 : 0}
+          outlineColor={activeColor}
+          outlineStyle={'solid'}
+        >
           <VisuallyHidden>
-            <input {...inputProps} ref={ref} />
+            <input {...inputProps} ref={ref} {...focusProps} />
           </VisuallyHidden>
 
           {component}
-        </label>
+        </Box>
       ) : (
         <TouchableOpacity
           activeOpacity={1}

diff --git a/src/utils/customProps/customOutline.ts b/src/utils/customProps/customOutline.ts
@@ -8,6 +8,8 @@ import type { ResponsiveValue } from './responsiveValue';
 const config: Config = {
   outline: true,
   outlineOffset: true,
+  outlineWidth: true,
+  outlineStyle: true,
   outlineColor: {
     property: 'outlineColor',
     scale: 'colors',
@@ -27,6 +29,14 @@ export interface customOutlineProps {
    * The CSS `outline-color` property
    */
   outlineColor?: ResponsiveValue<CSS.Property.OutlineColor>;
+  /**
+   * The CSS `outline-width` property
+   */
+  outlineWidth?: ResponsiveValue<CSS.Property.OutlineWidth<string | number>>;
+  /**
+   * The CSS `outline-style` property
+   */
+  outlineStyle?: ResponsiveValue<CSS.Property.OutlineStyle>;
 }
 
 export const customOutline = system(config);
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"
@@ -2021,31 +2011,31 @@
     "@react-aria/utils" "^3.3.0"
     clsx "^1.1.1"
 
-"@react-native-aria/button@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-aria/button/-/button-0.2.1.tgz#6efa4a58889e0c4eb833cab4bb73c12d21acf5a3"
-  integrity sha512-PLV7p+9Uv2ETZpWVdWi26PPyDep2MR/hBjmrrQkLl/UE4WJlWkR17WYba25XzpDUw3DUW8Zd0qb3huBfdL0T7w==
+"@react-native-aria/button@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@react-native-aria/button/-/button-0.2.2.tgz#28921492dc632e4336816351bb37411ef3f54206"
+  integrity sha512-Zos3qLhSbwRXoIVr1nMZYO0VbJDNXNu7W+Oh1eCYtJo7ceWGDDNO+MLVUzDJELITBVT+qMB4YRC2oJ9R22U9uQ==
   dependencies:
     "@react-aria/utils" "^3.5.0"
-    "@react-native-aria/interactions" "^0.2.1"
+    "@react-native-aria/interactions" "^0.2.2"
     "@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"
 
@@ -2058,33 +2048,31 @@
     "@react-aria/utils" "^3.5.0"
     "@react-native-aria/utils" "^0.2.1"
 
-"@react-native-aria/radio@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@react-native-aria/radio/-/radio-0.2.1.tgz#aece6fb80e4bcd4e00634c4b8bdd69e884ca48b1"
-  integrity sha512-TkL/cIv6sxpnWir11vsx9RtbqF++VerILf0X8fQQiGIvIHoRCVNu/qbOz0EUfByYfezm9XwF/Yt04QPQM5zN3g==
+"@react-native-aria/interactions@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@react-native-aria/interactions/-/interactions-0.2.2.tgz#93d27c7af348802978461b72eb92513f44fa05d2"
+  integrity sha512-aCiNpMBRPRaAUX5HrvvYMPdoq91SFU/8/WawRhYJmm0bPPGWYqV5cD66ky9DOADLmA+VWbZ1jXDa2i/o4eA83g==
   dependencies:
-    "@react-aria/radio" "^3.1.2"
+    "@react-aria/interactions" "^3.3.2"
     "@react-aria/utils" "^3.5.0"
-    "@react-native-aria/interactions" "^0.2.1"
-    "@react-native-aria/utils" "^0.2.1"
-    "@react-stately/radio" "^3.2.1"
-    "@react-types/radio" "^3.1.1"
+    "@react-native-aria/utils" "^0.2.2"
 
-"@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==
+"@react-native-aria/radio@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@react-native-aria/radio/-/radio-0.2.2.tgz#4c5e818e7dc1a11672556528dc6b6fcf7c1c88ab"
+  integrity sha512-p3n6JNM25pvoQV2dtNO7BjiIWfZGa4Tp3hPIC7CUYVbxhB0BrdURep+3s3redhYTtO7RMnQOzezD69yRWIUqHg==
   dependencies:
-    "@react-aria/switch" "^3.1.1"
+    "@react-aria/radio" "^3.1.2"
     "@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/interactions" "^0.2.2"
+    "@react-native-aria/utils" "^0.2.2"
+    "@react-stately/radio" "^3.2.1"
+    "@react-types/radio" "^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"
@@ -2098,6 +2086,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-aria/utils/-/utils-0.2.1.tgz#b12f2981ef937e738a311feb94823534fbdedbf3"
   integrity sha512-qidrRPA5cQXIH3fJXw3EJiQ1JsyyxK+dzM55jsgAoRq7XbIL8WH9cN1wkkZEm+mINazG/VQ21Nx/hjkPDEzkuA==
 
+"@react-native-aria/utils@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@react-native-aria/utils/-/utils-0.2.2.tgz#ecdc51a55f2e03a40257f0975e3897cc09bb0826"
+  integrity sha512-aHgHLcR+0DZmv00zUubrA2Ea2hw+zGEag4T1eaAQOjml8oAe+eQoY7Oz8wMrutFEG35VCjh3zj9VDcaTqh8rag==
+
 "@react-native-community/bob@^0.16.2":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@react-native-community/bob/-/bob-0.16.2.tgz#9102b0160e70084fa1b75403a80dec332647c950"