followup for #3636 (#3895)

* followup for #3636

Author: SteffenDE

lib/phoenix_component.ex

@@ -3154,9 +3154,9 @@ defmodule Phoenix.Component do
   def focus_wrap(assigns) do
     ~H"""
     <div id={@id} phx-hook="Phoenix.FocusWrap" {@rest}>
-      <span id={"#{@id}-start"} tabindex="0" aria-hidden="true"></span>
+      <div id={"#{@id}-start"} tabindex="0" aria-hidden="true"></div>
       {render_slot(@inner_block)}
-      <span id={"#{@id}-end"} tabindex="0" aria-hidden="true"></span>
+      <div id={"#{@id}-end"} tabindex="0" aria-hidden="true"></div>
     </div>
     """
   end

test/e2e/support/issues/issue_3636.ex

@@ -0,0 +1,30 @@
+defmodule Phoenix.LiveViewTest.E2E.Issue3636Live do
+  # https://github.com/phoenixframework/phoenix_live_view/issues/3636
+  use Phoenix.LiveView
+
+  @impl Phoenix.LiveView
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  @impl Phoenix.LiveView
+  def render(assigns) do
+    ~H"""
+    <style>
+      .space-x-8 > :not([hidden]) ~ :not([hidden]) {
+        margin-left: 2rem;
+      }
+    </style>
+
+    <div class="container mx-auto p-8">
+      <button>Outside 1</button>
+      <.focus_wrap id="focus-wrap" class="space-x-8">
+        <button id="first" class="border rounded py-2 px-4">One</button>
+        <button id="second" class="border rounded py-2 px-4">Two</button>
+        <button id="third" class="border rounded py-2 px-4">Three</button>
+      </.focus_wrap>
+      <button>Outside 2</button>
+    </div>
+    """
+  end
+end

test/e2e/test_helper.exs

@@ -184,6 +184,7 @@ defmodule Phoenix.LiveViewTest.E2E.Router do
       live "/3529", Issue3529Live
       live "/3612/a", Issue3612.ALive
       live "/3612/b", Issue3612.BLive
+      live "/3636", Issue3636Live
       live "/3651", Issue3651Live
       live "/3656", Issue3656Live
       live "/3658", Issue3658Live

test/e2e/tests/issues/3636.spec.js

@@ -0,0 +1,19 @@
+import { test, expect } from "../../test-fixtures";
+import { syncLV } from "../../utils";
+
+// https://github.com/phoenixframework/phoenix_live_view/issues/3636
+test("focus_wrap - focuses first element when entering focus from outside", async ({
+  page,
+  browserName,
+}) => {
+  // skip if webkit, since it doesn't have tab focus enabled by default
+  if (browserName === "webkit") {
+    test.skip();
+  }
+  await page.goto("/issues/3636");
+  await syncLV(page);
+  // put focus next to the third button
+  await page.mouse.click(250, 37.5);
+  await page.keyboard.press("Tab");
+  await expect(page.getByRole("button", { name: "One" })).toBeFocused();
+});

test/phoenix_component/components_test.exs

@@ -144,9 +144,9 @@ defmodule Phoenix.LiveView.ComponentsTest do
       assert t2h(template) ==
                ~X"""
                <div id="wrap" phx-hook="Phoenix.FocusWrap" class="foo">
-                 <span id="wrap-start" tabindex="0" aria-hidden="true"></span>
+                 <div id="wrap-start" tabindex="0" aria-hidden="true"></div>
                  <div>content</div>
-                 <span id="wrap-end" tabindex="0" aria-hidden="true"></span>
+                 <div id="wrap-end" tabindex="0" aria-hidden="true"></div>
                </div>
                """
     end