inclusive-design · cindyli · Mar 14, 2024 · Oct 30, 2023 · Oct 31, 2023 · Nov 3, 2023
diff --git a/index.html b/index.html
@@ -7,8 +7,14 @@
     <title>Adaptive Palette</title>
   </head>
   <body>
-    <h2>Palette Based on JSON</h1>
-    <div id="bmwKeyCodes">
+    <h2>Palettes Based on JSON</h1>
+    <div id="outputArea">
+      <div id="output_palette"></div>
+    </div>
+    <div id="backupArea">
+      <div id="backup_palette"></div>
+    </div>
+    <div id="mainPaletteDisplayArea">
       <script type="module">
         import "./src/index.js";
       </script>

diff --git a/src/ActionBmwCodeCell.test.ts b/src/ActionBmwCodeCell.test.ts
@@ -16,7 +16,7 @@ import { html } from "htm/preact";
 import { initAdaptivePaletteGlobals } from "./GlobalData";
 import { ActionBmwCodeCell } from "./ActionBmwCodeCell";
 
-describe("ActionBmwCodeDell render tests", () => {
+describe("ActionBmwCodeDell render tests", (): void => {
 
   const TEST_CELL_ID = "uuid-of-some-kind";
   const testCell = {
@@ -30,11 +30,11 @@ describe("ActionBmwCodeDell render tests", () => {
     }
   };
 
-  beforeAll(async () => {
+  beforeAll(async (): Promise<void> => {
     await initAdaptivePaletteGlobals();
   });
 
-  test("Single ActionBmwCodeCell rendering", async () => {
+  test("Single ActionBmwCodeCell rendering", async (): Promise<void> => {
 
     render(html`
       <${ActionBmwCodeCell}

diff --git a/src/ActionBmwCodeCell.ts b/src/ActionBmwCodeCell.ts
@@ -9,8 +9,9 @@
  * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
  */
 
+import { VNode } from "preact";
 import { html } from "htm/preact";
-import { BlissSymbolCellType } from "./index.d";
+import { BlissSymbolInfoType, LayoutInfoType } from "./index.d";
 import { BlissSymbol } from "./BlissSymbol";
 import { usePaletteState } from "./GlobalData";
 import { generateGridStyle, speak } from "./GlobalUtils";
@@ -19,10 +20,10 @@ import "./ActionBmwCodeCell.scss";
 
 type ActionBmwCodeCellPropsType = {
   id: string,
-  options: BlissSymbolCellType
+  options: BlissSymbolInfoType & LayoutInfoType
 };
 
-export function ActionBmwCodeCell (props: ActionBmwCodeCellPropsType) {
+export function ActionBmwCodeCell (props: ActionBmwCodeCellPropsType): VNode {
   const paletteState = usePaletteState();
 
   const {

diff --git a/src/ActionBranchToPaletteCell.scss b/src/ActionBranchToPaletteCell.scss
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2024 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+.actionBranchToPaletteCell {
+  border: 2px solid blue;
+  background-color: chartreuse;
+  padding-inline: 0.5rem;
+  text-align: center;
+}
diff --git a/src/ActionBranchToPaletteCell.test.ts b/src/ActionBranchToPaletteCell.test.ts
@@ -0,0 +1,65 @@
+/*
+ * Copyright 2024 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { render, screen } from "@testing-library/preact";
+import "@testing-library/jest-dom";
+import { html } from "htm/preact";
+
+import { initAdaptivePaletteGlobals } from "./GlobalData";
+import { ActionBranchToPaletteCell } from "./ActionBranchToPaletteCell";
+
+describe("ActionBranchToPaletteCell render tests", (): void => {
+
+  const TEST_CELL_ID = "uuid-of-some-kind";
+  const goToPaletteCell = {
+    options: {
+      "label": "Animals",
+      "branchTo": "Animals",
+      "rowStart": "100",
+      "rowSpan": "12",
+      "columnStart": "33",
+      "columnSpan": "11",
+      "bciAvId": [ 16161, "/", 9011 ]
+    }
+  };
+
+  beforeAll(async () => {
+    await initAdaptivePaletteGlobals();
+  });
+
+  test("ActionBranchToPaletteCell rendering", async (): Promise<void> => {
+
+    render(html`
+      <${ActionBranchToPaletteCell}
+        id="${TEST_CELL_ID}"
+        options=${goToPaletteCell.options}
+      />`
+    );
+
+    // Check the rendered cell
+    const button = await screen.findByRole("button", {name: goToPaletteCell.options.label});
+
+    // Check that the ActionBmwCodeCell/button is rendered and has the correct
+    // attributes and text.
+    expect(button).toBeVisible();
+    expect(button).toBeValid();
+    expect(button.id).toBe(TEST_CELL_ID);
+    expect(button.getAttribute("class")).toBe("actionBranchToPaletteCell");
+    expect(button.textContent).toBe(goToPaletteCell.options.label);
+
+    // Check the grid cell styles.
+    expect(button.style["grid-column"]).toBe(`${goToPaletteCell.options.columnStart} / span ${goToPaletteCell.options.columnSpan}`);
+    expect(button.style["grid-row"]).toBe(`${goToPaletteCell.options.rowStart} / span ${goToPaletteCell.options.rowSpan}`);
+
+    // Check disabled state (should be enabled)
+    expect(button.getAttribute("disabled")).toBe(null);
+  });
+});
diff --git a/src/ActionBranchToPaletteCell.ts b/src/ActionBranchToPaletteCell.ts
@@ -0,0 +1,66 @@
+/*
+ * Copyright 2023 Inclusive Design Research Centre, OCAD University
+ * All rights reserved.
+ *
+ * Licensed under the New BSD license. You may not use this file except in
+ * compliance with this License.
+ *
+ * You may obtain a copy of the License at
+ * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
+ */
+
+import { render, VNode } from "preact";
+import { html } from "htm/preact";
+import { BlissSymbolCellType } from "./index.d";
+import { adaptivePaletteGlobals } from "./GlobalData";
+import { importPaletteFromJsonFile } from "./GlobalUtils";
+import { Palette } from "./Palette";
+import { BlissSymbol } from "./BlissSymbol";
+import { speak } from "./GlobalUtils";
+import "./ActionBranchToPaletteCell.scss";
+
+type ActionBranchToPalettePropsType = {
+  id: string,
+  options: BlissSymbolCellType
+};
+
+/*
+ * Event handler for an ActionBranchToPaletteCell button/cell that, when clicked,
+ * finds and renders the palette referenced by this cell.
+ */
+const navigateToPalette = async (event: Event): Promise<void> => {
+  const { paletteStore, navigationStack } = adaptivePaletteGlobals;
+  const button = event.currentTarget as HTMLElement;
+  speak(button.innerText);
+
+  const branchToPaletteName = button.getAttribute("data-branchto");
+  const paletteDefinition = await paletteStore.getNamedPalette(branchToPaletteName, importPaletteFromJsonFile);
+  if (paletteDefinition) {
+    const displayElement = button.parentElement.parentElement;
+    navigationStack.push(navigationStack.currentPalette);
+    render (html`<${Palette} json=${paletteDefinition}/>`, displayElement);
+    navigationStack.currentPalette = paletteDefinition;
+  }
+  else {
+    console.error(`navigateToPalette():  Unable to locate the palette definition for ${branchToPaletteName}`);
+  }
+};
+
+export function ActionBranchToPaletteCell (props: ActionBranchToPalettePropsType): VNode {
+  const {
+    columnStart, columnSpan, rowStart, rowSpan, branchTo, bciAvId, label
+  } = props.options;
+
+  const gridStyles = `
+    grid-column: ${columnStart} / span ${columnSpan};
+    grid-row: ${rowStart} / span ${rowSpan};
+  `;
+
+  return html`
+    <button
+      id="${props.id}" class="actionBranchToPaletteCell" style="${gridStyles}"
+      data-branchto="${branchTo}" onClick=${navigateToPalette}>
+      <${BlissSymbol} bciAvId=${bciAvId} label=${label} />
+    </button>
+  `;
+}
diff --git a/src/BlissSymbol.test.ts b/src/BlissSymbol.test.ts
@@ -16,7 +16,7 @@ import { html } from "htm/preact";
 import { initAdaptivePaletteGlobals } from "./GlobalData";
 import { BlissSymbol, GRAPHIC_ROLE } from "./BlissSymbol";
 
-describe("BlissSymbol render tests", () => {
+describe("BlissSymbol render tests", (): void => {
   const singleBciAvId = {
     bciAvId: 12335,
     label: "VERB"
@@ -34,7 +34,7 @@ describe("BlissSymbol render tests", () => {
     await initAdaptivePaletteGlobals();
   });
 
-  test(`BlissSymbol defined by a single BCI_AV_ID (${singleBciAvId.label})`, async () => {
+  test(`BlissSymbol defined by a single BCI_AV_ID (${singleBciAvId.label})`, async (): Promise<void> => {
     render(html`
       <${BlissSymbol}
         bciAvId="${singleBciAvId.bciAvId}"
@@ -52,7 +52,7 @@ describe("BlissSymbol render tests", () => {
     expect(parentChildren[0].nodeName).toBe("svg");
   });
 
-  test("BlissSymbol when the SVG is unknown", async () => {
+  test("BlissSymbol when the SVG is unknown", async (): Promise<void> => {
     render(html`
       <${BlissSymbol}
         bciAvId="${UNKNOWN_BCI_AV_ID}"
@@ -67,7 +67,7 @@ describe("BlissSymbol render tests", () => {
     expect(svgElement).toBe(null);
   });
 
-  test(`BlissSymbol defined by an of BCI_AV_IDs (${arrayBciAvId.label})`, async () => {
+  test(`BlissSymbol defined by an of BCI_AV_IDs (${arrayBciAvId.label})`, async (): Promise<void> => {
     render(html`
       <${BlissSymbol}
         bciAvId="${arrayBciAvId.bciAvId}"
@@ -83,7 +83,7 @@ describe("BlissSymbol render tests", () => {
     expect(parentChildren[0].nodeName).toBe("svg");
   });
 
-  test("BlissSymbol aria: when svg has no role)", async () => {
+  test("BlissSymbol aria: when svg has no role)", async (): Promise<void> => {
     render(html`
       <${BlissSymbol}
         bciAvId="${arrayBciAvId.bciAvId}"
@@ -98,7 +98,7 @@ describe("BlissSymbol render tests", () => {
     expect(svgElement.getAttribute("aria-labelledby")).toBe(null);
   });
 
-  test("BlissSymbol aria: when svg has a graphic role)", async () => {
+  test("BlissSymbol aria: when svg has a graphic role)", async (): Promise<void> => {
     render(html`
       <${BlissSymbol}
         bciAvId="${arrayBciAvId.bciAvId}"

diff --git a/src/BlissSymbol.ts b/src/BlissSymbol.ts
@@ -9,6 +9,7 @@
  * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
  */
 
+import { VNode } from "preact";
 import { html } from "htm/preact";
 import { getSvgElement } from "./SvgUtils";
 import { BciAvIdType } from "./index.d";
@@ -26,7 +27,7 @@ type BlissSymbolPropsType = {
   labelledBy?: string
 }
 
-export function BlissSymbol (props: BlissSymbolPropsType) {
+export function BlissSymbol (props: BlissSymbolPropsType): VNode {
   const { bciAvId, label, isPresentation, labelledBy } = props;
   const svgElement = getSvgElement(bciAvId);
 
@@ -35,7 +36,7 @@ export function BlissSymbol (props: BlissSymbolPropsType) {
     // Deal with aria markup, depending on whether the SVG is for presentation only or
     // associates with a labelled area.
     if (isPresentation === "true") {
-      svgElement.setAttribute("aria-hidden", true);
+      svgElement.setAttribute("aria-hidden", "true");
     } else {
       svgElement.setAttribute("role", `${GRAPHIC_ROLE}`);
       svgElement.setAttribute("aria-labelledby", labelledBy);

diff --git a/src/CommandClearEncoding.test.ts b/src/CommandClearEncoding.test.ts
@@ -16,7 +16,7 @@ import { html } from "htm/preact";
 import { initAdaptivePaletteGlobals } from "./GlobalData";
 import { CommandClearEncoding } from "./CommandClearEncoding";
 
-describe("CommandClearEncoding render tests", () => {
+describe("CommandClearEncoding render tests", (): void => {
 
   const TEST_CELL_ID = "command-del-last-encoding";
   const testCell = {
@@ -26,15 +26,16 @@ describe("CommandClearEncoding render tests", () => {
       "rowStart": 2,
       "rowSpan": 1,
       "columnStart": 14,
-      "columnSpan": 1
+      "columnSpan": 1,
+      "ariaControls": "content-area"
     }
   };
 
   beforeAll(async () => {
     await initAdaptivePaletteGlobals();
   });
 
-  test("CommandClearEncoding rendering", async () => {
+  test("CommandClearEncoding rendering", async (): Promise<void> => {
 
     render(html`
       <${CommandClearEncoding}
@@ -58,6 +59,9 @@ describe("CommandClearEncoding render tests", () => {
     expect(button.style["grid-column"]).toBe("14 / span 1");
     expect(button.style["grid-row"]).toBe("2 / span 1");
 
+    // Check aria-controls
+    expect(button.getAttribute("aria-controls")).toBe(testCell.options.ariaControls);
+
     // Check disabled state (should be enabled)
     expect(button.getAttribute("disabled")).toBe(null);
   });

diff --git a/src/CommandClearEncoding.ts b/src/CommandClearEncoding.ts
@@ -9,34 +9,42 @@
  * https://github.com/inclusive-design/adaptive-palette/blob/main/LICENSE
  */
 
+import { VNode } from "preact";
 import { html } from "htm/preact";
 import { BlissSymbol } from "./BlissSymbol";
 import { usePaletteState } from "./GlobalData";
-import { BlissSymbolCellType } from "./index.d";
+import { BlissSymbolInfoType, LayoutInfoType } from "./index.d";
 import { generateGridStyle, speak } from "./GlobalUtils";
 
 type CommandClearEncodingProps = {
   id: string,
-  options: BlissSymbolCellType
+  options: BlissSymbolInfoType & LayoutInfoType & {
+    ariaControls: string
+  }
 }
 
-export function CommandClearEncoding (props: CommandClearEncodingProps) {
+export function CommandClearEncoding (props: CommandClearEncodingProps): VNode {
   const { id, options } = props;
-  const { label, bciAvId, columnStart, columnSpan, rowStart, rowSpan } = options;
+  const { label, bciAvId, columnStart, columnSpan, rowStart, rowSpan, ariaControls } = options;
 
   const paletteState = usePaletteState();
   const setFullEncoding = paletteState?.setFullEncoding;
 
   const gridStyles = generateGridStyle(columnStart, columnSpan, rowStart, rowSpan);
 
-  const cellClicked = () => {
+  const cellClicked = (): void => {
     setFullEncoding([]);
     speak(label);
   };
 
   return html`
-    <button id="${id}" class="btn-command" style="${gridStyles}" onClick=${cellClicked}>
-      <${BlissSymbol} bciAvId=${bciAvId} label=${label}/>
+    <button
+      id="${id}"
+      class="btn-command"
+      style="${gridStyles}"
+      aria-controls=${ariaControls}
+      onClick=${cellClicked}>
+      <${BlissSymbol} bciAvId=${bciAvId} label=${label} />
     </button>
   `;
 }