@utilitywarehouse/hearth-react-native 0.32.0 → 0.32.1

package/src/components/Card/Card.docs.mdx

@@ -61,23 +61,22 @@ const MyComponent = () => (
 
 ## Props
 
-| Property       | Type                                                                                                                                         | Description                                | Default           |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------------- |
-| variant        | `'subtle' \| 'emphasis' `                                                                                                                    | The variant of the card.                   | `'subtle'`        |
-| colorScheme    | `'neutralStrong' \| 'neutralSubtle' \| 'purple' \| 'energy'` <br /> `'broadband' \| 'mobile' \| 'insurance' \| 'cashback' \|` <br /> `'pig'` | The color scheme of the card.              | `'neutralStrong'` |
-| shadowColor    | `'functional' \| 'brand' \| 'energy' \| 'broadband' \| 'mobile' `<br /> `'insurance' \| 'cashback' \| 'pig'`                                 | The shadow color of the card.              | `-`               |
-| noPadding      | `boolean`                                                                                                                                    | Whether or not the card has padding.       | `false`           |
-| selected       | `boolean`                                                                                                                                    | Whether the card is selected.              | `false`           |
-| onPress        | `() => void`                                                                                                                                 | Callback function to be called.            | `-`               |
-| disabled       | `boolean`                                                                                                                                    | Whether the card is disabled.              | `false`           |
-| spacing          | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                                                           | The space between the content.             | `none`            |
-| alignItems     | `'flex-start' \| 'flex-end' \| `<br />`'center' \| 'stretch' \| 'baseline'`                                                                  | The align items of the flex container.     | `flex-start`      |
-| justifyContent | `'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| `<br />` 'space-around' \| 'space-evenly'`                                     | The justify content of the flex container. | `flex-start`      |
-| flexWrap       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                                                       | The wrap of the flex container.            | `nowrap`          |
-| flexDirection  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                                                     | The direction of the flex container.       | `column`          |
-| gap            | `number`                                                                                                                                     | The gap between the content.               | `0`               |
-| rowGap         | `number`                                                                                                                                     | The row gap between the content.           | `0`               |
-| columnGap      | `number`                                                                                                                                     | The column gap between the content.        | `0`               |
+| Property       | Type                                                                                                                                                        | Description                                | Default           |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------------- |
+| variant        | `'subtle' \| 'emphasis' `                                                                                                                                   | The variant of the card.                   | `'subtle'`        |
+| colorScheme    | `'neutralStrong' \| 'neutralSubtle' \| 'brand' \| 'energy'` <br /> `'broadband' \| 'mobile' \| 'insurance' \| 'cashback' \|` <br /> `'highlight' \| 'pig'` | The color scheme of the card.              | `'neutralStrong'` |
+| shadowColor    | `'functional' \| 'brand' \| 'energy' \| 'broadband' \| 'mobile' `<br /> `'insurance' \| 'cashback' \| 'pig'`                                                | The shadow color of the card.              | `-`               |
+| noPadding      | `boolean`                                                                                                                                                   | Whether or not the card has padding.       | `false`           |
+| onPress        | `() => void`                                                                                                                                                | Callback function to be called.            | `-`               |
+| disabled       | `boolean`                                                                                                                                                   | Whether the card is disabled.              | `false`           |
+| spacing        | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                                                                          | The space between the content.             | `none`            |
+| alignItems     | `'flex-start' \| 'flex-end' \| `<br />`'center' \| 'stretch' \| 'baseline'`                                                                                 | The align items of the flex container.     | `flex-start`      |
+| justifyContent | `'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| `<br />` 'space-around' \| 'space-evenly'`                                                    | The justify content of the flex container. | `flex-start`      |
+| flexWrap       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                                                                      | The wrap of the flex container.            | `nowrap`          |
+| flexDirection  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                                                                    | The direction of the flex container.       | `column`          |
+| gap            | `number`                                                                                                                                                    | The gap between the content.               | `0`               |
+| rowGap         | `number`                                                                                                                                                    | The row gap between the content.           | `0`               |
+| columnGap      | `number`                                                                                                                                                    | The column gap between the content.        | `0`               |
 
 ### `CardPressHandler` Props
 

package/src/components/Card/Card.props.ts

@@ -10,6 +10,7 @@ interface CardProps
     | 'brand'
     | 'energy'
     | 'broadband'
+    | 'highlight'
     | 'mobile'
     | 'insurance'
     | 'cashback'

package/src/components/Card/Card.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { BellMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { ComponentProps } from 'react';
 import { Card, CardAction, CardActions, CardPressHandler } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { BodyText } from '../BodyText';
@@ -7,6 +8,8 @@ import { Button } from '../Button';
 import { Flex } from '../Flex';
 import { Heading } from '../Heading';
 
+type CardStoryProps = ComponentProps<typeof Card>;
+
 const meta = {
   title: 'Stories / Card',
   component: Card,
@@ -31,6 +34,7 @@ const meta = {
         'brand',
         'energy',
         'broadband',
+        'highlight',
         'mobile',
         'insurance',
         'cashback',
@@ -65,7 +69,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Card {...props}>
         <BodyText>{children as string}</BodyText>
@@ -75,7 +79,7 @@ export const Playground: Story = {
 };
 
 export const WithActions: Story = {
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex gap="400">
         <Card
@@ -139,7 +143,7 @@ export const WithOnlyAction: Story = {
   args: {
     variant: 'emphasis',
   },
-  render: ({ ...props }) => {
+  render: ({ ...props }: CardStoryProps) => {
     return (
       <Card {...props} flexDirection="column" alignItems="stretch" spacing="md">
         <CardActions>
@@ -159,7 +163,7 @@ export const Variants: Story = {
   parameters: {
     controls: { exclude: ['variant', 'colorScheme'] },
   },
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex spacing="lg">
         <VariantTitle title="Subtle - White">
@@ -182,76 +186,86 @@ export const Variants: Story = {
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Purple - Subtle">
+        <VariantTitle title="Brand - Subtle">
           <Card {...props} colorScheme="brand" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Purple - Emphasis">
+        <VariantTitle title="Brand - Emphasis">
           <Card {...props} colorScheme="brand" variant="emphasis">
             <BodyText inverted>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Energy Blue - Subtle">
+        <VariantTitle title="Energy - Subtle">
           <Card {...props} colorScheme="energy" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Energy Blue - Emphasis">
+        <VariantTitle title="Energy - Emphasis">
           <Card {...props} colorScheme="energy" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Broadband Green - Subtle">
+        <VariantTitle title="Broadband - Subtle">
           <Card {...props} colorScheme="broadband" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Broadband Green - Emphasis">
+        <VariantTitle title="Broadband - Emphasis">
           <Card {...props} colorScheme="broadband" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Mobile Rose - Subtle">
+        <VariantTitle title="Mobile - Subtle">
           <Card {...props} colorScheme="mobile" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Mobile Rose - Emphasis">
+        <VariantTitle title="Mobile - Emphasis">
           <Card {...props} colorScheme="mobile" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Insurance Orange - Subtle">
+        <VariantTitle title="Insurance - Subtle">
           <Card {...props} colorScheme="insurance" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Insurance Orange - Emphasis">
+        <VariantTitle title="Insurance - Emphasis">
           <Card {...props} colorScheme="insurance" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Cashback Lilac - Subtle">
+        <VariantTitle title="Cashback - Subtle">
           <Card {...props} colorScheme="cashback" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Cashback Lilac - Emphasis">
+        <VariantTitle title="Cashback - Emphasis">
           <Card {...props} colorScheme="cashback" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Piggy Pink - Subtle">
+        <VariantTitle title="Piggy - Subtle">
           <Card {...props} colorScheme="pig" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Piggy Pink - Emphasis">
+        <VariantTitle title="Piggy - Emphasis">
           <Card {...props} colorScheme="pig" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
+        <VariantTitle title="Highlight - Subtle">
+          <Card {...props} colorScheme="highlight" variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Highlight - Emphasis">
+          <Card {...props} colorScheme="highlight" variant="emphasis">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
       </Flex>
     );
   },
@@ -264,7 +278,7 @@ export const WithShadow: Story = {
   parameters: {
     controls: { exclude: ['variant'] },
   },
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex spacing="lg">
         <VariantTitle title="Subtle - White - Shadow">
@@ -286,7 +300,7 @@ export const Interactive: Story = {
   parameters: {
     controls: { exclude: ['variant', 'colorScheme'] },
   },
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex spacing="lg">
         <VariantTitle title="Pressable - Subtle - White">

package/src/components/Card/CardRoot.tsx

@@ -164,6 +164,9 @@ const styles = StyleSheet.create(theme => ({
         pig: {
           borderWidth: theme.components.card.brand.borderWidth,
         },
+        highlight: {
+          borderWidth: theme.components.card.brand.borderWidth,
+        },
       },
       shadowColor: {
         functional: {
@@ -331,6 +334,22 @@ const styles = StyleSheet.create(theme => ({
           borderColor: theme.color.border.strong,
         },
       },
+      {
+        variant: 'subtle',
+        colorScheme: 'highlight',
+        styles: {
+          backgroundColor: theme.color.surface.highlight.subtle,
+          borderColor: theme.color.border.strong,
+        },
+      },
+      {
+        variant: 'emphasis',
+        colorScheme: 'highlight',
+        styles: {
+          backgroundColor: theme.color.surface.highlight.default,
+          borderColor: theme.color.border.strong,
+        },
+      },
     ],
   },
 }));

package/src/components/Icon/Icon.docs.mdx

@@ -34,7 +34,7 @@ Icons are often used to enhance the usability and accessibility of digital produ
 You can either use the React Native components directy from our `@utilitywarehouse/hearth-react-native-icons` package or use the `Icon`
 component from our `@utilitywarehouse/hearth-react-native` package to render the icons with utility props such as `color`.
 
-We reccomend that you use the `Icon` component to ensure that the icons are styled correctly and consistently across your application.
+We recommend that you use the `Icon` component to ensure that the icons are styled correctly and consistently across your application.
 The `Icon` component also provides additional functionality such as handling different color modes and sizes as well as automatically applying
 light and dark mode colors from the theme.
 

package/src/components/Input/Input.tsx

@@ -9,7 +9,7 @@ import {
   EyeSmallIcon,
   SearchMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-import { useTheme } from '../../hooks';
+import { useFormFieldAccessibility, useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
@@ -75,7 +75,7 @@ const Input = forwardRef<TextInput, InputProps>(
       if (formFieldContext?.setShouldHandleAccessibility) {
         formFieldContext.setShouldHandleAccessibility(true);
       }
-    }, []);
+    }, [formFieldContext]);
 
     const [fieldType, setFieldType] = useState<'password' | 'text'>(
       type === 'password' ? 'password' : 'text'
@@ -88,6 +88,16 @@ const Input = forwardRef<TextInput, InputProps>(
 
     const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
     const shouldShowClear = clearable && !!(props as InputWithoutChildrenProps)?.value;
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+      label: inputLabel,
+      helperText: inputHelperText,
+      validText: inputValidText,
+      invalidText: inputInvalidText,
+      required: inputRequired,
+      validationStatus: inputValidationStatus,
+      fallbackLabel: props.accessibilityLabel,
+      fallbackHint: props.accessibilityHint,
+    });
 
     const toggleFieldType = () => {
       setFieldType(fieldType === 'password' ? 'text' : 'password');
@@ -107,37 +117,6 @@ const Input = forwardRef<TextInput, InputProps>(
       return undefined;
     })();
 
-    const getAccessibilityLabel = () => {
-      let accessibilityLabel = '';
-      if (inputLabel) {
-        accessibilityLabel = accessibilityLabel + inputLabel;
-      }
-      if (inputRequired) {
-        accessibilityLabel = accessibilityLabel + ', required';
-      }
-
-      return accessibilityLabel || props.accessibilityLabel;
-    };
-
-    const getAccessibilityHint = () => {
-      let accessibilityHint = '';
-      if (inputHelperText) {
-        accessibilityHint = accessibilityHint + inputHelperText;
-      }
-      if (inputValidationStatus !== 'initial') {
-        if (accessibilityHint.length > 0) {
-          accessibilityHint = accessibilityHint + ', ';
-        }
-        if (inputValidationStatus === 'invalid' && inputInvalidText) {
-          accessibilityHint = accessibilityHint + inputInvalidText;
-        }
-        if (inputValidationStatus === 'valid' && inputValidText) {
-          accessibilityHint = accessibilityHint + inputValidText;
-        }
-      }
-      return accessibilityHint || props.accessibilityHint;
-    };
-
     return (
       <FormField
         label={label}
@@ -188,8 +167,8 @@ const Input = forwardRef<TextInput, InputProps>(
                 inputMode={getInputMode}
                 inBottomSheet={inBottomSheet}
                 {...props}
-                aria-label={getAccessibilityLabel()}
-                accessibilityHint={getAccessibilityHint()}
+                aria-label={accessibilityLabel}
+                accessibilityHint={accessibilityHint}
               />
               {shouldShowClear && (
                 <InputSlot>

package/src/components/List/List.docs.mdx

@@ -32,6 +32,8 @@ import {
 import { BackToTopButton, BadgeList, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './List.stories';
 
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
+
 <Meta title="Components / List" />
 
 <ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1-163" />
@@ -146,11 +148,11 @@ are ignored, so conditional list items will not affect which item loses the top
 
 #### - `ListItemHeading`
 
-Has all props of the [`BodyText` component](?path=/docs/typography-body-text--docs).
+Has all props of the <StorybookLink to="typography-body-text">`BodyText` component</StorybookLink>.
 
 #### - `ListItemHelperText`
 
-Has all props of the [`BodyText` component](?path=/docs/typography-body-text--docs).
+Has all props of the <StorybookLink to="typography-body-text">`BodyText` component</StorybookLink>.
 
 #### - `ListItemTrailingContent`
 

package/src/components/StepperInput/StepperInput.tsx

@@ -3,6 +3,7 @@ import { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import type { TextInput, TextInputFocusEvent } from 'react-native';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useFormFieldAccessibility } from '../../hooks';
 import { FormField } from '../FormField';
 import { InputComponent, InputField } from '../Input/Input';
 import StepperButton from './StepperButton';
@@ -143,6 +144,16 @@ const StepperInput = ({
   const allowDecimal = decimalPrecision > 0;
   const keyboardType = allowNegative || allowDecimal ? 'numeric' : 'number-pad';
   const inputMode = allowDecimal ? 'decimal' : 'numeric';
+  const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+    label,
+    helperText,
+    validText,
+    invalidText,
+    required,
+    validationStatus,
+    fallbackLabel: props.accessibilityLabel,
+    fallbackHint: props.accessibilityHint,
+  });
 
   useImperativeHandle(ref, () => inputRef.current as TextInput, []);
 
@@ -216,44 +227,6 @@ const StepperInput = ({
     onBlur?.(event);
   };
 
-  const getAccessibilityLabel = () => {
-    let accessibilityLabel = '';
-
-    if (label) {
-      accessibilityLabel = accessibilityLabel + label;
-    }
-
-    if (required) {
-      accessibilityLabel = accessibilityLabel + ', required';
-    }
-
-    return accessibilityLabel || props.accessibilityLabel;
-  };
-
-  const getAccessibilityHint = () => {
-    let accessibilityHint = '';
-
-    if (helperText) {
-      accessibilityHint = accessibilityHint + helperText;
-    }
-
-    if (validationStatus !== 'initial') {
-      if (accessibilityHint.length > 0) {
-        accessibilityHint = accessibilityHint + ', ';
-      }
-
-      if (validationStatus === 'invalid' && invalidText) {
-        accessibilityHint = accessibilityHint + invalidText;
-      }
-
-      if (validationStatus === 'valid' && validText) {
-        accessibilityHint = accessibilityHint + validText;
-      }
-    }
-
-    return accessibilityHint || props.accessibilityHint;
-  };
-
   return (
     <FormField
       label={label}
@@ -297,8 +270,8 @@ const StepperInput = ({
             onFocus={handleFocus}
             onBlur={handleBlur}
             onChangeText={handleChangeText}
-            accessibilityLabel={getAccessibilityLabel()}
-            accessibilityHint={getAccessibilityHint()}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
             accessibilityState={{
               ...(props.accessibilityState ?? {}),
               disabled: disabled || readonly,

package/src/components/Textarea/Textarea.tsx

@@ -13,7 +13,7 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 import { Path, Svg } from 'react-native-svg';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
+import { useFormFieldAccessibility, useTheme } from '../../hooks';
 import { FormField, useFormFieldContext } from '../FormField';
 import TextareaFieldComponent from './TextareaField';
 import TextareaRoot from './TextareaRoot';
@@ -61,6 +61,16 @@ const Textarea = ({
   const textareaHeight = useSharedValue(textareaDefaultHeight);
   const resizeStartHeight = useSharedValue(textareaDefaultHeight);
   const theme = useTheme();
+  const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+    label: textareaLabel,
+    helperText: textareaHelperText,
+    validText: textareaValidText,
+    invalidText: textareaInvalidText,
+    required: textareaRequired,
+    validationStatus: textareaValidationStatus,
+    fallbackLabel: props.accessibilityLabel,
+    fallbackHint: props.accessibilityHint,
+  });
 
   useEffect(() => {
     if (formFieldContext?.setShouldHandleAccessibility) {
@@ -75,37 +85,6 @@ const Textarea = ({
     }
   }, [resizeStartHeight, textareaDefaultHeight, textareaHeight]);
 
-  const getAccessibilityLabel = () => {
-    let accessibilityLabel = '';
-    if (textareaLabel) {
-      accessibilityLabel = accessibilityLabel + textareaLabel;
-    }
-    if (textareaRequired) {
-      accessibilityLabel = accessibilityLabel + ', required';
-    }
-
-    return accessibilityLabel || props.accessibilityLabel;
-  };
-
-  const getAccessibilityHint = () => {
-    let accessibilityHint = '';
-    if (textareaHelperText) {
-      accessibilityHint = accessibilityHint + textareaHelperText;
-    }
-    if (textareaValidationStatus !== 'initial') {
-      if (accessibilityHint.length > 0) {
-        accessibilityHint = accessibilityHint + ', ';
-      }
-      if (textareaValidationStatus === 'invalid' && textareaInvalidText) {
-        accessibilityHint = accessibilityHint + textareaInvalidText;
-      }
-      if (textareaValidationStatus === 'valid' && textareaValidText) {
-        accessibilityHint = accessibilityHint + textareaValidText;
-      }
-    }
-    return accessibilityHint || props.accessibilityHint;
-  };
-
   const handleTextareaLayout = (event: LayoutChangeEvent) => {
     if (!hasMeasuredHeight.current) {
       textareaHeight.value = event.nativeEvent.layout.height;
@@ -171,8 +150,8 @@ const Textarea = ({
         isDisabled={textareaDisabled}
         isFocused={focused}
         required={textareaRequired}
-        aria-label={getAccessibilityLabel()}
-        accessibilityHint={getAccessibilityHint()}
+        aria-label={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
       >
         {children ? (
           <>{children}</>

package/src/components/VerificationInput/VerificationInput.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { TextInput, View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useFormFieldAccessibility } from '../../hooks';
 import { FormField } from '../FormField';
 import type { VerificationInputHandle, VerificationInputProps } from './VerificationInput.props';
 import { getNextIndexFromValueChange } from './VerificationInput.utils';
@@ -163,29 +164,16 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
     );
 
     const slots = Array.from({ length }, (_, index) => index);
-
-    const getAccessibilityLabel = () => {
-      return label || props.accessibilityLabel;
-    };
-
-    const getAccessibilityHint = () => {
-      let accessibilityHint = '';
-      if (helperText) {
-        accessibilityHint = accessibilityHint + helperText;
-      }
-      if (validationStatus !== 'initial') {
-        if (accessibilityHint.length > 0) {
-          accessibilityHint = accessibilityHint + ', ';
-        }
-        if (validationStatus === 'invalid' && invalidText) {
-          accessibilityHint = accessibilityHint + invalidText;
-        }
-        if (validationStatus === 'valid' && validText) {
-          accessibilityHint = accessibilityHint + validText;
-        }
-      }
-      return accessibilityHint || props.accessibilityHint;
-    };
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+      label,
+      helperText,
+      validText,
+      invalidText,
+      validationStatus,
+      fallbackLabel: props.accessibilityLabel,
+      fallbackHint: props.accessibilityHint,
+      includeRequiredInLabel: false,
+    });
 
     return (
       <FormField
@@ -208,8 +196,8 @@ const VerificationInput = forwardRef<VerificationInputHandle, VerificationInputP
             value={displayValue}
             autoFocus={autoFocus}
             editable={!disabled && !readonly}
-            accessibilityLabel={getAccessibilityLabel()}
-            accessibilityHint={getAccessibilityHint()}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
             accessibilityState={{ disabled: disabled || readonly }}
             importantForAccessibility="yes"
             onChangeText={handleChangeText}

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export { default as useBreakpointValue } from './useBreakpointValue';
 export { default as useColorMode } from './useColorMode';
+export { default as useFormFieldAccessibility } from './useFormFieldAccessibility';
 export { default as useMedia } from './useMedia';
 export { usePrevious } from './usePrevious';
 export { useStyleProps } from './useStyleProps';