@vvedantb/native-ui 0.3.13 → 0.3.14

package/README.md

@@ -197,6 +197,8 @@ The components keep the web sizes on screen and reach a 44 pt touch target with
 
 Text scales with the system font size. Labelled controls have minimum heights, so a large Dynamic Type size grows them instead of clipping the label (the `SearchInput` lock grows with the font scale); only the `FloatingTabBar` labels are capped (1.5×), to fit the fixed bar. With Reduce Motion on, dialogs, sheets, toasts, the `Select` popover, `PricingModal`, `Progress` and `Skeleton` do not animate. Dialogs, sheets, toasts, `FloatingTabBar` and `FloatingFAB` stay inside the safe-area insets, and dialog and sheet fields stay above the keyboard on iOS and Android.
 
+The brand marks (`APP_ICONS`, the `Icon*` exports and `AppMark`) are images named by `title`, and hidden from assistive tech without one. From 0.3.14 they set the props each platform reads: `accessibilityRole="image"` and `accessibilityLabel` on iOS and Android, `role="img"` and `aria-label` on web. Without a title they set `accessibilityElementsHidden` and `importantForAccessibility="no-hide-descendants"` on native and `aria-hidden` on web. `testID` is `data-testid` on web. On web `react-native-svg` passes its props straight to the DOM `<svg>`, and React Native Web does not map `accessible`, the `accessibility*` props or `testID` there. So do not put them on an `Svg` or on a Tabler icon: put them on the parent `View` or `Pressable`. The package draws no Lucide icon, as a Lucide icon always sets `testID` on its `Svg`. On web the `Select` options are Radix DOM nodes, so from 0.3.14 they take their name and test id as `aria-label` and `data-testid` there, and as `accessibilityLabel` and `testID` on iOS and Android.
+
 ## Floating UI / Android shadows
 
 Do not put `elevation` or NativeWind `shadow-*` on nested or translucent chrome. `floatingShadow` is iOS `shadow*` and Android/web `boxShadow`. `FloatingSurface` clips on an inner view.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/native-ui",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "license": "MIT",
   "description": "Shared React Native / Expo UI primitives. Floating surfaces, forms, overlays, toasts, settings chrome, tab bar and the family app marks.",
   "type": "module",

package/src/Select.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { Platform } from "react-native";
 import {
   NativeSelectScrollView,
   Select as PrimitiveSelect,
@@ -17,6 +18,7 @@ import {
   typeStyle,
 } from "./controlStyles";
 import { palette } from "./palette";
+import { selectItemA11yProps } from "./selectA11y";
 import { useLargerText } from "./theme";
 import { useScheme } from "./useScheme";
 
@@ -138,10 +140,11 @@ function Select<TValue = string | number | null>({
                 ? `${testID}-${String(option.value ?? "null")}`
                 : undefined;
               return (
+                // On web the item is a Radix DOM node: the name and test id
+                // go as `aria-label` and `data-testid` there.
                 <SelectItem
                   key={`${String(option.value)}-${option.label}`}
-                  testID={optionId}
-                  accessibilityLabel={option.label}
+                  {...selectItemA11yProps({ label: option.label, testID: optionId }, Platform.OS)}
                   label={option.label}
                   value={String(option.value ?? NULL_SENTINEL)}
                 />

package/src/brand/AppIcons.tsx

@@ -1,5 +1,6 @@
-import type { StyleProp, ViewStyle } from "react-native";
+import { Platform, type StyleProp, type ViewStyle } from "react-native";
 import Svg, { G, Path } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
 import {
@@ -19,10 +20,11 @@ export type AppIconProps = {
   color?: string;
   /** Stroke width in rendered points, for stroke glyphs. Default: the glyph's own weight. Fill glyphs ignore it. */
   stroke?: number;
-  /** Accessible name. Without it the icon is hidden from assistive tech. */
+  /** Accessible name. Without it the icon is hidden from assistive tech. On web: `role="img"` and `aria-label`, or `aria-hidden`. */
   title?: string;
   /** `"center"` (default) centres the glyph in its square. `"start"` left-aligns its ink, for vertical lists. */
   align?: "center" | "start";
+  /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
   style?: StyleProp<ViewStyle>;
 };
@@ -70,12 +72,7 @@ function createAppIcon(app: AppName, displayName: string): AppIconComponent {
           align === "start" ? APP_MARK_VIEWBOX_START[app] : APP_MARK_VIEWBOX[app]
         }
         preserveAspectRatio="xMidYMid meet"
-        accessible={Boolean(title)}
-        accessibilityRole={title ? "image" : undefined}
-        accessibilityLabel={title}
-        accessibilityElementsHidden={!title}
-        importantForAccessibility={title ? "auto" : "no-hide-descendants"}
-        testID={testID}
+        {...svgA11yProps({ title, testID }, Platform.OS)}
         style={style}
       >
         <G {...glyphProps}>

package/src/brand/AppMark.tsx

@@ -1,5 +1,6 @@
-import type { StyleProp, ViewStyle } from "react-native";
+import { Platform, type StyleProp, type ViewStyle } from "react-native";
 import Svg, { G, Path, Rect } from "react-native-svg";
+import { svgA11yProps } from "../svgA11y";
 import { APP_ICONS } from "./AppIcons";
 import {
   APP_MARKS,
@@ -18,8 +19,9 @@ export type AppMarkProps = {
   variant?: AppMarkVariant;
   /** Width and height in points. Default 24. */
   size?: number;
-  /** Accessible name. Without it the mark is hidden from assistive tech. */
+  /** Accessible name. Without it the mark is hidden from assistive tech. On web: `role="img"` and `aria-label`, or `aria-hidden`. */
   title?: string;
+  /** Set as `data-testid` on web, where `Svg` does not map `testID`. */
   testID?: string;
   style?: StyleProp<ViewStyle>;
 };
@@ -64,12 +66,7 @@ export function AppMark({
       height={size}
       viewBox={MARK_VIEWBOX}
       preserveAspectRatio="xMidYMid meet"
-      accessible={Boolean(title)}
-      accessibilityRole={title ? "image" : undefined}
-      accessibilityLabel={title}
-      accessibilityElementsHidden={!title}
-      importantForAccessibility={title ? "auto" : "no-hide-descendants"}
-      testID={testID}
+      {...svgA11yProps({ title, testID }, Platform.OS)}
       style={style}
     >
       <Rect width={1024} height={1024} rx={TILE_RADIUS} fill={tone.bg} />

package/src/primitives/icon.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
-import type { LucideIcon, LucideProps } from "lucide-react-native";
+import type { IconProps as TablerIconProps } from "@tabler/icons-react-native";
 
-type IconProps = LucideProps & {
-  as: LucideIcon;
+// Tabler, not Lucide: a Lucide icon always sets `testID` on its `Svg`, which
+// on web is a DOM `<svg>`, so React logs it as an unknown DOM prop.
+type IconProps = TablerIconProps & {
+  as: React.ComponentType<TablerIconProps>;
   className?: string;
 };
 

package/src/primitives/select.tsx

@@ -1,10 +1,7 @@
 import * as SelectPrimitive from "@rn-primitives/select";
-import {
-  Check,
-  ChevronDown,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from "lucide-react-native";
+// Tabler, not Lucide: a Lucide icon always sets `testID` on its `Svg`, which
+// on web is a DOM `<svg>`, so React logs it as an unknown DOM prop.
+import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react-native";
 import * as React from "react";
 import { Platform, ScrollView, StyleSheet, Text, View } from "react-native";
 import { FadeIn, FadeOut } from "react-native-reanimated";
@@ -72,7 +69,7 @@ const SelectTrigger = React.forwardRef<
       {...props}
     >
       <>{children}</>
-      <ChevronDown size={16} color={tokens.color.muted[scheme]} />
+      <IconChevronDown size={16} color={tokens.color.muted[scheme]} />
     </SelectPrimitive.Trigger>
   );
 });
@@ -153,6 +150,11 @@ const SelectLabel = React.forwardRef<
   );
 });
 
+/**
+ * On web `SelectPrimitive.Item` passes these props to a Radix DOM node, not a
+ * React Native view, so give it `aria-label` and `data-testid` there, not
+ * `accessibilityLabel` or `testID` (`selectItemA11yProps`).
+ */
 type SelectItemProps = React.ComponentPropsWithoutRef<
   typeof SelectPrimitive.Item
 > & {
@@ -177,7 +179,7 @@ const SelectItem = React.forwardRef<
     >
       <View className="absolute right-2 size-3.5 items-center justify-center">
         <SelectPrimitive.ItemIndicator>
-          <Check size={16} color={tokens.color.muted[scheme]} />
+          <IconCheck size={16} color={tokens.color.muted[scheme]} />
         </SelectPrimitive.ItemIndicator>
       </View>
       <SelectPrimitive.ItemText
@@ -220,7 +222,7 @@ function SelectScrollUpButton(
       className="items-center justify-center py-1"
       {...props}
     >
-      <ChevronUpIcon size={16} color="#737373" />
+      <IconChevronUp size={16} color="#737373" />
     </SelectPrimitive.ScrollUpButton>
   );
 }
@@ -239,7 +241,7 @@ function SelectScrollDownButton(
       className="items-center justify-center py-1"
       {...props}
     >
-      <ChevronDownIcon size={16} color="#737373" />
+      <IconChevronDown size={16} color="#737373" />
     </SelectPrimitive.ScrollDownButton>
   );
 }

package/src/selectA11y.ts

@@ -0,0 +1,26 @@
+/**
+ * Accessibility and test props for a `Select` option. On web
+ * `@rn-primitives/select` passes the props of its `Item` through a `Slot` to
+ * the Radix `Select.Item`, a DOM `<div>`. React Native Web never sees them, so
+ * React logs `accessibilityLabel` and `testID` there as unknown DOM props. Web
+ * gets `aria-label` and `data-testid`; iOS and Android keep the native props.
+ * No React Native import, so the tests can load this file.
+ */
+
+export type SelectItemA11yProps =
+  | { "aria-label": string; "data-testid"?: string }
+  | { accessibilityLabel: string; testID?: string };
+
+/**
+ * Spread on the `SelectItem`. Pass `Platform.OS` as `os`. Without `testID` the
+ * result has no test id key, not one set to `undefined`.
+ */
+export function selectItemA11yProps(
+  { label, testID }: { label: string; testID?: string },
+  os: string,
+): SelectItemA11yProps {
+  if (os === "web") {
+    return testID === undefined ? { "aria-label": label } : { "aria-label": label, "data-testid": testID };
+  }
+  return testID === undefined ? { accessibilityLabel: label } : { accessibilityLabel: label, testID };
+}

package/src/svgA11y.ts

@@ -0,0 +1,43 @@
+/**
+ * Accessibility and test props for a `react-native-svg` `Svg`. React Native
+ * Web maps `accessible`, the `accessibility*` props and `testID` on `View`
+ * and `Text`, but on web `Svg` is a DOM `<svg>` that takes its props as they
+ * are, so React logs each one as an unknown DOM prop. Web gets ARIA and
+ * `data-testid`; iOS and Android keep the native props. No React Native
+ * import, so the tests can load this file.
+ */
+
+export type SvgA11yProps =
+  | { role: "img"; "aria-label": string; "data-testid"?: string }
+  | { "aria-hidden": true; "data-testid"?: string }
+  | { accessible: true; accessibilityRole: "image"; accessibilityLabel: string; testID?: string }
+  | {
+      accessible: false;
+      accessibilityElementsHidden: true;
+      importantForAccessibility: "no-hide-descendants";
+      testID?: string;
+    };
+
+/**
+ * Spread on the `Svg`. With `title` it is an image with that name; without it,
+ * it is hidden from assistive tech. Pass `Platform.OS` as `os`. Without
+ * `testID` the result has no test id key, not one set to `undefined`.
+ */
+export function svgA11yProps(
+  { title, testID }: { title?: string; testID?: string },
+  os: string,
+): SvgA11yProps {
+  if (os === "web") {
+    const id = testID === undefined ? {} : { "data-testid": testID };
+    return title ? { role: "img", "aria-label": title, ...id } : { "aria-hidden": true, ...id };
+  }
+  const id = testID === undefined ? {} : { testID };
+  return title
+    ? { accessible: true, accessibilityRole: "image", accessibilityLabel: title, ...id }
+    : {
+        accessible: false,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        ...id,
+      };
+}