@hero-design/rn 8.103.2 → 8.103.3

package/src/components/PinInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -19,6 +19,35 @@ exports[`rendering renders correctly 1`] = `
     }
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
@@ -27,8 +56,14 @@ exports[`rendering renders correctly 1`] = `
           undefined,
         ]
       }
+      testID="pin-wrapper"
     >
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -43,6 +78,7 @@ exports[`rendering renders correctly 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -75,6 +111,11 @@ exports[`rendering renders correctly 1`] = `
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -89,6 +130,7 @@ exports[`rendering renders correctly 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -121,6 +163,11 @@ exports[`rendering renders correctly 1`] = `
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -135,6 +182,7 @@ exports[`rendering renders correctly 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -166,6 +214,11 @@ exports[`rendering renders correctly 1`] = `
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -180,6 +233,7 @@ exports[`rendering renders correctly 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -208,7 +262,7 @@ exports[`rendering renders correctly 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      pointerEvents="box-none"
+      pointerEvents="none"
       secureTextEntry={true}
       selectTextOnFocus={false}
       selection={
@@ -280,6 +334,35 @@ exports[`rendering renders correctly when disabled 1`] = `
     }
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
@@ -288,8 +371,14 @@ exports[`rendering renders correctly when disabled 1`] = `
           undefined,
         ]
       }
+      testID="pin-wrapper"
     >
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -304,6 +393,7 @@ exports[`rendering renders correctly when disabled 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="disabled"
       >
@@ -336,6 +426,11 @@ exports[`rendering renders correctly when disabled 1`] = `
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -350,6 +445,7 @@ exports[`rendering renders correctly when disabled 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="disabled"
       >
@@ -382,6 +478,11 @@ exports[`rendering renders correctly when disabled 1`] = `
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -396,6 +497,7 @@ exports[`rendering renders correctly when disabled 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="disabled"
       >
@@ -427,6 +529,11 @@ exports[`rendering renders correctly when disabled 1`] = `
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -441,6 +548,7 @@ exports[`rendering renders correctly when disabled 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="disabled"
       >
@@ -469,7 +577,7 @@ exports[`rendering renders correctly when disabled 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      pointerEvents="box-none"
+      pointerEvents="none"
       secureTextEntry={true}
       selectTextOnFocus={false}
       selection={
@@ -541,6 +649,35 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
     }
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
@@ -549,8 +686,14 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
           undefined,
         ]
       }
+      testID="pin-wrapper"
     >
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -565,6 +708,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -606,6 +750,11 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -620,6 +769,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -661,6 +811,11 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -675,6 +830,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -716,6 +872,11 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -730,6 +891,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -761,6 +923,11 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -775,6 +942,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -806,6 +974,11 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -820,6 +993,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -848,7 +1022,7 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      pointerEvents="box-none"
+      pointerEvents="none"
       secureTextEntry={false}
       selectTextOnFocus={false}
       selection={
@@ -920,6 +1094,35 @@ exports[`rendering renders correctly when there is error 1`] = `
     }
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
@@ -928,8 +1131,14 @@ exports[`rendering renders correctly when there is error 1`] = `
           undefined,
         ]
       }
+      testID="pin-wrapper"
     >
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -944,6 +1153,7 @@ exports[`rendering renders correctly when there is error 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="error"
       >
@@ -976,6 +1186,11 @@ exports[`rendering renders correctly when there is error 1`] = `
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -990,6 +1205,7 @@ exports[`rendering renders correctly when there is error 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="error"
       >
@@ -1022,6 +1238,11 @@ exports[`rendering renders correctly when there is error 1`] = `
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -1036,6 +1257,7 @@ exports[`rendering renders correctly when there is error 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="error"
       >
@@ -1067,6 +1289,11 @@ exports[`rendering renders correctly when there is error 1`] = `
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -1081,6 +1308,7 @@ exports[`rendering renders correctly when there is error 1`] = `
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="error"
       >
@@ -1162,7 +1390,7 @@ exports[`rendering renders correctly when there is error 1`] = `
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      pointerEvents="box-none"
+      pointerEvents="none"
       secureTextEntry={true}
       selectTextOnFocus={false}
       selection={
@@ -1234,6 +1462,35 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
     }
   >
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
@@ -1242,8 +1499,14 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
           undefined,
         ]
       }
+      testID="pin-wrapper"
     >
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -1258,6 +1521,7 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -1290,6 +1554,11 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -1304,6 +1573,7 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -1336,6 +1606,11 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -1350,6 +1625,7 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -1381,6 +1657,11 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
         }
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         style={
           [
             {
@@ -1395,6 +1676,7 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
             undefined,
           ]
         }
+        testID="pin-cell"
         themeFocused={false}
         themeState="default"
       >
@@ -1424,7 +1706,7 @@ exports[`rendering renders correctly with textContentType and autoComplete 1`] =
       onBlur={[Function]}
       onChangeText={[Function]}
       onFocus={[Function]}
-      pointerEvents="box-none"
+      pointerEvents="none"
       secureTextEntry={true}
       selectTextOnFocus={false}
       selection={

package/src/components/PinInput/__tests__/index.spec.tsx

@@ -214,3 +214,36 @@ describe('normalizeValue', () => {
     }
   );
 });
+
+describe('StyledPinWrapper pressability', () => {
+  it('sets selected accessibilityState on cell when not disabled and pressed', () => {
+    const { getByTestId, getAllByTestId } = renderWithTheme(
+      <PinInput value="" onChangeText={jest.fn()} testID="pin-input" />
+    );
+    const wrapper = getByTestId('pin-wrapper');
+    fireEvent.press(wrapper);
+    // The cell at index 0 should be focused (selected)
+    const cells = getAllByTestId('pin-cell');
+    // Find the cell with accessibilityState.selected === true
+    const selectedCell = cells.find(
+      (cell) =>
+        cell.props.accessibilityState && cell.props.accessibilityState.selected
+    );
+    expect(selectedCell).toBeDefined();
+  });
+
+  it('does not set selected accessibilityState on cell when disabled and pressed', () => {
+    const { getByTestId, getAllByTestId } = renderWithTheme(
+      <PinInput value="" onChangeText={jest.fn()} disabled testID="pin-input" />
+    );
+    const wrapper = getByTestId('pin-wrapper');
+    fireEvent.press(wrapper);
+    const cells = getAllByTestId('pin-cell');
+    // No cell should have accessibilityState.selected === true
+    const selectedCell = cells.find(
+      (cell) =>
+        cell.props.accessibilityState && cell.props.accessibilityState.selected
+    );
+    expect(selectedCell).toBeUndefined();
+  });
+});

package/src/components/PinInput/index.tsx

@@ -192,7 +192,11 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
 
     return (
       <StyledWrapper style={style} testID={testID}>
-        <StyledPinWrapper>
+        <StyledPinWrapper
+          onPress={focus}
+          disabled={disabled}
+          testID="pin-wrapper"
+        >
           {[...Array(length).keys()].map((index) => (
             <React.Fragment key={index}>
               {index !== 0 && <StyledSpacer />}
@@ -226,7 +230,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
           autoFocus={autoFocus}
           onFocus={focus}
           onBlur={blur}
-          pointerEvents="box-none"
+          pointerEvents="none"
           keyboardType="numeric"
           testID="pin-hidden-input"
           textContentType={textContentType}