Use Aria labels for links in tests.

lynxkite-app/web/src/Code.tsx

@@ -3,7 +3,7 @@
 import Editor, { type Monaco } from "@monaco-editor/react";
 import type { editor } from "monaco-editor";
 import { useEffect, useRef } from "react";
-import { Link, useLocation } from "react-router";
+import { Link } from "react-router";
 import { WebsocketProvider } from "y-websocket";
 import * as Y from "yjs";
 // @ts-ignore
@@ -14,9 +14,10 @@ import Backspace from "~icons/tabler/backspace.jsx";
 import Close from "~icons/tabler/x.jsx";
 import favicon from "./assets/favicon.ico";
 import theme from "./code-theme.ts";
+import { usePath } from "./common.ts";
 
 export default function Code() {
-  const path = decodeURIComponent(useLocation().pathname).replace(/^\/code\//, "");
+  const path = usePath().replace(/^[/]code[/]/, "");
   const parentDir = path!.split("/").slice(0, -1).join("/");
   const yDocRef = useRef<any>();
   const wsProviderRef = useRef<any>();

lynxkite-app/web/src/Directory.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
 // The directory browser.
-import { Link, useLocation, useNavigate } from "react-router";
+import { Link, useNavigate } from "react-router";
 import useSWR from "swr";
 import type { DirectoryEntry } from "./apiTypes.ts";
+import { usePath } from "./common.ts";
 
 // @ts-ignore
 import File from "~icons/tabler/file";
@@ -58,7 +59,7 @@ function EntryCreator(props: {
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
 export default function () {
-  const path = decodeURIComponent(useLocation().pathname).replace(/^[/]$|^[/]dir$|^[/]dir[/]/, "");
+  const path = usePath().replace(/^[/]$|^[/]dir$|^[/]dir[/]/, "");
   const encodedPath = encodeURIComponent(path || "");
   const list = useSWR(`/api/dir/list?path=${encodedPath}`, fetcher, {
     dedupingInterval: 0,
@@ -160,7 +161,7 @@ export default function () {
 
             {path ? (
               <div className="breadcrumbs">
-                <Link to="/dir/">
+                <Link to="/dir/" aria-label="home">
                   <Home />
                 </Link>{" "}
                 <span className="current-folder">{path}</span>

lynxkite-app/web/src/common.ts

@@ -0,0 +1,7 @@
+import { useLocation } from "react-router";
+
+export function usePath() {
+  // Decode special characters. Drop trailing slash. (Some clients add it, e.g. Playwright.)
+  const path = decodeURIComponent(useLocation().pathname).replace(/[/]$/, "");
+  return path;
+}

lynxkite-app/web/src/workspace/Workspace.tsx

@@ -18,7 +18,7 @@ import {
 } from "@xyflow/react";
 import axios from "axios";
 import { type MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
-import { useLocation } from "react-router";
+import { Link } from "react-router";
 import useSWR, { type Fetcher } from "swr";
 import { WebsocketProvider } from "y-websocket";
 // @ts-ignore
@@ -31,6 +31,7 @@ import Restart from "~icons/tabler/rotate-clockwise.jsx";
 import Close from "~icons/tabler/x.jsx";
 import type { Workspace, WorkspaceNode } from "../apiTypes.ts";
 import favicon from "../assets/favicon.ico";
+import { usePath } from "../common.ts";
 // import NodeWithTableView from './NodeWithTableView';
 import EnvironmentSelector from "./EnvironmentSelector";
 import { LynxKiteState } from "./LynxKiteState";
@@ -55,7 +56,7 @@ function LynxKiteFlow() {
   const reactFlow = useReactFlow();
   const [nodes, setNodes] = useState([] as Node[]);
   const [edges, setEdges] = useState([] as Edge[]);
-  const path = decodeURIComponent(useLocation().pathname).replace(/^\/edit\//, "");
+  const path = usePath().replace(/^[/]edit[/]/, "");
   const shortPath = path!
     .split("/")
     .pop()!
@@ -335,9 +336,9 @@ function LynxKiteFlow() {
   return (
     <div className="workspace">
       <div className="top-bar bg-neutral">
-        <a className="logo" href="">
+        <Link className="logo" to="/">
           <img alt="" src={favicon} />
-        </a>
+        </Link>
         <div className="ws-name">{shortPath}</div>
         <title>{shortPath}</title>
         <EnvironmentSelector
@@ -357,9 +358,9 @@ function LynxKiteFlow() {
           <button className="btn btn-link" onClick={executeWorkspace}>
             <Restart />
           </button>
-          <a className="btn btn-link" href={`/dir/${parentDir}`}>
+          <Link className="btn btn-link" to={`/dir/${parentDir}`} aria-label="close">
             <Close />
-          </a>
+          </Link>
         </div>
       </div>
       <div style={{ height: "100%", width: "100vw" }} onDragOver={onDragOver} onDrop={onDrop}>

lynxkite-app/web/tests/lynxkite.ts

@@ -155,7 +155,7 @@ export class Workspace {
   }
 
   async close() {
-    await this.page.locator('a[href="/dir/"]').click();
+    await this.page.getByRole("link", { name: "close" }).click();
   }
 }
 
@@ -220,6 +220,6 @@ export class Splash {
   }
 
   async goHome() {
-    await this.page.locator('a[href="/dir/"]').click();
+    await this.page.getByRole("link", { name: "home" }).click();
   }
 }