@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/src/DateRangePickerContext.tsx

@@ -1,3 +1,8 @@
+/**
+ * Local Solid context shared by the date-range picker fields.
+ * The owning DatePicker module records the upstream component source.
+ */
+
 import { createContext, useContext } from "solid-js";
 import { type createDateRangePicker } from "@proyecto-viviana/solidaria";
 import {
@@ -32,6 +37,9 @@ export interface DateRangePickerContextValue {
   };
   triggerRef: () => HTMLElement | null;
   setTriggerRef: (element: HTMLElement | null) => void;
+  /** RAC Popover `triggerRef: groupRef` — the FieldGroup, not the calendar button. */
+  groupRef: () => HTMLElement | null;
+  setGroupRef: (element: HTMLElement | null) => void;
   pickerAria: ReturnType<typeof createDateRangePicker>;
 }
 

package/src/Dialog.tsx

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Dialog.tsx
+
 /**
  * Dialog component for solidaria-components
  *
@@ -6,20 +20,23 @@
  */
 
 import {
-  type JSX,
   createContext,
   createEffect,
   createMemo,
+  createSignal,
   createUniqueId,
-  splitProps,
   useContext,
   Switch,
   Match,
+  createTrackedEffect,
 } from "solid-js";
+import type { Context } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createDialog,
   createOverlayTrigger,
   focusSafely,
+  useIsHidden,
   type AriaDialogProps,
 } from "@proyecto-viviana/solidaria";
 import {
@@ -27,9 +44,13 @@ import {
   type OverlayTriggerState,
 } from "@proyecto-viviana/solid-stately";
 import { DialogTriggerContext, useOverlayTriggerState } from "./contexts";
+import { OverlayContext } from "./Popover";
 import { ButtonContext } from "./Button";
+import { TextContext } from "./Text";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   DEFAULT_SLOT,
+  Provider,
   type RenderChildren,
   type ClassNameOrFunction,
   type StyleOrFunction,
@@ -78,7 +99,7 @@ export { DialogTriggerContext, useDialogTrigger } from "./contexts";
  * A DialogTrigger opens a dialog when a trigger element is pressed.
  * Children should include a trigger element (e.g. Button) and the dialog content.
  */
-export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
+export function DialogTrigger(props: DialogTriggerProps): JSX.Element | null {
   const [local] = splitProps(props, ["isOpen", "defaultOpen", "onOpenChange"]);
 
   const state = createOverlayTriggerState({
@@ -91,15 +112,17 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
     onOpenChange: local.onOpenChange,
   });
 
-  let triggerRef: HTMLElement | null = null;
+  // A signal, so a consumer reading `triggerRef()` (e.g. the dialog's
+  // trigger-label fallback) re-reads once the trigger mounts.
+  const [triggerRef, setTriggerElement] = createSignal<HTMLElement | null>(null);
   const triggerId = createUniqueId();
 
   // Create overlay trigger props so registered trigger components can expose
   // the same expanded/controls relationship as React Aria DialogTrigger.
-  const triggerAria = createOverlayTrigger({ type: "dialog" }, state, () => triggerRef);
+  const triggerAria = createOverlayTrigger({ type: "dialog" }, state, triggerRef);
 
   const restoreFocusToTrigger = () => {
-    const trigger = triggerRef;
+    const trigger = triggerRef();
     if (!trigger?.isConnected) return;
 
     const win = trigger.ownerDocument.defaultView ?? window;
@@ -132,31 +155,40 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
         restoreFocusToTrigger();
       }
     },
+    point: state.point,
+    setPoint: state.setPoint,
   };
 
   const setTriggerRef = (el: HTMLElement | null) => {
     if (!el) return;
-    if (!triggerRef || !triggerRef.isConnected) {
-      triggerRef = el;
+    // First registrant wins. Replacing a not-yet-connected trigger lets a later
+    // CloseButton steal ownership during defaultOpen (both refs fire before
+    // either node is in the document), then close+toggle reopens the dialog.
+    if (!triggerRef()) {
+      setTriggerElement(el);
     }
   };
 
   // Context value - memoized to avoid unnecessary re-renders
   const contextValue = createMemo(() => ({
     state: stateWithFocusRestore,
-    triggerRef: () => triggerRef,
+    triggerRef,
     setTriggerRef,
     triggerId,
     triggerProps: triggerAria.triggerProps,
     overlayProps: triggerAria.overlayProps,
   }));
 
+  // If within a collection (e.g. Tabs), render nothing. Matches RAC DialogTrigger
+  // (`useIsHidden()` early return) so a hidden collection pass does not leak a
+  // duplicate trigger. Not using createHideableComponent: that also wraps a ref.
+  const isHidden = useIsHidden();
+  if (isHidden()) {
+    return null;
+  }
+
   // In SolidJS, we simply render children directly within the provider
-  return (
-    <DialogTriggerContext.Provider value={contextValue()}>
-      {props.children}
-    </DialogTriggerContext.Provider>
-  );
+  return <DialogTriggerContext value={contextValue()}>{props.children}</DialogTriggerContext>;
 }
 
 /**
@@ -169,13 +201,17 @@ export function Dialog(props: DialogProps): JSX.Element {
     ["role", "aria-label", "aria-labelledby", "aria-describedby"],
   );
 
-  let dialogRef!: HTMLElement;
+  let dialogRef: HTMLElement | undefined;
+  const setDialogRef = (element: HTMLElement) => {
+    dialogRef = element;
+  };
 
   // Get trigger context for aria-labelledby fallback
   const triggerContext = useContext(DialogTriggerContext);
 
-  // createDialog returns dialogProps AND titleProps (with the id for the Heading)
-  const { dialogProps, titleProps } = createDialog(
+  // createDialog returns the props that wire the dialog to its title and, for
+  // alertdialogs, its description content.
+  const { dialogProps, titleProps, contentProps } = createDialog(
     {
       get role() {
         return ariaProps.role;
@@ -198,6 +234,7 @@ export function Dialog(props: DialogProps): JSX.Element {
 
   // Get close function from OverlayTriggerState context or onClose prop
   const overlayState = useOverlayTriggerState();
+  const overlayFocus = useContext(OverlayContext);
 
   const close = () => {
     local.onClose?.();
@@ -208,15 +245,25 @@ export function Dialog(props: DialogProps): JSX.Element {
     triggerContext?.state.close();
   };
 
-  createEffect(() => {
-    if (!dialogRef || ariaProps["aria-label"] || ariaProps["aria-labelledby"]) return;
-    const labelledBy = dialogRef.getAttribute("aria-labelledby");
-    if (labelledBy && dialogRef.ownerDocument.getElementById(labelledBy)) return;
-
-    const trigger = triggerContext?.triggerRef();
-    if (trigger?.id) {
-      dialogRef.setAttribute("aria-labelledby", trigger.id);
+  // Label the dialog by its trigger when no title slot resolved. Mirrors RAC
+  // `Dialog`: the trigger id arrives by context, so it is a fallback only and a
+  // rendered title still wins. `createDialog`'s slot id clears itself when no
+  // element takes it, which is what makes the fallback reachable.
+  const ariaLabelledBy = () => {
+    const p = dialogProps();
+    if (p["aria-labelledby"]) {
+      return p["aria-labelledby"] as string;
+    }
+    if (p["aria-label"]) {
+      return undefined;
     }
+    return triggerContext?.triggerRef()?.id ?? triggerContext?.triggerId;
+  };
+
+  // RAC useDialog → useOverlayFocusContain: a nested Dialog still contains
+  // focus when the parent Popover is not itself the dialog.
+  createTrackedEffect(() => {
+    overlayFocus?.setContain(true);
   });
 
   const renderValues = createMemo<DialogRenderProps>(() => ({
@@ -240,22 +287,39 @@ export function Dialog(props: DialogProps): JSX.Element {
   );
 
   return (
-    <DialogContext.Provider value={{ close, titleId: titleId() }}>
+    <DialogContext value={{ close, titleId: titleId() }}>
       <section
+        {...triggerContext?.overlayProps}
         {...dialogProps()}
         {...domProps()}
-        ref={dialogRef}
+        aria-labelledby={ariaLabelledBy()}
+        ref={setDialogRef}
         class={renderProps.class()}
         style={renderProps.style()}
         slot={local.slot}
       >
-        <ButtonContext.Provider
-          value={{ slots: { [DEFAULT_SLOT]: {}, close: { onPress: () => close() } } }}
+        <Provider
+          values={
+            [
+              [
+                TextContext,
+                {
+                  slots: {
+                    [DEFAULT_SLOT]: {},
+                    get description() {
+                      return contentProps();
+                    },
+                  },
+                },
+              ],
+              [ButtonContext, { slots: { [DEFAULT_SLOT]: {}, close: { onPress: () => close() } } }],
+            ] as Array<[Context<unknown>, unknown]>
+          }
         >
           {renderProps.renderChildren()}
-        </ButtonContext.Provider>
+        </Provider>
       </section>
-    </DialogContext.Provider>
+    </DialogContext>
   );
 }
 
@@ -279,8 +343,11 @@ export function Heading(props: HeadingProps): JSX.Element {
   const level = () => props.level ?? 2;
   const id = () => dialogContext?.titleId;
   let headingRef: HTMLHeadingElement | undefined;
+  const setHeadingRef = (element: HTMLHeadingElement) => {
+    headingRef = element;
+  };
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     const el = headingRef;
     if (!el) return;
 
@@ -302,32 +369,32 @@ export function Heading(props: HeadingProps): JSX.Element {
   return (
     <Switch>
       <Match when={level() === 1}>
-        <h1 ref={headingRef} id={id()} class={props.class}>
+        <h1 ref={setHeadingRef} id={id()} class={props.class}>
           {props.children}
         </h1>
       </Match>
       <Match when={level() === 2}>
-        <h2 ref={headingRef} id={id()} class={props.class}>
+        <h2 ref={setHeadingRef} id={id()} class={props.class}>
           {props.children}
         </h2>
       </Match>
       <Match when={level() === 3}>
-        <h3 ref={headingRef} id={id()} class={props.class}>
+        <h3 ref={setHeadingRef} id={id()} class={props.class}>
           {props.children}
         </h3>
       </Match>
       <Match when={level() === 4}>
-        <h4 ref={headingRef} id={id()} class={props.class}>
+        <h4 ref={setHeadingRef} id={id()} class={props.class}>
           {props.children}
         </h4>
       </Match>
       <Match when={level() === 5}>
-        <h5 ref={headingRef} id={id()} class={props.class}>
+        <h5 ref={setHeadingRef} id={id()} class={props.class}>
           {props.children}
         </h5>
       </Match>
       <Match when={level() === 6}>
-        <h6 ref={headingRef} id={id()} class={props.class}>
+        <h6 ref={setHeadingRef} id={id()} class={props.class}>
           {props.children}
         </h6>
       </Match>

package/src/Disclosure.tsx

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Disclosure.tsx
+
 /**
  * Disclosure and Accordion components for solidaria-components
  *
@@ -7,14 +21,8 @@
  * Port of react-aria-components Disclosure.
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  createSignal,
-  splitProps,
-  useContext,
-} from "solid-js";
+import { createContext, createMemo, createSignal, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createDisclosureState,
   createDisclosureGroupState,
@@ -29,6 +37,7 @@ import {
   createFocusRing,
   mergeProps,
 } from "@proyecto-viviana/solidaria";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -36,6 +45,7 @@ import {
   useRenderProps,
   filterDOMProps,
   dataAttr,
+  coerceDomRecord,
 } from "./utils";
 
 type RefLike<T> = T | ((el: T) => void) | { current?: T | null } | undefined;
@@ -223,8 +233,8 @@ export function DisclosureGroup(props: DisclosureGroupProps): JSX.Element {
   const { ref: _ref, ...cleanGroupProps } = groupProps as Record<string, unknown>;
 
   return (
-    <DisclosureGroupStateContext.Provider value={state}>
-      <DisclosureGroupContext.Provider value={contextValue}>
+    <DisclosureGroupStateContext value={state}>
+      <DisclosureGroupContext value={contextValue}>
         <div
           ref={(el) => assignRef(local.ref, el)}
           {...domProps()}
@@ -235,8 +245,8 @@ export function DisclosureGroup(props: DisclosureGroupProps): JSX.Element {
         >
           {props.children}
         </div>
-      </DisclosureGroupContext.Provider>
-    </DisclosureGroupStateContext.Provider>
+      </DisclosureGroupContext>
+    </DisclosureGroupStateContext>
   );
 }
 
@@ -343,9 +353,9 @@ export function Disclosure(props: DisclosureProps): JSX.Element {
   };
 
   return (
-    <DisclosureStateContext.Provider value={state}>
-      <DisclosureContext.Provider value={contextValue}>
-        <DisclosurePanelRefContext.Provider value={setPanelRef}>
+    <DisclosureStateContext value={state}>
+      <DisclosureContext value={contextValue}>
+        <DisclosurePanelRefContext value={setPanelRef}>
           <div
             ref={(el) => assignRef(local.ref, el)}
             {...mergeProps(
@@ -360,9 +370,9 @@ export function Disclosure(props: DisclosureProps): JSX.Element {
           >
             {props.children}
           </div>
-        </DisclosurePanelRefContext.Provider>
-      </DisclosureContext.Provider>
-    </DisclosureStateContext.Provider>
+        </DisclosurePanelRefContext>
+      </DisclosureContext>
+    </DisclosureStateContext>
   );
 }
 
@@ -479,7 +489,7 @@ export function DisclosurePanel(props: DisclosurePanelProps): JSX.Element {
         domProps() as Record<string, unknown>,
         focusWithinProps as Record<string, unknown>,
       )}
-      {...getPanelProps()}
+      {...coerceDomRecord(getPanelProps() as Record<string, unknown>)}
       ref={(el) => {
         panelRefSetter?.(el);
         assignRef(local.ref, el);

package/src/DragAndDrop.tsx

@@ -1,10 +1,26 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/DragAndDrop.tsx
+
 /**
  * Drag and drop composition helpers for solidaria-components.
  *
- * Compatibility target: react-aria-components DragAndDrop exports.
+ * Based on packages/react-aria-components/src/DragAndDrop.tsx.
  */
 
-import { type JSX, type Accessor, createContext, createMemo, useContext } from "solid-js";
+import { createContext, createMemo, useContext } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type {
   DragTypes,
   DropOperation,
@@ -73,7 +89,7 @@ function DefaultDropIndicator(props: DropIndicatorProps): JSX.Element {
   return (
     <div
       role="option"
-      aria-disabled={true}
+      aria-disabled="true"
       class={renderProps.class()}
       style={renderProps.style()}
       data-drop-target={dataAttr(isDropTarget())}
@@ -98,10 +114,12 @@ export function useRenderDropIndicator(
     | {
         target?: DropTarget | null;
         isDropTarget?: ((target: DropTarget) => boolean) | boolean;
+        isDropTargetFor?: (target: DropTarget | null) => boolean;
       },
   maybeDropState?: {
     target?: DropTarget | null;
     isDropTarget?: ((target: DropTarget) => boolean) | boolean;
+    isDropTargetFor?: (target: DropTarget | null) => boolean;
   },
 ): ((target: ItemDropTarget) => JSX.Element | undefined) | undefined {
   const looksLikeDropState = (
@@ -109,6 +127,7 @@ export function useRenderDropIndicator(
   ): value is {
     target?: DropTarget | null;
     isDropTarget?: ((target: DropTarget) => boolean) | boolean;
+    isDropTargetFor?: (target: DropTarget | null) => boolean;
   } => {
     return Boolean(
       value &&
@@ -135,12 +154,20 @@ export function useRenderDropIndicator(
 
   return (target: ItemDropTarget) => {
     const stateIsDropTarget = dropState?.isDropTarget;
-    const isTarget =
-      typeof stateIsDropTarget === "function"
-        ? stateIsDropTarget(target)
-        : stateIsDropTarget === true
-          ? targetsEqual(dropState?.target, target)
+    // RAC `useDroppableCollectionState.ts:207` `isDropTarget(target)` is a
+    // per-target predicate. The port exposes `isDropTarget` as a collection-
+    // level boolean (`createDroppableCollectionState.ts:458`) that keyboard
+    // `setTarget` (`createDroppableCollection.ts` `onDropEnter`, RAC `:561`)
+    // never flips. Match `state.target` so the active indicator still mounts
+    // — otherwise Enter pickup leaves DOM focus on the collection
+    // (`listbox:Permissions`) instead of `option:Insert between Read and Write`.
+    const isTargetFromFn =
+      typeof dropState?.isDropTargetFor === "function"
+        ? dropState.isDropTargetFor(target)
+        : typeof stateIsDropTarget === "function"
+          ? Boolean(stateIsDropTarget(target))
           : false;
+    const isTarget = isTargetFromFn || targetsEqual(dropState?.target, target);
     const isVirtualDragging = dragAndDropHooks?.isVirtualDragging?.() ?? false;
     if (!isTarget && !isVirtualDragging) return undefined;
     return dragAndDropHooks?.renderDropIndicator ? (
@@ -328,6 +355,14 @@ export function mergePersistedKeysIntoVirtualRange(
   };
 }
 
+/** Indexes that must stay mounted off-screen without expanding the in-flow window. */
+export function indexesOutsideRange(
+  range: { start: number; end: number },
+  indexes: number[],
+): number[] {
+  return indexes.filter((index) => index < range.start || index >= range.end);
+}
+
 export type DropTargetDelegate = {
   getDropTargetFromPoint: (
     x: number,

package/src/DragPreview.tsx

@@ -1,4 +1,23 @@
-import { onCleanup, type JSX } from "solid-js";
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/dnd/DragPreview.tsx
+
+/**
+ * Based on packages/react-aria/src/dnd/DragPreview.tsx.
+ */
+
+import { onCleanup } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { DragItem, DragPreviewRenderer } from "@proyecto-viviana/solid-stately";
 
 export interface DragPreviewProps {

package/src/DropZone.tsx

@@ -1,19 +1,26 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/DropZone.tsx
+
 /**
  * DropZone primitive for solidaria-components.
  *
  * A drop target area for drag and drop operations.
- * Parity target: react-aria-components/src/DropZone.tsx
+ * Based on packages/react-aria-components/src/DropZone.tsx.
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  createSignal,
-  mergeProps,
-  splitProps,
-  useContext,
-} from "solid-js";
+import { createContext, createMemo, createSignal, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createDrop,
   createFocusRing,
@@ -21,6 +28,8 @@ import {
   readFromDataTransfer,
   type HoverEvents,
   type AriaDropOptions,
+  createStringFormatter,
+  mergeProps,
 } from "@proyecto-viviana/solidaria";
 import {
   type ClassNameOrFunction,
@@ -29,8 +38,11 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  dataAttr,
 } from "./utils";
 import { VisuallyHidden } from "./VisuallyHidden";
+import { racIntlStrings } from "./intl";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface DropZoneRenderProps {
   isHovered: boolean;
@@ -52,7 +64,6 @@ export interface DropZoneProps
 }
 
 export const DropZoneContext = createContext<DropZoneProps | null>(null);
-const DEFAULT_DROPZONE_LABEL = "Drop files";
 const FOCUSABLE_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
@@ -72,7 +83,7 @@ function isFocusableElement(target: Element): boolean {
  */
 export function DropZone(props: DropZoneProps): JSX.Element {
   const contextProps = useContext(DropZoneContext);
-  const mergedProps = mergeProps(contextProps ?? {}, props);
+  const mergedProps = mergeProps<DropZoneProps>(contextProps ?? {}, props);
   const [local, dropProps, hoverEventProps, domProps] = splitProps(
     mergedProps,
     ["children", "class", "style", "slot", "aria-label", "aria-labelledby"],
@@ -89,6 +100,7 @@ export function DropZone(props: DropZoneProps): JSX.Element {
     ["onHoverStart", "onHoverEnd", "onHoverChange"],
   );
 
+  const stringFormatter = createStringFormatter(racIntlStrings, "react-aria-components");
   const [dropZoneRef, setDropZoneRef] = createSignal<HTMLDivElement | null>(null);
   const [dropButtonRef, setDropButtonRef] = createSignal<HTMLButtonElement | null>(null);
 
@@ -200,7 +212,9 @@ export function DropZone(props: DropZoneProps): JSX.Element {
   };
 
   const dropButtonAriaLabel = createMemo(
-    () => local["aria-label"] ?? (!local["aria-labelledby"] ? DEFAULT_DROPZONE_LABEL : undefined),
+    () =>
+      local["aria-label"] ??
+      (!local["aria-labelledby"] ? stringFormatter().format("dropzoneLabel") : undefined),
   );
 
   return (
@@ -213,11 +227,11 @@ export function DropZone(props: DropZoneProps): JSX.Element {
       class={renderProps.class()}
       style={renderProps.style()}
       slot={local.slot}
-      data-hovered={isHovered() || undefined}
-      data-focused={isFocused() || undefined}
-      data-focus-visible={isFocusVisible() || undefined}
-      data-drop-target={dropAria.isDropTarget || undefined}
-      data-disabled={dropProps.isDisabled || undefined}
+      data-hovered={dataAttr(isHovered())}
+      data-focused={dataAttr(isFocused())}
+      data-focus-visible={dataAttr(isFocusVisible())}
+      data-drop-target={dataAttr(dropAria.isDropTarget)}
+      data-disabled={dataAttr(dropProps.isDisabled)}
     >
       <VisuallyHidden>
         <button