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

package/src/Tabs.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/Tabs.tsx
+
 /**
  * Tabs component for solidaria-components
  *
@@ -6,18 +20,19 @@
  */
 
 import {
-  type Accessor,
-  type JSX,
   createContext,
   createEffect,
   createMemo,
   createSignal,
-  splitProps,
   useContext,
   For,
   Show,
   onCleanup,
+  sharedConfig,
+  createTrackedEffect,
 } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createTabList,
   createTab,
@@ -42,6 +57,9 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
+  dataAttr,
+  ariaTrueFalse,
+  attrTrue,
 } from "./utils";
 import {
   SelectionIndicator,
@@ -49,6 +67,7 @@ import {
   type SelectionIndicatorContextValue,
 } from "./SelectionIndicator";
 import { SharedElementTransition } from "./SharedElementTransition";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export {
   SelectionIndicator,
@@ -249,8 +268,12 @@ export function Tabs<T>(props: TabsProps<T>): JSX.Element {
     ],
   );
 
-  const [tabListItems, setTabListItems] = createSignal<T[] | undefined>(undefined);
-  const [registeredTabs, setRegisteredTabs] = createSignal<RegisteredTab[]>([]);
+  const [tabListItems, setTabListItems] = createSignal<T[] | undefined>(undefined, {
+    ownedWrite: true,
+  });
+  const [registeredTabs, setRegisteredTabs] = createSignal<RegisteredTab[]>([], {
+    ownedWrite: true,
+  });
   const effectiveItems = createMemo<T[]>(() => {
     if (stateProps.items) return stateProps.items;
     if (tabListItems()) return tabListItems() ?? [];
@@ -346,20 +369,20 @@ export function Tabs<T>(props: TabsProps<T>): JSX.Element {
   };
 
   return (
-    <TabsContext.Provider value={contextValue as TabsContextValue<unknown>}>
-      <TabsStateContext.Provider value={state}>
+    <TabsContext value={contextValue as TabsContextValue<unknown>}>
+      <TabsStateContext value={state}>
         <div
           {...domProps()}
           ref={(element) => assignRef(local.ref, element)}
           class={renderProps.class()}
           style={renderProps.style()}
           data-orientation={state.orientation()}
-          data-disabled={state.isDisabled() || undefined}
+          data-disabled={dataAttr(state.isDisabled())}
         >
           {props.children as JSX.Element}
         </div>
-      </TabsStateContext.Provider>
-    </TabsContext.Provider>
+      </TabsStateContext>
+    </TabsContext>
   );
 }
 
@@ -375,65 +398,26 @@ export function TabList<T>(props: TabListProps<T>): JSX.Element {
 
   const context = useContext(TabsContext);
 
-  return (
-    <Show when={context} fallback={<div class="solidaria-TabList" role="tablist" />}>
-      {(ctx) => (
-        <TabListInner
-          context={ctx()}
-          local={local}
-          items={collectionProps.items}
-          ariaProps={ariaProps}
-          children={props.children}
-        />
-      )}
-    </Show>
-  );
-}
-
-/** Inner TabList component that has access to context */
-function TabListInner<T>(props: {
-  context: TabsContextValue<unknown>;
-  local: {
-    class?: ClassNameOrFunction<TabListRenderProps>;
-    style?: StyleOrFunction<TabListRenderProps>;
-    slot?: string;
-  };
-  ariaProps: Omit<TabListProps<T>, "children" | "class" | "style" | "slot" | "items">;
-  items?: T[];
-  children?: JSX.Element | ((item: T) => JSX.Element);
-}): JSX.Element {
-  const state = props.context.state as TabListState<T>;
-  const items = props.context.items as Accessor<T[]>;
-  const renderItem = createMemo(() => {
-    if (typeof props.children !== "function") {
-      return undefined;
-    }
-
-    const child = props.children as (...args: unknown[]) => JSX.Element;
-    if (child.length === 0 && props.items === undefined) {
-      return undefined;
-    }
-
-    return props.children as (item: T) => JSX.Element;
-  });
-  const renderedChildren = createMemo(() => {
-    if (renderItem() || typeof props.children !== "function") {
-      return props.children as JSX.Element;
-    }
+  if (!context) {
+    return <div class="solidaria-TabList" role="tablist" />;
+  }
 
-    return (props.children as () => JSX.Element)();
-  });
+  const state = context.state as TabListState<T>;
+  const items = context.items as Accessor<T[]>;
 
-  createEffect(() => {
-    props.context.setTabListItems(props.items as unknown[] | undefined);
-  });
+  createEffect(
+    () => collectionProps.items as unknown[] | undefined,
+    (items) => {
+      context.setTabListItems(items);
+    },
+  );
 
   onCleanup(() => {
-    props.context.setTabListItems(undefined);
+    context.setTabListItems(undefined);
   });
 
   // Create tab list aria props
-  const { tabListProps } = createTabList<T>(props.ariaProps as AriaTabListProps, state);
+  const { tabListProps } = createTabList<T>(ariaProps as AriaTabListProps, state);
 
   const renderValues = createMemo<TabListRenderProps>(() => ({
     orientation: state.orientation(),
@@ -442,8 +426,8 @@ function TabListInner<T>(props: {
 
   const renderProps = useRenderProps(
     {
-      class: props.local.class,
-      style: props.local.style,
+      class: local.class,
+      style: local.style,
       defaultClassName: "solidaria-TabList",
     },
     renderValues,
@@ -461,6 +445,24 @@ function TabListInner<T>(props: {
     tabListProps.onFocusOut(e);
   };
 
+  const renderChildren = () => {
+    const children = props.children;
+    const isItemRenderer =
+      typeof children === "function" && (children as (...args: unknown[]) => unknown).length > 0;
+
+    if (isItemRenderer) {
+      return (
+        <SharedElementTransition>
+          <For each={(collectionProps.items ?? items()) as T[]}>
+            {(item) => (children as (item: T) => JSX.Element)(item)}
+          </For>
+        </SharedElementTransition>
+      );
+    }
+
+    return children as JSX.Element;
+  };
+
   return (
     <div
       role={tabListProps.role}
@@ -474,15 +476,9 @@ function TabListInner<T>(props: {
       onFocusIn={handleFocus}
       onFocusOut={handleBlur}
       data-orientation={state.orientation()}
-      data-disabled={state.isDisabled() || undefined}
+      data-disabled={dataAttr(state.isDisabled())}
     >
-      {renderItem() ? (
-        <SharedElementTransition>
-          <For each={(props.items ?? items()) as T[]}>{(item) => renderItem()?.(item)}</For>
-        </SharedElementTransition>
-      ) : (
-        renderedChildren()
-      )}
+      {renderChildren()}
     </div>
   );
 }
@@ -496,68 +492,47 @@ export function Tab(props: TabProps): JSX.Element {
   const context = useContext(TabsStateContext);
   const tabsContext = useContext(TabsContext);
 
-  return (
-    <Show when={context} fallback={<div class="solidaria-Tab" role="tab" />}>
-      {(state) => (
-        <TabInner
-          state={state()}
-          tabsContext={tabsContext}
-          local={local}
-          ariaProps={ariaProps}
-          children={props.children}
-        />
-      )}
-    </Show>
-  );
-}
+  if (!context) {
+    return <div class="solidaria-Tab" role="tab" />;
+  }
 
-/** Inner Tab component that has access to context */
-function TabInner(props: {
-  state: TabListState<unknown>;
-  tabsContext: TabsContextValue<unknown> | null;
-  local: {
-    class?: ClassNameOrFunction<TabRenderProps>;
-    style?: StyleOrFunction<TabRenderProps>;
-    slot?: string;
-    id: Key;
-  };
-  ariaProps: Omit<TabProps, "children" | "class" | "style" | "slot" | "id">;
-  children?: RenderChildren<TabRenderProps>;
-}): JSX.Element {
-  let tabRef: HTMLDivElement | undefined;
+  const [tabRef, setTabRef] = createSignal<HTMLDivElement | null>(null);
   const textValue = () => {
-    if (props.ariaProps["aria-label"]) return props.ariaProps["aria-label"];
+    if (ariaProps["aria-label"]) return ariaProps["aria-label"];
     return typeof props.children === "string" ? props.children : undefined;
   };
 
-  createEffect(() => {
-    props.tabsContext?.registerTab({
-      id: props.local.id,
+  createEffect(
+    () => ({
+      id: local.id,
       textValue: textValue(),
-      isDisabled: props.ariaProps.isDisabled,
-    });
-  });
+      isDisabled: ariaProps.isDisabled,
+    }),
+    (tab) => {
+      tabsContext?.registerTab(tab);
+    },
+  );
 
   onCleanup(() => {
-    props.tabsContext?.unregisterTab(props.local.id);
+    tabsContext?.unregisterTab(local.id);
   });
 
   // Create tab aria props
   const tabAria = createTab<unknown>(
     {
-      key: props.local.id,
+      key: local.id,
       get isDisabled() {
-        return props.ariaProps.isDisabled;
+        return ariaProps.isDisabled;
       },
       get "aria-label"() {
-        return props.ariaProps["aria-label"];
+        return ariaProps["aria-label"];
       },
       get "aria-labelledby"() {
-        return props.ariaProps["aria-labelledby"];
+        return ariaProps["aria-labelledby"];
       },
     },
-    props.state,
-    () => tabRef ?? null,
+    context,
+    tabRef,
   );
 
   const { isHovered, hoverProps } = createHover({
@@ -580,8 +555,8 @@ function TabInner(props: {
       get children() {
         return props.children;
       },
-      class: props.local.class,
-      style: props.local.style,
+      class: local.class,
+      style: local.style,
       defaultClassName: "solidaria-Tab",
     },
     renderValues,
@@ -592,37 +567,37 @@ function TabInner(props: {
   }));
 
   return (
-    <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
-      <div
-        ref={tabRef}
-        id={tabAria.tabProps.id}
-        role={tabAria.tabProps.role}
-        aria-selected={tabAria.isSelected()}
-        aria-disabled={tabAria.isDisabled() || undefined}
-        aria-controls={tabAria.isSelected() ? tabAria.tabProps["aria-controls"] : undefined}
-        aria-label={tabAria.tabProps["aria-label"]}
-        aria-labelledby={tabAria.tabProps["aria-labelledby"]}
-        tabIndex={tabAria.tabProps.tabIndex}
-        class={renderProps.class()}
-        style={renderProps.style()}
-        onKeyDown={tabAria.tabProps.onKeyDown}
-        onMouseDown={tabAria.tabProps.onMouseDown}
-        onPointerDown={tabAria.tabProps.onPointerDown}
-        onClick={tabAria.tabProps.onClick}
-        onFocus={tabAria.tabProps.onFocus}
-        onFocusIn={tabAria.tabProps.onFocusIn}
-        onBlur={tabAria.tabProps.onBlur}
-        {...hoverProps}
-        data-selected={tabAria.isSelected() || undefined}
-        data-focused={tabAria.isFocused() || undefined}
-        data-focus-visible={tabAria.isFocusVisible() || undefined}
-        data-pressed={tabAria.isPressed() || undefined}
-        data-hovered={isHovered() || undefined}
-        data-disabled={tabAria.isDisabled() || undefined}
-      >
+    <div
+      ref={setTabRef}
+      id={tabAria.tabProps.id}
+      role={tabAria.tabProps.role}
+      aria-selected={ariaTrueFalse(tabAria.isSelected())}
+      aria-disabled={attrTrue(tabAria.isDisabled())}
+      aria-controls={tabAria.isSelected() ? tabAria.tabProps["aria-controls"] : undefined}
+      aria-label={tabAria.tabProps["aria-label"]}
+      aria-labelledby={tabAria.tabProps["aria-labelledby"]}
+      tabindex={tabAria.tabProps.tabIndex}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      onKeyDown={tabAria.tabProps.onKeyDown}
+      onMouseDown={tabAria.tabProps.onMouseDown}
+      onPointerDown={tabAria.tabProps.onPointerDown}
+      onClick={tabAria.tabProps.onClick}
+      onFocus={tabAria.tabProps.onFocus}
+      onFocusIn={tabAria.tabProps.onFocusIn}
+      onBlur={tabAria.tabProps.onBlur}
+      {...hoverProps}
+      data-selected={dataAttr(tabAria.isSelected())}
+      data-focused={dataAttr(tabAria.isFocused())}
+      data-focus-visible={dataAttr(tabAria.isFocusVisible())}
+      data-pressed={dataAttr(tabAria.isPressed())}
+      data-hovered={dataAttr(isHovered())}
+      data-disabled={dataAttr(tabAria.isDisabled())}
+    >
+      <SelectionIndicatorContext value={selectionIndicatorContext()}>
         {renderProps.renderChildrenStable()}
-      </div>
-    </SelectionIndicatorContext.Provider>
+      </SelectionIndicatorContext>
+    </div>
   );
 }
 
@@ -639,7 +614,7 @@ export function TabPanels(props: TabPanelsProps): JSX.Element {
   let previousSelectedKey: Key | null | undefined = undefined;
   const [panelSize, setPanelSize] = createSignal<{ width?: string; height?: string }>({});
 
-  createEffect(() => {
+  createTrackedEffect(() => {
     const selectedKey = state?.selectedKey() ?? null;
     if (!ref) {
       previousSelectedKey = selectedKey;
@@ -694,12 +669,13 @@ export function TabPanels(props: TabPanelsProps): JSX.Element {
  */
 export function TabPanel(props: TabPanelProps): JSX.Element {
   const [local, ariaProps] = splitProps(props, ["class", "style", "slot", "shouldForceMount"]);
+  const [panelRef, setPanelRef] = createSignal<HTMLDivElement>();
 
   // Get state from context (may be null for SSR scenarios)
   const state = useContext(TabsStateContext);
 
   // Create tab panel aria props
-  const { tabPanelProps, isSelected } = createTabPanel<unknown>(ariaProps, state);
+  const { tabPanelProps, isSelected } = createTabPanel<unknown>(ariaProps, state, panelRef);
 
   // Create focus ring for the panel
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
@@ -744,23 +720,24 @@ export function TabPanel(props: TabPanelProps): JSX.Element {
   return (
     <Show when={shouldRender()}>
       <div
+        ref={setPanelRef}
         id={tabPanelProps.id}
         role={tabPanelProps.role}
         aria-labelledby={tabPanelProps["aria-labelledby"]}
         aria-label={tabPanelProps["aria-label"]}
         aria-describedby={tabPanelProps["aria-describedby"]}
-        tabIndex={tabPanelProps.tabIndex}
+        tabindex={tabPanelProps.tabIndex}
         class={renderProps.class()}
         style={renderProps.style()}
         onFocus={focusProps.onFocus}
         onBlur={focusProps.onBlur}
-        data-selected={isSelected() || undefined}
-        data-focused={isFocused() || undefined}
-        data-focus-visible={isFocusVisible() || undefined}
+        data-selected={dataAttr(isSelected())}
+        data-focused={dataAttr(isFocused())}
+        data-focus-visible={dataAttr(isFocusVisible())}
         inert={isInert() ? true : undefined}
-        data-inert={isInert() || undefined}
-        data-entering={isEntering() || undefined}
-        data-exiting={isExiting() || undefined}
+        data-inert={dataAttr(isInert())}
+        data-entering={dataAttr(isEntering())}
+        data-exiting={dataAttr(isExiting())}
         hidden={
           ariaProps.id !== undefined && !isSelected() && !local.shouldForceMount ? true : undefined
         }

package/src/TagGroup.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/TagGroup.tsx
+
 /**
  * TagGroup component for solidaria-components
  *
@@ -8,16 +22,8 @@
  * with support for keyboard navigation, selection, and removal.
  */
 
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  createSignal,
-  splitProps,
-  useContext,
-  For,
-  Show,
-} from "solid-js";
+import { createContext, createMemo, createSignal, useContext, For, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createTagGroup,
   createTag,
@@ -43,6 +49,7 @@ import {
   mergeRefs,
 } from "./utils";
 import { SharedElementTransition } from "./SharedElementTransition";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   SelectionIndicatorContext,
   type SelectionIndicatorContextValue,
@@ -59,7 +66,10 @@ export interface TagGroupProps
   extends
     Omit<AriaTagGroupProps, "id">,
     SlotProps,
-    Omit<JSX.HTMLAttributes<HTMLDivElement>, "class" | "style" | "children"> {
+    Omit<
+      JSX.HTMLAttributes<HTMLDivElement>,
+      "class" | "style" | "children" | "aria-label" | "aria-labelledby" | "aria-describedby"
+    > {
   /** The children of the component. */
   children?: JSX.Element;
   /** The CSS className for the element. */
@@ -124,6 +134,8 @@ export interface TagRenderProps {
   isDisabled: boolean;
   /** Whether the tag is focused. */
   isFocused: boolean;
+  /** Whether the tag is keyboard focused. */
+  isFocusVisible: boolean;
   /** Whether the tag is pressed. */
   isPressed: boolean;
   /** Whether the tag allows removal. */
@@ -268,7 +280,11 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
   // ListBox, and useTagGroup passing `direction` to the ListKeyboardDelegate).
   const locale = useLocale();
 
-  // Create tag group accessibility props
+  // Callback-valued props must not go through createMemo — a memo that
+  // stores a function is easy to unwrap/call, and the live getter
+  // `onRemove={handler()}` must re-read on each access.
+  const onRemove = () => local.onRemove;
+
   const tagGroupAria = createTagGroup(
     {
       get "aria-label"() {
@@ -284,7 +300,7 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
         return local.isDisabled;
       },
       get onRemove() {
-        return local.onRemove;
+        return onRemove();
       },
       get direction() {
         return locale().direction;
@@ -313,7 +329,7 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
   const contextValue: TagGroupContextValue = {
     state,
     get onRemove() {
-      return local.onRemove;
+      return onRemove();
     },
     get isDisabled() {
       return local.isDisabled;
@@ -321,8 +337,8 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
   };
 
   return (
-    <TagGroupContext.Provider value={contextValue}>
-      <TagListStateContext.Provider value={state}>
+    <TagGroupContext value={contextValue}>
+      <TagListStateContext value={state}>
         <div
           ref={setGridRef}
           {...domProps}
@@ -353,8 +369,8 @@ export function TagList<T extends { id?: Key; key?: Key }>(props: TagListProps<T
             </Show>
           </SharedElementTransition>
         </div>
-      </TagListStateContext.Provider>
-    </TagGroupContext.Provider>
+      </TagListStateContext>
+    </TagGroupContext>
   );
 }
 
@@ -392,6 +408,9 @@ export function Tag(props: TagProps): JSX.Element {
       get textValue() {
         return local.textValue;
       },
+      get onAction() {
+        return local.onAction ? () => local.onAction?.(local.id) : undefined;
+      },
     },
     state!,
     tagRef,
@@ -403,21 +422,21 @@ export function Tag(props: TagProps): JSX.Element {
     return {
       ...raw,
       onPress: () => {
-        if (!tagAria.isDisabled && groupContext?.onRemove) {
-          groupContext.onRemove(new Set([local.id]));
-          return;
-        }
         rawHandler?.();
       },
     };
   });
 
+  const allowsRemoving = createMemo(
+    () => Boolean(tagAria.allowsRemoving) || Boolean(groupContext?.onRemove),
+  );
   const renderValues = createMemo<TagRenderProps>(() => ({
     isSelected: tagAria.isSelected,
     isDisabled: tagAria.isDisabled,
     isFocused: tagAria.isFocused,
+    isFocusVisible: tagAria.isFocusVisible,
     isPressed: tagAria.isPressed,
-    allowsRemoving: tagAria.allowsRemoving,
+    allowsRemoving: allowsRemoving(),
     selectionMode: state?.selectionMode() ?? "none",
     removeButtonProps: normalizedRemoveButtonProps(),
   }));
@@ -441,14 +460,14 @@ export function Tag(props: TagProps): JSX.Element {
   const domProps = createMemo(() => filterDOMProps(rest, { global: true }));
 
   return (
-    <SelectionIndicatorContext.Provider value={selectionIndicatorContext()}>
-      <TagContext.Provider
+    <SelectionIndicatorContext value={selectionIndicatorContext()}>
+      <TagContext
         value={{
           get removeButtonProps() {
             return normalizedRemoveButtonProps();
           },
           get allowsRemoving() {
-            return tagAria.allowsRemoving;
+            return allowsRemoving();
           },
         }}
       >
@@ -458,28 +477,19 @@ export function Tag(props: TagProps): JSX.Element {
           {...tagAria.rowProps}
           class={renderProps.class()}
           style={renderProps.style()}
-          onClick={(event) => {
-            const rowClick = tagAria.rowProps.onClick;
-            if (typeof rowClick === "function") {
-              (rowClick as JSX.EventHandler<HTMLDivElement, MouseEvent>)(event);
-            }
-
-            if (!tagAria.isDisabled && !(event.target as Element | null)?.closest("button")) {
-              local.onAction?.(local.id);
-            }
-          }}
           data-selected={dataAttr(tagAria.isSelected)}
           data-disabled={dataAttr(tagAria.isDisabled)}
           data-focused={dataAttr(tagAria.isFocused)}
+          data-focus-visible={dataAttr(tagAria.isFocusVisible)}
           data-pressed={dataAttr(tagAria.isPressed)}
-          data-allows-removing={dataAttr(tagAria.allowsRemoving)}
+          data-allows-removing={dataAttr(allowsRemoving())}
         >
           <div {...tagAria.gridCellProps} style={{ display: "contents" }}>
-            {renderProps.renderChildren()}
+            {renderProps.renderChildrenStable()}
           </div>
         </div>
-      </TagContext.Provider>
-    </SelectionIndicatorContext.Provider>
+      </TagContext>
+    </SelectionIndicatorContext>
   );
 }
 
@@ -505,10 +515,12 @@ export function TagRemoveButton(props: TagRemoveButtonProps): JSX.Element {
   const rawId = getRemoveButtonProps().id;
   const rawAriaLabel = getRemoveButtonProps()["aria-label"];
   const rawAriaLabelledBy = getRemoveButtonProps()["aria-labelledby"];
+  const rawTabIndex = getRemoveButtonProps().tabIndex;
   const buttonId: string | undefined = typeof rawId === "string" ? rawId : undefined;
   const ariaLabel: string = typeof rawAriaLabel === "string" ? rawAriaLabel : "Remove";
   const ariaLabelledBy: string | undefined =
     typeof rawAriaLabelledBy === "string" ? rawAriaLabelledBy : undefined;
+  const tabindex: number | undefined = typeof rawTabIndex === "number" ? rawTabIndex : undefined;
 
   const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {
     event.stopPropagation();
@@ -529,6 +541,7 @@ export function TagRemoveButton(props: TagRemoveButtonProps): JSX.Element {
       id={buttonId}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
+      tabindex={tabindex}
       disabled={getIsDisabled()}
       data-allows-removing={dataAttr(tagContext?.allowsRemoving ?? false)}
       onPointerDown={stopRowPress}