fix: usability improvements (#442)

index.html

@@ -67,6 +67,7 @@ <h1 style="color:red;font-size:16px;">*** This is a testing sandbox - these comp
   <script>
     // --- MAP --- //
     const map = document.querySelector("my-map");
+    map.geojsonDataCopyright = `<a href="https://www.planning.data.gov.uk/dataset/title-boundary" target="_blank">Title boundary</a> subject to Crown copyright and database rights ${new Date().getFullYear()} OS (0)100026316`;
     map.clipGeojsonData = {
       "type": "Feature",
       "geometry": {

src/components/my-map/index.ts

@@ -309,22 +309,6 @@ export class MyMap extends LitElement {
     );
     const modify = configureModify(this.drawPointer, this.drawColor);
 
-    // add custom scale line and north arrow controls to the map
-    let scale: ScaleLine;
-    if (this.showNorthArrow) {
-      map.addControl(northArrowControl());
-    }
-
-    if (this.showScale) {
-      scale = scaleControl(this.useScaleBarStyle);
-      map.addControl(scale);
-    }
-
-    if (this.showPrint) {
-      const printControl = new PrintControl({ map });
-      map.addControl(printControl);
-    }
-
     // add a custom 'reset' control to the map
     const handleReset = () => {
       if (this.showFeaturesAtPoint) {
@@ -357,13 +341,39 @@ export class MyMap extends LitElement {
       map.addControl(resetControl(handleReset, this.resetControlImage));
     }
 
+    // add custom scale line and north arrow controls to the map
+    let scale: ScaleLine;
+    if (this.showNorthArrow) {
+      map.addControl(northArrowControl());
+    }
+
+    if (this.showScale) {
+      scale = scaleControl(this.useScaleBarStyle);
+      map.addControl(scale);
+    }
+
+    if (this.showPrint) {
+      const printControl = new PrintControl({ map });
+      map.addControl(printControl);
+    }
+
     // Apply aria-labels to OL Controls for accessibility
     const olControls: NodeListOf<HTMLButtonElement> | undefined =
       this.renderRoot?.querySelectorAll(".ol-control button");
     olControls?.forEach((node) =>
       node.setAttribute("aria-label", node.getAttribute("title") || ""),
     );
 
+    // Re-order overlay elements so that OL Attribution is final element
+    //   making OL Controls first in natural tab order for accessibility
+    const olAttribution = this.renderRoot?.querySelector(
+      ".ol-attribution",
+    ) as Node;
+    const olOverlay = this.renderRoot?.querySelector(
+      ".ol-overlaycontainer-stopevent",
+    );
+    olOverlay?.append(olAttribution);
+
     // define cursors for dragging/panning and moving
     map.on("pointerdrag", () => {
       map.getViewport().style.cursor = "grabbing";
@@ -631,7 +641,11 @@ export class MyMap extends LitElement {
   render() {
     return html`<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
       <link rel="stylesheet" href="https://cdn.skypack.dev/ol@^6.6.1/ol.css" />
-      <div id="${this.id}" class="map" tabindex="0" />`;
+      <div
+        id="${this.id}"
+        class="map"
+        tabindex="${this.staticMode && !this.collapseAttributions ? -1 : 0}"
+      />`;
   }
 
   // unmount the map

src/components/my-map/main.test.ts

@@ -23,7 +23,7 @@ test("olMap is added to the global window for tests", async () => {
 describe("MyMap on initial render with OSM basemap", async () => {
   beforeEach(
     () => setupMap('<my-map id="map-vitest" disableVectorTiles />'),
-    2500
+    2500,
   );
 
   it("should render a custom element with a shadow root", () => {
@@ -33,8 +33,27 @@ describe("MyMap on initial render with OSM basemap", async () => {
     const mapShadowRoot = getShadowRoot("my-map");
     expect(mapShadowRoot).toBeTruthy;
   });
+});
+
+describe("Keyboard navigation of map container, controls and attribution links", () => {
+  it("map container should be keyboard navigable by default", async () => {
+    await setupMap(`<my-map id="map-vitest" disableVectorTiles />`);
+    const map = getShadowRoot("my-map")?.getElementById("map-vitest");
+    expect(map).toBeTruthy;
+    expect(map?.getAttribute("tabindex")).toEqual("0");
+  });
+
+  it("should omit map container from tab order if not interactive", async () => {
+    await setupMap(`<my-map id="map-vitest" disableVectorTiles staticMode />`);
+    const map = getShadowRoot("my-map")?.getElementById("map-vitest");
+    expect(map).toBeTruthy;
+    expect(map?.getAttribute("tabindex")).toEqual("-1");
+  });
 
-  it("should be keyboard navigable", () => {
+  it("should keep map container in tab order if attributions are collapsed", async () => {
+    await setupMap(
+      `<my-map id="map-vitest" disableVectorTiles staticMode collapseAttributions />`,
+    );
     const map = getShadowRoot("my-map")?.getElementById("map-vitest");
     expect(map).toBeTruthy;
     expect(map?.getAttribute("tabindex")).toEqual("0");
@@ -47,7 +66,7 @@ describe("Snap points loading behaviour", () => {
 
   const getSnapSpy: MockInstance = vi.spyOn(
     snapping,
-    "getSnapPointsFromVectorTiles"
+    "getSnapPointsFromVectorTiles",
   );
   afterEach(() => {
     vi.resetAllMocks();

src/components/my-map/styles.scss

@@ -1,3 +1,7 @@
+$gov-uk-yellow: #ffdd00;
+$planx-blue: #0010a4;
+$planx-dark-grey: #2c2c2c;
+
 // default map size, can be overwritten with CSS
 :host {
   display: block;
@@ -15,12 +19,12 @@
 }
 
 .map:focus {
-  outline: #ffdd00 solid 0.25em;
+  outline: $gov-uk-yellow solid 0.25em;
 }
 
 .ol-control button {
   border-radius: 0 !important;
-  background-color: #2c2c2c !important;
+  background-color: $planx-dark-grey !important;
   cursor: pointer;
   min-width: 44px;
   min-height: 44px;
@@ -31,14 +35,18 @@
   background-color: rgba(44, 44, 44, 0.85) !important;
 }
 
+.ol-control button:focus {
+  outline: $gov-uk-yellow solid 0.15em;
+}
+
 .ol-scale-line {
   background-color: transparent;
 }
 
 .ol-scale-line-inner {
-  border: 0.2em solid #2c2c2c;
+  border: 0.2em solid $planx-dark-grey;
   border-top: none;
-  color: #2c2c2c;
+  color: $planx-dark-grey;
   font-size: 1em;
   font-family: inherit;
 }
@@ -98,3 +106,12 @@
 .ol-attribution li {
   display: list-item;
 }
+
+.ol-attribution a {
+  color: $planx-blue;
+}
+
+.ol-attribution a:focus {
+  color: black;
+  background-color: $gov-uk-yellow;
+}