fix(toolbar): prevent keyboard focus on hidden toolbar elements (#2359)

Fixes #663

Author: metonym

src/DataTable/ToolbarBatchActions.svelte

@@ -69,6 +69,7 @@
 
     prevActive = active;
   }
+  $: inertProps = showActions ? {} : { inert: true };
 
   let overflowVisible = false;
 
@@ -99,6 +100,7 @@
   <div
     class:bx--batch-actions={true}
     class:bx--batch-actions--active={showActions}
+    {...inertProps}
     {...$$restProps}
   >
     <div class:bx--batch-summary={true}>

src/DataTable/ToolbarContent.svelte

@@ -1,3 +1,20 @@
-<div class:bx--toolbar-content={true}>
+<script>
+  import { getContext } from "svelte";
+
+  const ctx = getContext("DataTable") ?? {};
+
+  let batchSelectedIds = [];
+
+  if (ctx?.batchSelectedIds) {
+    ctx.batchSelectedIds.subscribe((value) => {
+      batchSelectedIds = value;
+    });
+  }
+
+  $: hasBatchSelection = batchSelectedIds.length > 0;
+  $: inertProps = hasBatchSelection ? { inert: true } : {};
+</script>
+
+<div class:bx--toolbar-content={true} {...inertProps}>
   <slot />
 </div>

tests/DataTable/DataTableBatchSelectionToolbar.test.ts

@@ -165,4 +165,74 @@ describe("DataTableBatchSelectionToolbar", () => {
       screen.getByRole("checkbox", { name: "Select all rows" }),
     ).toHaveFocus();
   });
+
+  it("applies inert to batch actions when no rows are selected", () => {
+    const { container } = render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: [],
+      },
+    });
+
+    const batchActions = container.querySelector(".bx--batch-actions");
+    expect(batchActions).toHaveAttribute("inert");
+  });
+
+  it("removes inert from batch actions when rows are selected", () => {
+    const { container } = render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: ["a", "b"],
+      },
+    });
+
+    const batchActions = container.querySelector(".bx--batch-actions");
+    expect(batchActions).not.toHaveAttribute("inert");
+  });
+
+  it("applies inert to toolbar content when rows are selected", async () => {
+    const { container } = render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: ["a", "b"],
+      },
+    });
+
+    const toolbarContent = container.querySelector(".bx--toolbar-content");
+    expect(toolbarContent).toHaveAttribute("inert");
+  });
+
+  it("removes inert from toolbar content when no rows are selected", () => {
+    const { container } = render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: [],
+      },
+    });
+
+    const toolbarContent = container.querySelector(".bx--toolbar-content");
+    expect(toolbarContent).not.toHaveAttribute("inert");
+  });
+
+  it("toggles inert attributes when selection changes", async () => {
+    const { container, component } = render(DataTableBatchSelectionToolbar, {
+      props: {
+        selectedRowIds: [],
+      },
+    });
+
+    const batchActions = container.querySelector(".bx--batch-actions");
+    const toolbarContent = container.querySelector(".bx--toolbar-content");
+
+    expect(batchActions).toHaveAttribute("inert");
+    expect(toolbarContent).not.toHaveAttribute("inert");
+
+    component.$set({ selectedRowIds: ["a", "b"] });
+    await tick();
+
+    expect(batchActions).not.toHaveAttribute("inert");
+    expect(toolbarContent).toHaveAttribute("inert");
+
+    component.$set({ selectedRowIds: [] });
+    await tick();
+
+    expect(batchActions).toHaveAttribute("inert");
+    expect(toolbarContent).not.toHaveAttribute("inert");
+  });
 });