fix: visualisation link a11y fixes (#705)

* Make polyline link between pages accessible via keyboard

* Add test

* Use SVG title instead of aria-label

* Add button role

* Let space key open edit link menu

* Move editLink into class method

designer/client/components/Visualisation/Lines.tsx

@@ -33,6 +33,12 @@ export class Lines extends React.Component<Props, State> {
     });
   };
 
+  handlePolylineKeyPress = (event: React.KeyboardEvent, edge: Edge) => {
+    if (event.key === "Enter" || event.key == " ") {
+      this.editLink(edge);
+    }
+  };
+
   render() {
     const { layout, persona } = this.props;
     const { data } = this.context;
@@ -57,10 +63,19 @@ export class Lines extends React.Component<Props, State> {
               <g key={pointsString}>
                 <polyline
                   onClick={() => this.editLink(edge)}
+                  onKeyPress={(event) =>
+                    this.handlePolylineKeyPress(event, edge)
+                  }
+                  tabIndex={0}
                   points={pointsString}
                   className={`${highlight ? "highlight" : ""}`}
                   data-testid={`${source}-${target}`.replace(/\//g, "")}
-                />
+                  role="button"
+                >
+                  <title>
+                    {`Edit link from ${source} to ${target}`.replace(/\//g, "")}
+                  </title>
+                </polyline>
                 {label && (
                   <text
                     textAnchor="middle"

designer/client/components/Visualisation/__tests__/Visualisation.jest.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Visualisation } from "../Visualisation";
-import { render, waitFor } from "@testing-library/react";
+import { render, waitFor, fireEvent } from "@testing-library/react";
 import { DataContext } from "../../../context";
 import { Router } from "react-router-dom";
 import { createMemoryHistory } from "history";
@@ -65,3 +65,58 @@ test("Graph is rendered with correct number of pages and updates ", async () =>
 
   await waitFor(() => expect(queryAllByText("my third page").length).toBe(2));
 });
+
+test("Links between pages are navigable via keyboard", async () => {
+  const data = {
+    pages: [
+      {
+        title: "link source",
+        path: "/link-source",
+        next: [{ path: "/link-target" }],
+      },
+      { title: "link target", path: "/link-target" },
+    ],
+    conditions: [],
+  };
+  const providerProps = {
+    data,
+    save: jest.fn(),
+  };
+
+  const { queryByTestId, queryAllByText, getByText } = customRender(
+    <Visualisation previewUrl={"http://localhost:3000"} id={"aa"} />,
+    {
+      providerProps,
+    }
+  );
+
+  // Check link exists and has the expected label
+  const link = await queryAllByText(
+    "Edit link from link-source to link-target"
+  )?.[0];
+  expect(link).toBeTruthy();
+
+  // Check that link works when selected with the enter key
+  expect(queryByTestId("flyout-0")).toBeNull();
+
+  fireEvent.keyPress(link, {
+    key: "Enter",
+    code: "Enter",
+    charCode: 13,
+  });
+
+  expect(queryByTestId("flyout-0")).toBeInTheDocument();
+
+  fireEvent.click(getByText("Close"));
+
+  // Check that link works when selected with the space key
+  expect(queryByTestId("flyout-0")).toBeNull();
+
+  fireEvent.keyPress(link, {
+    key: " ",
+    code: "Space",
+    charCode: 32,
+  });
+
+  expect(queryByTestId("flyout-0")).toBeInTheDocument();
+});