Test SpotlightTile more thoroughly

Catching two accessibility issues along the way: we were putting the wrong accessible labels on the 'expand' button, and even the off-screen pages of the spotlight tile were being exposed to accessibility technologies rather than hidden.

src/tile/SpotlightTile.test.tsx

@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { RemoteTrackPublication } from "livekit-client";
-import { test, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
+import { test, expect, vi } from "vitest";
+import { isInaccessible, render, screen } from "@testing-library/react";
 import { axe } from "vitest-axe";
+import userEvent from "@testing-library/user-event";
 
 import { SpotlightTile } from "./SpotlightTile";
-import { withRemoteMedia } from "../utils/test";
+import { withLocalMedia, withRemoteMedia } from "../utils/test";
 
 global.IntersectionObserver = class MockIntersectionObserver {
   public observe(): void {}
@@ -33,25 +33,50 @@ test("SpotlightTile is accessible", async () => {
       rawDisplayName: "Alice",
       getMxcAvatarUrl: () => "mxc://adfsg",
     },
-    {
-      getTrackPublication: () =>
-        ({}) as Partial<RemoteTrackPublication> as RemoteTrackPublication,
-    },
-    async (vm) => {
-      const { container } = render(
-        <SpotlightTile
-          vms={[vm]}
-          targetWidth={300}
-          targetHeight={200}
-          maximised={false}
-          expanded={false}
-          onToggleExpanded={() => {}}
-          showIndicators
-        />,
+    {},
+    async (vm1) => {
+      await withLocalMedia(
+        {
+          rawDisplayName: "Bob",
+          getMxcAvatarUrl: () => "mxc://dlskf",
+        },
+        async (vm2) => {
+          const user = userEvent.setup();
+          const toggleExpanded = vi.fn();
+          const { container } = render(
+            <SpotlightTile
+              vms={[vm1, vm2]}
+              targetWidth={300}
+              targetHeight={200}
+              maximised={false}
+              expanded={false}
+              onToggleExpanded={toggleExpanded}
+              showIndicators
+            />,
+          );
+
+          expect(await axe(container)).toHaveNoViolations();
+          // Alice should be in the spotlight, with her name and avatar on the
+          // first page
+          screen.getByText("Alice");
+          const aliceAvatar = screen.getByRole("img");
+          expect(screen.queryByRole("button", { name: "common.back" })).toBe(
+            null,
+          );
+          // Bob should be out of the spotlight, and therefore invisible
+          expect(isInaccessible(screen.getByText("Bob"))).toBe(true);
+          // Now navigate to Bob
+          await user.click(screen.getByRole("button", { name: "common.next" }));
+          screen.getByText("Bob");
+          expect(screen.getByRole("img")).not.toBe(aliceAvatar);
+          expect(isInaccessible(screen.getByText("Alice"))).toBe(true);
+          // Can toggle whether the tile is expanded
+          await user.click(
+            screen.getByRole("button", { name: "video_tile.expand" }),
+          );
+          expect(toggleExpanded).toHaveBeenCalled();
+        },
       );
-      expect(await axe(container)).toHaveNoViolations();
-      // Name should be visible
-      screen.getByText("Alice");
     },
   );
 });