ferns-ui 1.1.1 → 1.2.0

package/src/CustomSelectField.tsx

@@ -70,16 +70,16 @@ export const CustomSelectField = ({
   return (
     <View
       accessibilityHint="Select an option or input a custom value"
-      accessibilityLabel="Select dropdown with popup text input field"
-      accessibilityRole="combobox"
+      aria-label="Select dropdown with popup text input field"
+      aria-role="combobox"
       style={{
         width: "100%",
       }}
     >
       <View
         accessibilityHint="Opens a dropdown menu. Select an option, or select custom to trigger popup to input a custom value"
-        accessibilityLabel="Select dropdown"
-        accessibilityRole="button"
+        aria-label="Select dropdown"
+        aria-role="button"
       >
         <SelectField
           disabled={disabled}
@@ -94,7 +94,7 @@ export const CustomSelectField = ({
       {Boolean(showCustomInput) && (
         <View
           accessibilityHint="Enter a custom value or go back to select a provided option."
-          accessibilityLabel="Custom value input field"
+          aria-label="Custom value input field"
           style={{
             paddingVertical: 16,
           }}

package/src/DateTimeActionSheet.tsx

@@ -78,7 +78,7 @@ const TimeInput = ({
     >
       <TextInput
         accessibilityHint="Enter a number"
-        accessibilityLabel="Text input field"
+        aria-label="Text input field"
         enterKeyHint="done"
         keyboardType="number-pad"
         style={
@@ -120,12 +120,12 @@ const CalendarButton = ({
   return (
     <Pressable
       accessibilityHint={accessibilityHint}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="button"
+      aria-label={accessibilityLabel}
+      aria-role="button"
       hitSlop={10}
       onPress={onClick}
     >
-      <FontAwesome6 color={theme.surface.secondaryDark} name={iconName} size={16} />
+      <FontAwesome6 color={theme.surface.secondaryDark} name={iconName} size={16}  selectable={undefined} />
     </Pressable>
   );
 };
@@ -325,9 +325,11 @@ const DateCalendar = ({
   onDismiss,
   date,
   setDate,
+  timezone,
 }: {
   type: DateTimeActionSheetProps["type"];
   date: string;
+  timezone: string | undefined;
   setDate: (date: string) => void;
   onChange: DateTimeActionSheetProps["onChange"];
   onDismiss: DateTimeActionSheetProps["onDismiss"];
@@ -349,7 +351,10 @@ const DateCalendar = ({
   }
 
   if (date) {
-    markedDates[DateTime.fromISO(dateString).toFormat("yyyy-MM-dd")] = {
+    const displayDate = timezone
+      ? DateTime.fromISO(dateString).setZone(timezone).toFormat("yyyy-MM-dd")
+      : DateTime.fromISO(dateString).toFormat("yyyy-MM-dd");
+    markedDates[displayDate] = {
       selected: true,
       selectedColor: theme.text.primary,
       customStyles: {
@@ -503,11 +508,12 @@ export const DateTimeActionSheet = ({
     () => ({
       date,
       type,
+      timezone,
       setDate,
       onChange,
       onDismiss,
     }),
-    [date, type, setDate, onChange, onDismiss]
+    [date, type, setDate, onChange, onDismiss, timezone]
   );
 
   const timeProps = useMemo(

package/src/DateTimeField.tsx

@@ -50,7 +50,7 @@ export const DateTimeField = ({
           return printDateAndTime(val, {timezone, showTimezone: true});
         case "date":
         default:
-          return printDate(val, {ignoreTime: true});
+          return printDate(val, {timezone, ignoreTime: true});
       }
     },
     [timezone, type]

package/src/DateUtilities.tsx

@@ -134,8 +134,6 @@ export const printDate = (
   }: {
     timezone?: string;
     showTimezone?: boolean;
-    // Ignore the time in the date, treat as a date in timezone.
-    // Will log a warning if the time is not set to midnight UTC.
     ignoreTime?: boolean;
     defaultValue?: string;
   } = {}
@@ -147,23 +145,23 @@ export const printDate = (
     console.warn("showTimezone is not supported for printDate");
   }
 
+  if (ignoreTime) {
+    // Parse the date in the specified timezone (or local if not provided)
+    // then force to UTC midnight to ignore time component
+    const justDate = timezone
+      ? DateTime.fromISO(date).setZone(timezone)
+      : DateTime.fromISO(date).setZone("UTC");
+    // Using startOf('day') to normalize the time component
+    return justDate.startOf("day").toFormat("M/d/yyyy");
+  }
+
   let clonedDate;
   try {
-    clonedDate = getDate(date!, {timezone});
+    clonedDate = getDate(date, {timezone});
   } catch (error: any) {
     throw new Error(`printDate: ${error.message}`);
   }
 
-  if (ignoreTime) {
-    if (!date) {
-      throw new Error("printDate: Passed undefined");
-    }
-    // Use only the date component, ignore the time.
-    const justDate = DateTime.fromISO(date);
-    // We force it into UTC so we can get the correct date.
-    return justDate.setZone("UTC").toFormat("M/d/yyyy");
-  }
-
   return clonedDate.toLocaleString(DateTime.DATE_SHORT);
 };
 

package/src/DismissButton.tsx

@@ -13,8 +13,8 @@ export const DismissButton = ({
   return (
     <Pressable
       accessibilityHint={accessibilityHint}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="button"
+      aria-label={accessibilityLabel}
+      aria-role="button"
       style={{
         alignItems: "center",
         justifyContent: "center",

package/src/Icon.tsx

@@ -25,6 +25,7 @@ export const Icon = ({
       light={type === "light" || type === "sharpLight"}
       name={iconName}
       regular={type === "regular"}
+      selectable={undefined}
       sharp={type === "sharp"}
       size={iconSize}
       solid={type === "solid" || type === "sharpSolid"}

package/src/IconButton.tsx

@@ -98,8 +98,8 @@ const IconButtonComponent: FC<IconButtonProps> = ({
           ? `Opens a confirmation dialog to confirm ${accessLabel}`
           : `Press to perform ${accessLabel} action`
       }
-      accessibilityLabel={accessLabel}
-      accessibilityRole="button"
+      aria-label={accessLabel}
+      aria-role="button"
       disabled={loading}
       style={{
         alignItems: "center",
@@ -136,6 +136,7 @@ const IconButtonComponent: FC<IconButtonProps> = ({
         <FontAwesome6
           color={color}
           name={iconName}
+          selectable={undefined}
           size={variant === "navigation" ? 20 : 16}
           solid
         />

package/src/Link.tsx

@@ -10,9 +10,9 @@ export const Link = ({text, href, onClick}: LinkProps): React.ReactElement => {
   }
   return (
     <Pressable
-      accessibilityRole="button"
+      aria-role="button"
       hitSlop={20}
-      onPress={() => (onClick ? onClick() : Linking.openURL(href))}
+      onPress={() => (onClick ? onClick() : href && Linking.openURL(href))}
     >
       <Text color="link" underline>
         {text}

package/src/MobileAddressAutoComplete.tsx

@@ -73,8 +73,8 @@ export const MobileAddressAutocomplete = ({
 
   return (
     <TouchableOpacity
-      accessibilityRole="button"
       activeOpacity={1}
+      aria-role="button"
       style={{flex: 1}}
       onPress={() => setIsFocused(false)}
     >

package/src/Modal.tsx

@@ -72,13 +72,7 @@ const ModalContent: FC<{
         ...(isMobile
           ? {}
           : {
-              shadowColor: "#000",
-              shadowOffset: {
-                width: 0,
-                height: 4,
-              },
-              shadowOpacity: 0.5,
-              shadowRadius: 24,
+              boxShadow: "0px 4px 24px rgba(0, 0, 0, 0.5)",
               elevation: 24,
             }),
       }}
@@ -86,8 +80,8 @@ const ModalContent: FC<{
       <View style={{alignSelf: "flex-end", position: "relative"}}>
         <Pressable
           accessibilityHint="Closes the modal"
-          accessibilityLabel="Close modal"
-          accessibilityRole="button"
+          aria-label="Close modal"
+          aria-role="button"
           style={{
             flex: 1,
             justifyContent: "center",
@@ -106,8 +100,8 @@ const ModalContent: FC<{
       {title && (
         <View
           accessibilityHint="Modal title"
-          accessibilityLabel={title}
-          accessibilityRole="header"
+          aria-label={title}
+          aria-role="header"
           style={{alignSelf: "flex-start"}}
         >
           <Heading size="lg">{title}</Heading>
@@ -116,8 +110,8 @@ const ModalContent: FC<{
       {subtitle && (
         <View
           accessibilityHint="Modal Sub Heading Text"
-          accessibilityLabel={subtitle}
-          accessibilityRole="text"
+          aria-label={subtitle}
+          aria-role="text"
           style={{alignSelf: "flex-start", marginTop: subtitle ? 8 : 0}}
         >
           <Text size="lg">{subtitle}</Text>
@@ -126,15 +120,15 @@ const ModalContent: FC<{
       {text && (
         <View
           accessibilityHint="Modal body text"
-          accessibilityLabel={text}
-          accessibilityRole="text"
+          aria-label={text}
+          aria-role="text"
           style={{marginVertical: text ? 12 : 0, alignSelf: "flex-start"}}
         >
           <Text>{text}</Text>
         </View>
       )}
       {children && (
-        <View accessibilityRole="text" style={{marginTop: text ? 0 : 12}}>
+        <View aria-role="text" style={{marginTop: text ? 0 : 12}}>
           {children}
         </View>
       )}
@@ -221,8 +215,8 @@ export const Modal: FC<ModalProps> = ({
           <View>
             <View
               accessibilityHint="Pull down to close the modal"
-              accessibilityLabel="Pull down bar"
-              accessibilityRole="adjustable"
+              aria-label="Pull down bar"
+              aria-role="adjustable"
               style={{
                 justifyContent: "center",
                 alignItems: "center",

package/src/MultiselectField.tsx

@@ -31,8 +31,8 @@ const Option: FC<OptionProps> = ({value, label, isDefault, selected, onSelect})
       <TouchableOpacity
         key={value}
         accessibilityHint={`Select ${label ?? value} from list of options`}
-        accessibilityLabel={label ?? value}
-        accessibilityRole="checkbox"
+        aria-label={label ?? value}
+        aria-role="checkbox"
         hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
         style={{
           justifyContent: "center",
@@ -80,8 +80,8 @@ export const MultiselectField: FC<MultiselectFieldProps> = ({
   return (
     <View
       accessibilityHint="Contains a prompt and list of options to select"
-      accessibilityLabel={title}
-      accessibilityRole="combobox"
+      aria-label={title}
+      aria-role="combobox"
       style={{
         display: "flex",
         width: "100%",

package/src/Pagination.tsx

@@ -36,7 +36,7 @@ const PaginationButton = ({
   return (
     <Pressable
       accessibilityHint={`Click to go to ${type} page`}
-      accessibilityLabel="Pagination Button"
+      aria-label="Pagination Button"
       disabled={disabled}
       style={{
         width: 32,

package/src/PickerSelect.tsx

@@ -253,8 +253,8 @@ export function RNPickerSelect({
         >
           {Boolean(onUpArrow) && (
             <TouchableOpacity
-              accessibilityRole="button"
               activeOpacity={onUpArrow ? 0.5 : 1}
+              aria-role="button"
               onPress={onUpArrow ? onUpArrowEvent : undefined}
             >
               <View
@@ -272,8 +272,8 @@ export function RNPickerSelect({
           )}
           {Boolean(onDownArrow) && (
             <TouchableOpacity
-              accessibilityRole="button"
               activeOpacity={onDownArrow ? 0.5 : 1}
+              aria-role="button"
               onPress={onDownArrow ? onDownArrowEvent : undefined}
             >
               <View
@@ -359,7 +359,7 @@ export function RNPickerSelect({
         }}
       >
         <TextInput
-          editable={false}
+          readOnly
           style={{color: disabled ? theme.text.secondaryLight : theme.text.primary}}
           testID="text_input"
           value={selectedItem?.inputLabel ? selectedItem?.inputLabel : selectedItem?.label}
@@ -411,7 +411,7 @@ export function RNPickerSelect({
           {...modalProps}
         >
           <Pressable
-            accessibilityRole="button"
+            aria-role="button"
             style={{
               flex: 1,
             }}

package/src/RadioField.tsx

@@ -21,8 +21,8 @@ export const RadioField = ({
         <TouchableOpacity
           key={option.key ?? option.value}
           accessibilityHint={`Select ${option} from list of options`}
-          accessibilityLabel={option.label ?? option.value}
-          accessibilityRole="button"
+          aria-label={option.label ?? option.value}
+          aria-role="button"
           style={{
             flexDirection: "row",
             justifyContent: "space-between",

package/src/SegmentedControl.tsx

@@ -33,7 +33,7 @@ export const SegmentedControl = ({
       {items.map((item, index) => (
         <Pressable
           key={index}
-          accessibilityRole="button"
+          aria-role="button"
           style={{
             display: "flex",
             paddingHorizontal: size === "md" ? theme.spacing.sm : theme.spacing.md,

package/src/Text.tsx

@@ -105,7 +105,7 @@ export const Text = ({
     lines = 1;
   }
   const inner = (
-    <NativeText numberOfLines={lines} style={style} testID={testID}>
+    <NativeText numberOfLines={lines} selectable={undefined} style={style} testID={testID}>
       {children}
     </NativeText>
   );

package/src/TextField.tsx

@@ -89,23 +89,12 @@ export const TextField: FC<TextFieldProps> = ({
   const [focused, setFocused] = useState(false);
   const [height, setHeight] = useState(rows * 40);
 
-  const borderColor = useMemo(() => {
-    if (disabled) {
-      return theme.border.activeNeutral;
-    } else if (errorText) {
-      return theme.border.error;
-    } else {
-      return focused ? theme.border.focus : theme.border.dark;
-    }
-  }, [
-    disabled,
-    errorText,
-    focused,
-    theme.border.activeNeutral,
-    theme.border.dark,
-    theme.border.error,
-    theme.border.focus,
-  ]);
+  let borderColor = focused ? theme.border.focus : theme.border.dark;
+  if (disabled) {
+    borderColor = theme.border.activeNeutral;
+  } else if (errorText) {
+    borderColor = theme.border.error;
+  }
 
   const calculatedHeight: DimensionValue = useMemo(() => {
     if (grow) {
@@ -174,18 +163,18 @@ export const TextField: FC<TextFieldProps> = ({
             }
           }}
           accessibilityHint="Enter text here"
-          accessibilityLabel="Text input field"
           accessibilityState={{disabled}}
+          aria-label="Text input field"
           autoCapitalize={type === "text" ? "sentences" : "none"}
           autoCorrect={shouldAutocorrect}
           blurOnSubmit={blurOnSubmit}
-          editable={!disabled}
           enterKeyHint={returnKeyType}
           keyboardType={keyboardType as KeyboardTypeOptions}
           multiline={multiline}
           numberOfLines={rows || 4}
           placeholder={placeholder}
           placeholderTextColor={theme.text.secondaryLight}
+          readOnly={disabled}
           secureTextEntry={type === "password"}
           style={defaultTextInputStyles}
           testID={testID}
@@ -224,7 +213,7 @@ export const TextField: FC<TextFieldProps> = ({
           }}
         />
         {Boolean(iconName) && (
-          <Pressable accessibilityRole="button" onPress={onIconClick}>
+          <Pressable aria-role="button" onPress={onIconClick}>
             <Icon iconName={iconName!} size="md" />
           </Pressable>
         )}

package/src/Toast.tsx

@@ -214,7 +214,7 @@ export const Toast = ({
         </View>
         {Boolean(persistent && onDismiss) && (
           <Pressable
-            accessibilityRole="button"
+            aria-role="button"
             style={{
               display: "flex",
               alignItems: "center",

package/src/Tooltip.tsx

@@ -339,8 +339,8 @@ export const Tooltip: FC<TooltipProps> = ({text, children, idealPosition, includ
             >
               <Pressable
                 accessibilityHint="Tooltip information"
-                accessibilityLabel={text}
-                accessibilityRole="button"
+                aria-label={text}
+                aria-role="button"
                 style={{
                   backgroundColor: theme.surface.secondaryExtraDark,
                   borderRadius: theme.radius.default,

package/src/Unifier.ts

@@ -75,10 +75,6 @@ class UnifierClass {
     return this._dev;
   }
 
-  constructor() {
-    console.debug("[unifier] Setting up Unifier");
-  }
-
   navigation = {
     dismissOverlay: () => {
       console.warn("Dismiss overlay not supported.");

package/src/table/TableBoolean.tsx

@@ -24,8 +24,8 @@ export const TableBoolean: FC<TableBooleanProps> = ({value, isEditing = false})
     return (
       <TouchableOpacity
         accessibilityHint={`Tap to change the checkbox from ${oppositeValueString} to ${valueString}`}
-        accessibilityLabel={`Checkbox is currently ${valueString}`}
-        accessibilityRole="checkbox"
+        aria-label={`Checkbox is currently ${valueString}`}
+        aria-role="checkbox"
         hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
         style={
           {
@@ -49,8 +49,8 @@ export const TableBoolean: FC<TableBooleanProps> = ({value, isEditing = false})
       >
         <View
           accessibilityHint={value ? "Checked icon" : "Unchecked icon"}
-          accessibilityLabel={`The checkbox is ${valueString}`}
-          accessibilityRole="image"
+          aria-label={`The checkbox is ${valueString}`}
+          aria-role="image"
           style={{
             height: 32,
             width: 32,

package/src/table/TableHeaderCell.tsx

@@ -82,6 +82,7 @@ export const TableHeaderCell = ({
             <FontAwesome6
               color={theme.text.inverted}
               name={sort === "asc" ? "arrow-down" : "arrow-up"}
+              selectable={undefined}
               size={10}
               solid
             />

package/src/table/TableTitle.tsx

@@ -10,8 +10,8 @@ export const TableTitle: FC<TableTitleProps> = ({title, align = "left"}) => {
     // No hint needed for a title.
     // eslint-disable-next-line react-native-a11y/has-accessibility-hint
     <Text
-      accessibilityLabel={`Table title: ${title}`}
-      accessibilityRole="header"
+      aria-label={`Table title: ${title}`}
+      aria-role="header"
       ellipsizeMode="tail" // ensures that the text is clipped at the end of the line for all platforms
       numberOfLines={3}
       style={{