@utilitywarehouse/hearth-react-native 0.32.0 → 0.32.2

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/Tabs/Tab.tsx

@@ -87,8 +87,8 @@ const styles = StyleSheet.create(theme => ({
     },
     variants: {
       size: {
-        md: { height: theme.components.tabs.md.height },
-        lg: { height: theme.components.tabs.lg.height },
+        md: { minHeight: theme.components.tabs.md.height },
+        lg: { minHeight: theme.components.tabs.lg.height },
       },
       pressed: {
         true: {

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';

package/src/hooks/useFormFieldAccessibility.test.tsx

@@ -0,0 +1,74 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import useFormFieldAccessibility from './useFormFieldAccessibility';
+
+type HookArgs = Parameters<typeof useFormFieldAccessibility>[0];
+
+const renderHook = (args: HookArgs) => {
+  let result: ReturnType<typeof useFormFieldAccessibility> | undefined;
+
+  const TestComponent = () => {
+    result = useFormFieldAccessibility(args);
+    return null;
+  };
+
+  renderToStaticMarkup(<TestComponent />);
+
+  if (!result) {
+    throw new Error('Hook did not return a result');
+  }
+
+  return result;
+};
+
+describe('useFormFieldAccessibility', () => {
+  it('builds a label from the field label and required state', () => {
+    expect(
+      renderHook({
+        label: 'Email',
+        required: true,
+      })
+    ).toEqual({
+      accessibilityHint: undefined,
+      accessibilityLabel: 'Email, required',
+    });
+  });
+
+  it('builds a hint from helper text and validation feedback', () => {
+    expect(
+      renderHook({
+        helperText: 'Enter the code we sent you',
+        validationStatus: 'invalid',
+        invalidText: 'Code is invalid',
+      })
+    ).toEqual({
+      accessibilityHint: 'Enter the code we sent you, Code is invalid',
+      accessibilityLabel: undefined,
+    });
+  });
+
+  it('falls back to provided accessibility props when no composed value exists', () => {
+    expect(
+      renderHook({
+        fallbackLabel: 'Custom label',
+        fallbackHint: 'Custom hint',
+      })
+    ).toEqual({
+      accessibilityHint: 'Custom hint',
+      accessibilityLabel: 'Custom label',
+    });
+  });
+
+  it('supports omitting the required suffix from the label', () => {
+    expect(
+      renderHook({
+        label: 'Verification code',
+        required: true,
+        includeRequiredInLabel: false,
+      })
+    ).toEqual({
+      accessibilityHint: undefined,
+      accessibilityLabel: 'Verification code',
+    });
+  });
+});

package/src/hooks/useFormFieldAccessibility.ts

@@ -0,0 +1,67 @@
+import { useMemo } from 'react';
+
+type ValidationStatus = 'initial' | 'valid' | 'invalid';
+
+type UseFormFieldAccessibilityArgs = {
+  label?: string;
+  helperText?: string;
+  validText?: string;
+  invalidText?: string;
+  required?: boolean;
+  validationStatus?: ValidationStatus;
+  fallbackLabel?: string;
+  fallbackHint?: string;
+  includeRequiredInLabel?: boolean;
+};
+
+const useFormFieldAccessibility = ({
+  label,
+  helperText,
+  validText,
+  invalidText,
+  required = false,
+  validationStatus = 'initial',
+  fallbackLabel,
+  fallbackHint,
+  includeRequiredInLabel = true,
+}: UseFormFieldAccessibilityArgs) => {
+  const accessibilityLabel = useMemo(() => {
+    const nextAccessibilityLabelParts: string[] = [];
+
+    if (label) {
+      nextAccessibilityLabelParts.push(label);
+    }
+
+    if (includeRequiredInLabel && required) {
+      nextAccessibilityLabelParts.push('required');
+    }
+
+    const nextAccessibilityLabel = nextAccessibilityLabelParts.join(', ');
+    return nextAccessibilityLabel || fallbackLabel;
+  }, [fallbackLabel, includeRequiredInLabel, label, required]);
+
+  const accessibilityHint = useMemo(() => {
+    const accessibilityHints: string[] = [];
+
+    if (helperText) {
+      accessibilityHints.push(helperText);
+    }
+
+    if (validationStatus === 'invalid' && invalidText) {
+      accessibilityHints.push(invalidText);
+    }
+
+    if (validationStatus === 'valid' && validText) {
+      accessibilityHints.push(validText);
+    }
+
+    return accessibilityHints.join(', ') || fallbackHint;
+  }, [fallbackHint, helperText, invalidText, validText, validationStatus]);
+
+  return {
+    accessibilityHint,
+    accessibilityLabel,
+  };
+};
+
+export default useFormFieldAccessibility;