@lotics/ui 1.10.0 → 1.11.1

package/src/text.tsx

@@ -22,8 +22,25 @@ export interface TextProps {
   decoration?: TextDecorationLine;
   style?: RNTextProps["style"];
   onPress?: () => void;
+  /** ID used to target this element from `accessibilityLabelledBy` / `aria-describedby`. */
+  nativeID?: string;
+  accessibilityRole?: RNTextProps["accessibilityRole"];
+  accessibilityLabel?: string;
+  accessibilityElementsHidden?: boolean;
+  importantForAccessibility?: RNTextProps["importantForAccessibility"];
+  /**
+   * Renders as a heading of this rank (1–6): exposes `accessibilityRole="header"`
+   * and `aria-level`, giving the page a real heading outline. Appearance still
+   * comes from `size`/`weight` — `level` is the semantic rank only. Use one
+   * level-1 per page.
+   */
+  level?: HeadingLevel;
+  "aria-live"?: "off" | "polite" | "assertive";
+  "aria-hidden"?: boolean;
 }
 
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
 type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 type TextAlign = "left" | "right" | "center";
 type TextDecorationLine = "underline" | "lineThrough" | "underline lineThrough";
@@ -48,6 +65,14 @@ export function Text(props: TextProps) {
     transform,
     onPress,
     style,
+    nativeID,
+    accessibilityRole,
+    accessibilityLabel,
+    accessibilityElementsHidden,
+    importantForAccessibility,
+    level,
+    "aria-live": ariaLive,
+    "aria-hidden": ariaHidden,
   } = props;
 
   // On web, responsive font sizes are applied via CSS using data-text-size attribute.
@@ -57,6 +82,14 @@ export function Text(props: TextProps) {
   return (
     <RNText
       testID={testID}
+      nativeID={nativeID}
+      accessibilityRole={level != null ? "header" : accessibilityRole}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityElementsHidden={accessibilityElementsHidden}
+      importantForAccessibility={importantForAccessibility}
+      aria-level={level}
+      aria-live={ariaLive}
+      aria-hidden={ariaHidden}
       {...webProps}
       style={[
         { color: getTextColor(color) },

package/src/text_input_field.tsx

@@ -12,6 +12,7 @@ import { ShortcutBadge } from "./shortcut_badge";
 import { fontFamilyRegular, getInputLineHeight, getInputTextStyle } from "./text_utils";
 import { useScreenSize } from "./use_screen_size";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
+import { useFormField } from "./form_field";
 import type { ShortcutDescriptor } from "./keyboard";
 
 interface TextInputFieldProps extends RNTextInputProps {
@@ -25,6 +26,13 @@ interface TextInputFieldProps extends RNTextInputProps {
   autoGrow?: boolean;
   /** Keyboard shortcut badge shown in the right slot when the input is empty. */
   shortcut?: string | ShortcutDescriptor;
+  /** Accessible name for the clear button. Default: "Clear". Pass a translated string from the consumer. */
+  clearLabel?: string;
+  // DOM-only ARIA attrs not declared on React Native's TextInputProps. They
+  // are forwarded verbatim to the underlying web input.
+  "aria-controls"?: string;
+  "aria-activedescendant"?: string;
+  "aria-autocomplete"?: "none" | "inline" | "list" | "both";
 }
 
 export function TextInputField(props: TextInputFieldProps) {
@@ -40,12 +48,29 @@ export function TextInputField(props: TextInputFieldProps) {
     disabled,
     autoGrow,
     shortcut,
+    clearLabel = "Clear",
     ref,
+    "aria-controls": ariaControls,
+    "aria-activedescendant": ariaActivedescendant,
+    "aria-autocomplete": ariaAutocomplete,
     ...inputProps
   } = props;
 
+  // Forwarded to the DOM input on RN Web. RN's TextInput type does not declare
+  // these attrs, but react-native-web passes unknown props through to the
+  // element, which is the correct behavior for combobox patterns.
+  const webAriaAttrs: Record<string, unknown> = {};
+  if (ariaControls !== undefined) webAriaAttrs["aria-controls"] = ariaControls;
+  if (ariaActivedescendant !== undefined) webAriaAttrs["aria-activedescendant"] = ariaActivedescendant;
+  if (ariaAutocomplete !== undefined) webAriaAttrs["aria-autocomplete"] = ariaAutocomplete;
+
   const { small } = useScreenSize();
   const lineHeight = getInputLineHeight(small);
+  const binding = useFormField();
+
+  // Describedby chains description and error so both are read. We join them
+  // explicitly here because React Native Web does not flatten array attrs.
+  const describedBy = [binding?.descriptionId, binding?.errorId].filter(Boolean).join(" ") || undefined;
 
   const minHeight =
     numberOfLines && numberOfLines > 1
@@ -90,11 +115,16 @@ export function TextInputField(props: TextInputFieldProps) {
       )}
       <RNTextInput
         {...inputProps}
+        {...webAriaAttrs}
         ref={mergedRef}
         value={value}
         onChangeText={handleChangeText}
         onFocus={inputProps.onFocus}
         onBlur={inputProps.onBlur}
+        nativeID={binding?.inputId ?? inputProps.nativeID}
+        accessibilityLabelledBy={binding?.labelId ?? inputProps.accessibilityLabelledBy}
+        aria-describedby={describedBy}
+        aria-invalid={binding?.invalid || undefined}
         style={[
           styles.input,
           getInputTextStyle(),
@@ -115,6 +145,7 @@ export function TextInputField(props: TextInputFieldProps) {
       {!!clearable && !!value ? (
         <IconButton
           icon="x"
+          tooltip={clearLabel}
           onPress={() => {
             onChangeText?.("");
             onClear?.();

package/src/tooltip.tsx

@@ -190,17 +190,27 @@ export function useTooltip(options?: string | UseTooltipOptions) {
   const side = typeof options === "string" ? "top" : (options?.side ?? "top");
   const offset = typeof options === "string" ? undefined : options?.offset;
 
-  const onMouseEnter = useCallback(
-    (e: React.MouseEvent | { currentTarget: HTMLElement }) => {
+  const showFor = useCallback(
+    (target: unknown) => {
       if (!text || !context) return;
-      const target = e.currentTarget as HTMLElement;
-      if (!target) return;
+      // Tooltips are a web-only UI. `typeof` guards the native platforms where
+      // `HTMLElement` does not exist as a global, then `instanceof` narrows
+      // without an unchecked cast.
+      if (typeof HTMLElement === "undefined") return;
+      if (!(target instanceof HTMLElement)) return;
       const rect = target.getBoundingClientRect();
       context.show(text, rect, side, offset);
     },
     [text, context, side, offset],
   );
 
+  const onMouseEnter = useCallback(
+    (e: { currentTarget: unknown }) => {
+      showFor(e.currentTarget);
+    },
+    [showFor],
+  );
+
   const onMouseLeave = useCallback(() => {
     if (!context) return;
     context.hide();
@@ -211,15 +221,42 @@ export function useTooltip(options?: string | UseTooltipOptions) {
     context.hide();
   }, [context]);
 
-  // If no text or no provider, return empty object
+  // Keyboard focus must reveal the same label as hover. `:focus-visible` CSS
+  // handles the visual ring; we tie tooltip visibility to real focus so
+  // screen-reader-off keyboard users still see names.
+  //
+  // Typed as `unknown` because these handlers spread onto both
+  // `react-native-web`'s `Pressable` (expects `NativeSyntheticEvent<TargetedEvent>`)
+  // and regular DOM elements (expect `React.FocusEvent`). At runtime on web,
+  // both shapes expose `currentTarget` as an `HTMLElement`, which is all we read.
+  const onFocus = useCallback(
+    (e: { currentTarget: unknown }) => {
+      showFor(e.currentTarget);
+    },
+    [showFor],
+  );
+
+  const onBlur = useCallback(() => {
+    if (!context) return;
+    context.hide();
+  }, [context]);
+
   if (!text || !context) {
-    return {};
+    return {
+      onMouseEnter: undefined,
+      onMouseLeave: undefined,
+      onMouseDown: undefined,
+      onFocus: undefined,
+      onBlur: undefined,
+    };
   }
 
   return {
     onMouseEnter,
     onMouseLeave,
     onMouseDown,
+    onFocus,
+    onBlur,
   };
 }