ferns-ui 1.1.2 → 1.2.0

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={{