@lotics/ui 1.11.0 → 1.12.0

package/src/dialog.tsx

@@ -163,7 +163,7 @@ export function Dialog(props: DialogProps) {
                   <PortalHost>
                     <View testID={testID} style={[styles.dialogContainer, { borderRadius }]}>
                       <View style={[styles.closeButtonContainer, { paddingHorizontal: screenSize.small ? 16 : 24 }]}>
-                        <Button icon="x" onPress={handleClose} />
+                        <Button icon="x" accessibilityLabel="Close" onPress={handleClose} />
                       </View>
                       <View style={styles.container}>{children}</View>
                     </View>

package/src/form_field.tsx

@@ -1,3 +1,4 @@
+import { createContext, useContext, useId } from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 import { Text } from "./text";
 import { Spacer } from "./spacer";
@@ -12,38 +13,89 @@ export interface FormFieldProps {
   optionalLabel?: string;
 }
 
+/**
+ * Binding emitted by `FormField` to the single input it wraps. Descendants
+ * that call `useFormField()` apply these props to the native input so screen
+ * readers know the label, error, and description apply to it.
+ */
+export interface FormFieldBinding {
+  inputId: string;
+  labelId: string;
+  descriptionId: string | undefined;
+  errorId: string | undefined;
+  invalid: boolean;
+}
+
+const FormFieldContext = createContext<FormFieldBinding | null>(null);
+
+/**
+ * Returns the association IDs set by the nearest enclosing `FormField`.
+ * Inputs spread the returned props onto their underlying element so label,
+ * description, and error are announced together. Returns `null` when the
+ * input is used outside a `FormField` — callers should then provide their
+ * own `accessibilityLabel`.
+ */
+export function useFormField(): FormFieldBinding | null {
+  return useContext(FormFieldContext);
+}
+
 export function FormField(props: FormFieldProps & { children: React.ReactNode }) {
   const { label, description, error, optional, style, children, optionalLabel = "Optional" } = props;
 
+  const inputId = useId();
+  const labelId = `${inputId}-label`;
+  const descriptionId = description ? `${inputId}-description` : undefined;
+  const errorId = error ? `${inputId}-error` : undefined;
+
+  const binding: FormFieldBinding = {
+    inputId,
+    labelId,
+    descriptionId,
+    errorId,
+    invalid: !!error,
+  };
+
   return (
-    <View style={[{ paddingBottom: 16 }, style]}>
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-        }}
-      >
-        {!!label && (
-          <Text numberOfLines={1} weight="medium">
-            {label}
+    <FormFieldContext.Provider value={binding}>
+      <View style={[{ paddingBottom: 16 }, style]}>
+        <View
+          style={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+          }}
+        >
+          {!!label && (
+            <Text nativeID={labelId} numberOfLines={1} weight="medium">
+              {label}
+            </Text>
+          )}
+          {!!optional && (
+            <Text numberOfLines={1} size="sm" color="zinc-500">
+              {optionalLabel}
+            </Text>
+          )}
+        </View>
+        {!!description && (
+          <Text nativeID={descriptionId} color="muted">
+            {description}
           </Text>
         )}
-        {!!optional && (
-          <Text numberOfLines={1} size="sm" color="zinc-500">
-            {optionalLabel}
-          </Text>
+        <Spacer size={8} />
+        <View>{children}</View>
+        {error && (
+          <>
+            <Spacer size={8} />
+            {/*
+              `role="alert"` + `aria-live="polite"` makes the text announce
+              when the error first appears or changes, without stealing focus.
+            */}
+            <Text nativeID={errorId} color="danger" accessibilityRole="alert" aria-live="polite">
+              {error}
+            </Text>
+          </>
         )}
       </View>
-      {!!description && <Text color="muted">{description}</Text>}
-      <Spacer size={8} />
-      <View>{children}</View>
-      {error && (
-        <>
-          <Spacer size={8} />
-          <Text color="danger">{error}</Text>
-        </>
-      )}
-    </View>
+    </FormFieldContext.Provider>
   );
 }

package/src/form_switch.tsx

@@ -1,3 +1,4 @@
+import { useId } from "react";
 import { View } from "react-native";
 import { Text } from "./text";
 import { FormFieldProps } from "./form_field";
@@ -8,6 +9,8 @@ export interface FormSwitchProps extends Omit<FormFieldProps, "optional">, Switc
 
 export function FormSwitch(props: FormSwitchProps) {
   const { label, description, error, value, onChange } = props;
+  const labelId = useId();
+  const errorId = error ? `${labelId}-error` : undefined;
 
   return (
     <View>
@@ -18,9 +21,18 @@ export function FormSwitch(props: FormSwitchProps) {
           alignItems: description ? "flex-start" : "center",
         }}
       >
-        <Switch value={value} onChange={onChange} />
+        <Switch
+          value={value}
+          onChange={onChange}
+          accessibilityLabel={label}
+        />
         <View style={{ flex: 1 }}>
-          <Text onPress={() => onChange?.(!value)} weight="medium" userSelect="none">
+          <Text
+            nativeID={labelId}
+            onPress={() => onChange?.(!value)}
+            weight="medium"
+            userSelect="none"
+          >
             {label}
           </Text>
           {!!description && (
@@ -34,7 +46,14 @@ export function FormSwitch(props: FormSwitchProps) {
       {!!error && (
         <>
           <Spacer size={8} />
-          <Text color="danger">{error}</Text>
+          <Text
+            nativeID={errorId}
+            color="danger"
+            accessibilityRole="alert"
+            aria-live="polite"
+          >
+            {error}
+          </Text>
         </>
       )}
       <Spacer size={8} />

package/src/gantt/gantt_view.tsx

@@ -1,16 +1,19 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { View, ScrollView, Pressable, StyleSheet } from "react-native";
 import { Text } from "../text";
 import { colors } from "../colors";
-import { dayDiff } from "../calendar/dates";
+import { addDays, dayDiff } from "../calendar/dates";
+import { usePointerDrag } from "../use_pointer_drag";
 import { axisRange, barGeometry, buildTicks, pxPerDay } from "./scale";
-import type { GanttScale, GanttTask } from "./types";
+import { DEFAULT_GANTT_LABELS } from "./types";
+import type { GanttLabels, GanttScale, GanttTask } from "./types";
 
 const LABEL_W = 188;
 const HEADER_H = 38;
 const ROW_H = 40;
 const BAR_H = 22;
-const SCALE_LABELS: Record<GanttScale, string> = { day: "Ngày", week: "Tuần", month: "Tháng" };
+const HANDLE_W = 8;
+const MIN_BAR = 8;
 const SCALES: GanttScale[] = ["day", "week", "month"];
 
 export interface GanttViewProps<T = unknown> {
@@ -18,35 +21,62 @@ export interface GanttViewProps<T = unknown> {
   defaultScale?: GanttScale;
   today?: Date;
   locale?: string;
+  /** Optional toolbar caption shown left of the zoom switch. */
+  title?: string;
+  /** User-facing chrome strings; defaults to English. */
+  labels?: Partial<GanttLabels>;
   onTaskPress?: (task: GanttTask<T>) => void;
+  /** When set, each bar gets a right-edge resize handle; dragging it adjusts the
+   *  task's end. Receives the task + the new inclusive end day (clamped ≥ start). */
+  onTaskResize?: (task: GanttTask<T>, newEnd: Date) => void;
 }
 
 /**
  * Timeline / gantt: a frozen task-label column beside a horizontally-scrollable
  * zoomable axis. Bars are positioned by {@link barGeometry}; month boundaries get
- * a heavier gridline; a red line marks today. Renders at its natural height — wrap
- * in a ScrollView for very long task lists.
+ * a heavier gridline; a red line marks today. The axis opens scrolled to today
+ * so a long history doesn't bury the active range. Renders at its natural height
+ * — wrap in a ScrollView for very long task lists.
  */
 export function GanttView<T = unknown>(props: GanttViewProps<T>) {
-  const { tasks, defaultScale = "week", today = new Date(), locale, onTaskPress } = props;
+  const { tasks, defaultScale = "week", today = new Date(), locale, title, onTaskPress, onTaskResize } = props;
+  const L = { ...DEFAULT_GANTT_LABELS, ...props.labels };
   const [scale, setScale] = useState<GanttScale>(defaultScale);
 
+  const taskById = useMemo(() => new Map(tasks.map((t) => [t.id, t])), [tasks]);
+  const { live, bind } = usePointerDrag((id, _pointer, delta) => {
+    const t = taskById.get(id);
+    if (!t || !onTaskResize) return;
+    const days = Math.round(delta.dx / pxPerDay(scale));
+    if (days === 0) return;
+    const newEnd = addDays(t.end ?? t.start, days);
+    onTaskResize(t, newEnd < t.start ? t.start : newEnd);
+  });
+
   const { start: axisStart, end: axisEnd } = useMemo(() => axisRange(tasks, today), [tasks, today]);
   const ticks = useMemo(() => buildTicks(axisStart, axisEnd, scale, locale), [axisStart, axisEnd, scale, locale]);
   const axisWidth = useMemo(() => (dayDiff(axisStart, axisEnd) + 1) * pxPerDay(scale), [axisStart, axisEnd, scale]);
   const todayLeft = dayDiff(axisStart, today) * pxPerDay(scale);
   const todayInRange = today >= axisStart && today <= axisEnd;
 
+  // Open scrolled to today (a margin of recent past visible), like the time-grid
+  // scrolls to "now" — keeps the active range in view when history is long.
+  const scrollRef = useRef<ScrollView>(null);
+  useEffect(() => {
+    const id = setTimeout(() => scrollRef.current?.scrollTo({ x: Math.max(0, todayLeft - 96), animated: false }), 0);
+    return () => clearTimeout(id);
+  }, [scale, todayLeft]);
+
   return (
     <View style={styles.root}>
       {/* Toolbar: zoom */}
       <View style={styles.toolbar}>
-        <Text size="sm" color="muted">Tiến độ dự án</Text>
+        {title ? <Text size="sm" color="muted">{title}</Text> : <View />}
         <View style={styles.zoomSwitch}>
           {SCALES.map((s) => (
             <Pressable key={s} onPress={() => setScale(s)} accessibilityRole="button" style={[styles.zoomBtn, scale === s && styles.zoomBtnActive]}>
               <Text size="sm" weight={scale === s ? "medium" : "regular"} color={scale === s ? "default" : "muted"}>
-                {SCALE_LABELS[s]}
+                {L[s]}
               </Text>
             </Pressable>
           ))}
@@ -57,7 +87,7 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
         {/* Frozen label column */}
         <View style={{ width: LABEL_W, borderRightWidth: 1, borderRightColor: colors.border }}>
           <View style={[styles.headerCell, { height: HEADER_H, paddingLeft: 12, justifyContent: "center" }]}>
-            <Text size="xs" color="muted">CÔNG VIỆC</Text>
+            <Text size="xs" color="muted" style={{ textTransform: "uppercase" }}>{L.task}</Text>
           </View>
           {tasks.map((t) => (
             <View key={t.id} style={[styles.labelRow, { height: ROW_H }]}>
@@ -68,7 +98,7 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
         </View>
 
         {/* Scrollable timeline */}
-        <ScrollView horizontal style={{ flex: 1 }} showsHorizontalScrollIndicator>
+        <ScrollView ref={scrollRef} horizontal style={{ flex: 1 }} showsHorizontalScrollIndicator>
           <View style={{ width: axisWidth }}>
             {/* Header ticks */}
             <View style={{ height: HEADER_H, flexDirection: "row", borderBottomWidth: 1, borderBottomColor: colors.border }}>
@@ -86,7 +116,9 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
 
             {/* Task rows */}
             {tasks.map((t) => {
-              const bar = barGeometry(t, axisStart, scale);
+              const base = barGeometry(t, axisStart, scale);
+              const dragging = live && live.id === t.id ? live : null;
+              const width = dragging ? Math.max(MIN_BAR, base.width + dragging.dx) : base.width;
               const accent = t.color || colors.teal[600];
               return (
                 <View key={t.id} style={{ height: ROW_H, borderBottomWidth: 1, borderBottomColor: colors.zinc[100] }}>
@@ -99,12 +131,20 @@ export function GanttView<T = unknown>(props: GanttViewProps<T>) {
                     onPress={onTaskPress ? () => onTaskPress(t) : undefined}
                     accessibilityRole={onTaskPress ? "button" : undefined}
                     accessibilityLabel={t.label}
-                    style={{ position: "absolute", left: bar.left, width: bar.width, top: (ROW_H - BAR_H) / 2, height: BAR_H }}
+                    style={{ position: "absolute", left: base.left, width, top: (ROW_H - BAR_H) / 2, height: BAR_H }}
                   >
-                    <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8 }}>
+                    <View style={{ flex: 1, borderRadius: 5, backgroundColor: accent, justifyContent: "center", paddingHorizontal: 8, opacity: dragging ? 0.85 : 1 }}>
                       <Text size="xs" weight="medium" numberOfLines={1} style={{ color: colors.white }}>{t.label}</Text>
                     </View>
                   </Pressable>
+                  {onTaskResize ? (
+                    <View
+                      ref={bind(t.id, "ew-resize")}
+                      style={{ position: "absolute", left: base.left + width - HANDLE_W, width: HANDLE_W + 6, top: (ROW_H - BAR_H) / 2, height: BAR_H, alignItems: "center", justifyContent: "center", zIndex: 2 }}
+                    >
+                      <View style={{ width: 3, height: 11, borderRadius: 2, backgroundColor: "rgba(255,255,255,0.75)" }} />
+                    </View>
+                  ) : null}
                 </View>
               );
             })}

package/src/gantt/index.ts

@@ -1,4 +1,5 @@
 export { GanttView } from "./gantt_view";
 export type { GanttViewProps } from "./gantt_view";
 export { barGeometry, axisRange, buildTicks, pxPerDay } from "./scale";
-export type { GanttTask, GanttScale, GanttTick, GanttBar } from "./types";
+export { DEFAULT_GANTT_LABELS } from "./types";
+export type { GanttTask, GanttScale, GanttTick, GanttBar, GanttLabels } from "./types";

package/src/gantt/types.ts

@@ -18,6 +18,21 @@ export interface GanttTask<T = unknown> {
 /** Zoom level of the horizontal time axis. */
 export type GanttScale = "day" | "week" | "month";
 
+/**
+ * User-facing chrome strings. Defaults to English and taken as a prop — i18n is
+ * the consumer's responsibility (see the @lotics/ui convention in
+ * grid/data_grid.tsx). Axis tick labels come from `locale` via Intl.
+ */
+export interface GanttLabels {
+  day: string;
+  week: string;
+  month: string;
+  /** Frozen task-column header. */
+  task: string;
+}
+
+export const DEFAULT_GANTT_LABELS: GanttLabels = { day: "Day", week: "Week", month: "Month", task: "Task" };
+
 /** A header tick on the time axis. */
 export interface GanttTick {
   date: Date;

package/src/grid/select_header_cell.tsx

@@ -17,6 +17,7 @@ export const SelectHeaderCell = memo(function SelectHeaderCell() {
       }}
     >
       <CheckboxInput
+        accessibilityLabel="Select all rows"
         testID="table-header-checkbox"
         indeterminate={isIndeterminate}
         checked={isRowSelected}

package/src/icon.tsx

@@ -392,12 +392,18 @@ interface IconProps {
 
 export function Icon({ name, size = 24, color = colors.zinc["900"], testID }: IconProps) {
   const IconComponent = iconComponents[name] ?? iconComponents["box"];
-  if (testID) {
-    return (
-      <View testID={testID}>
-        <IconComponent size={size} color={color} />
-      </View>
-    );
-  }
-  return <IconComponent size={size} color={color} />;
+  // Icons are always decorative: the enclosing control (button, menu item,
+  // status badge) carries the accessible name. Exposing the SVG to assistive
+  // tech doubles announcements ("check check-mark"). Callers that need a
+  // standalone meaningful icon must wrap it in a View with their own label.
+  return (
+    <View
+      testID={testID}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      aria-hidden
+    >
+      <IconComponent size={size} color={color} />
+    </View>
+  );
 }

package/src/icon_button.tsx

@@ -5,21 +5,27 @@ import { PressableHighlight } from "./pressable_highlight";
 import { Ref, useCallback } from "react";
 import { TooltipSide } from "./tooltip";
 
-export interface IconButtonProps {
+interface IconButtonBase {
   ref?: Ref<View>;
   testID?: string;
   icon: IconName;
   color?: "none" | "secondary" | "white";
   iconColor?: string;
-  tooltip?: string;
   tooltipSide?: TooltipSide;
-  /** Accessible name for the button. Falls back to `tooltip` when omitted. */
-  accessibilityLabel?: string;
   onPress?: (event: GestureResponderEvent) => void;
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
 }
 
+/**
+ * An icon-only button has no visible text, so it must carry an accessible
+ * name. The compiler enforces at least one of `tooltip` (also shown visually
+ * on hover) or `accessibilityLabel` (a11y-only). When both are present,
+ * `accessibilityLabel` is the announced name.
+ */
+export type IconButtonProps = IconButtonBase &
+  ({ tooltip: string; accessibilityLabel?: string } | { tooltip?: string; accessibilityLabel: string });
+
 export function IconButton(props: IconButtonProps) {
   const {
     ref,

package/src/index.css

@@ -336,6 +336,17 @@ html {
   color: var(--color-zinc-900);
 }
 
+/* Keyboard focus ring. `:focus-visible` only matches keyboard-driven focus,
+   so pointer/touch interactions stay visually unchanged. */
+:focus-visible {
+  outline: 2px solid var(--color-zinc-900);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
 /* @font-face declarations are NOT included here — each app provides its own
    font loading because paths differ per platform:
    - Frontend: /fonts/Inter_*.woff2 (served from public/)

package/src/landmark.tsx

@@ -0,0 +1,34 @@
+import { View, ViewProps } from "react-native";
+
+export type LandmarkKind =
+  | "banner"
+  | "navigation"
+  | "main"
+  | "complementary"
+  | "contentinfo"
+  | "region";
+
+export interface LandmarkProps extends Omit<ViewProps, "role" | "accessibilityRole"> {
+  /**
+   * Semantic region kind. On React Native Web, each maps to the matching HTML
+   * element (`<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`), exposing
+   * the region to screen readers' landmark navigation. On native, the role is
+   * exposed via `accessibilityRole`.
+   */
+  kind: LandmarkKind;
+  /**
+   * Required for `region` (must have a name) and recommended for any
+   * landmark type when the page contains more than one.
+   */
+  accessibilityLabel?: string;
+  children?: React.ReactNode;
+}
+
+export function Landmark(props: LandmarkProps) {
+  const { kind, accessibilityLabel, children, ...rest } = props;
+  return (
+    <View role={kind} accessibilityLabel={accessibilityLabel} {...rest}>
+      {children}
+    </View>
+  );
+}

package/src/menu_button.tsx

@@ -18,6 +18,18 @@ export interface MenuButtonProps {
   tooltip?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;
+  /** DOM ID, used by combobox patterns via `aria-activedescendant`. */
+  nativeID?: string;
+  /**
+   * Accessible name when `title` is a React node (so no string is available)
+   * or when you need a name that differs from the visible title.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Override the ARIA role. Defaults to `menuitem` when pressable, matching
+   * the common popover-menu usage.
+   */
+  role?: "menuitem" | "button" | "option";
 }
 
 export function MenuButton(props: MenuButtonProps) {
@@ -35,8 +47,13 @@ export function MenuButton(props: MenuButtonProps) {
     tooltip,
     style,
     testID,
+    accessibilityLabel,
+    role = "menuitem",
+    nativeID,
   } = props;
 
+  const resolvedLabel = accessibilityLabel ?? (typeof title === "string" ? title : undefined) ?? tooltip;
+
   const resolvedIcon =
     typeof icon === "string" ? (
       <Icon size={20} name={icon as IconName} color={danger ? colors.red["900"] : undefined} />
@@ -78,6 +95,7 @@ export function MenuButton(props: MenuButtonProps) {
       <PressableHighlight
         ref={ref}
         testID={testID}
+        nativeID={nativeID}
         onPress={() => {
           onPress?.();
         }}
@@ -85,6 +103,9 @@ export function MenuButton(props: MenuButtonProps) {
         disabled={disabled}
         tooltip={tooltip}
         style={containerStyle}
+        role={role}
+        accessibilityLabel={resolvedLabel}
+        accessibilityState={{ selected: !!selected, disabled: !!disabled }}
       >
         {inner}
       </PressableHighlight>

package/src/menu_list_item.tsx

@@ -49,6 +49,9 @@ export function MenuListItem(props: MenuListItemProps) {
         onPress={onPress}
         disabled={disabled}
         style={containerStyle}
+        accessibilityRole="button"
+        accessibilityLabel={description ? `${title}, ${description}` : title}
+        accessibilityState={{ disabled: !!disabled }}
       >
         {inner}
       </PressableHighlight>

package/src/number_input.tsx

@@ -1,5 +1,6 @@
 import { colors } from "./colors";
 import { fontFamilyRegular, inputTextStyleWeb } from "./text_utils";
+import { useFormField } from "./form_field";
 
 export interface NumberInputProps {
   value: number | null;
@@ -9,14 +10,22 @@ export interface NumberInputProps {
   onBlur?: () => void;
   disabled?: boolean;
   testID?: string;
+  accessibilityLabel?: string;
 }
 
 export function NumberInput(props: NumberInputProps) {
-  const { value, onValueChange, min, max, disabled, onBlur, testID } = props;
+  const { value, onValueChange, min, max, disabled, onBlur, testID, accessibilityLabel } = props;
+  const binding = useFormField();
+  const describedBy = [binding?.descriptionId, binding?.errorId].filter(Boolean).join(" ") || undefined;
 
   return (
     <input
       data-testid={testID}
+      id={binding?.inputId}
+      aria-labelledby={binding?.labelId}
+      aria-label={!binding ? accessibilityLabel : undefined}
+      aria-describedby={describedBy}
+      aria-invalid={binding?.invalid || undefined}
       value={value ?? ""}
       onChange={(e) =>
         e.target.value !== "" ? onValueChange(Number(e.target.value)) : onValueChange(null)

package/src/pill_button.tsx

@@ -30,6 +30,7 @@ export function PillButton(props: PillButtonProps) {
           <IconButton
             icon="x"
             tooltip={dismissTooltip}
+            accessibilityLabel={dismissTooltip ?? "Remove"}
             onPress={onDismiss}
             testID={testID ? `${testID}-remove` : undefined}
           />