update prototype to move announcement out of reducer

Khan · Dec 10, 2024 · c9c5c6c · c9c5c6c
1 parent c4bbbcb
commit c9c5c6c
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 14 deletions.
diff --git a/packages/perseus/src/widgets/interactive-graphs/ariaLiveAnnounce.ts b/packages/perseus/src/widgets/interactive-graphs/ariaLiveAnnounce.ts
@@ -1,12 +1,12 @@
-type PolitenessLevel = "assertive" | "polite";
+import { AriaLivePolitenessLevel } from "./types"
 
-export function ariaLiveAnnounce(message: string, options?: {level?: PolitenessLevel}): void {
+export function ariaLiveAnnounce(message: string, options?: {level?: AriaLivePolitenessLevel}): void {
     const region = recreateAriaLiveRegion(options?.level ?? "polite")
     region.innerText = message
 }
 
 let currentAriaLiveRegion: HTMLDivElement | null = null
-function recreateAriaLiveRegion(politenessLevel: PolitenessLevel): HTMLDivElement {
+function recreateAriaLiveRegion(politenessLevel: AriaLivePolitenessLevel): HTMLDivElement {
     if (currentAriaLiveRegion) {
         document.body.removeChild(currentAriaLiveRegion)
     }
@@ -15,8 +15,7 @@ function recreateAriaLiveRegion(politenessLevel: PolitenessLevel): HTMLDivElemen
     return currentAriaLiveRegion
 }
 
-function createAriaLiveRegion(politenessLevel: PolitenessLevel): HTMLDivElement {
-    console.log("createAriaLiveRegion")
+function createAriaLiveRegion(politenessLevel: AriaLivePolitenessLevel): HTMLDivElement {
     const newRegion = document.createElement("div")
     newRegion.setAttribute("aria-live", politenessLevel)
     newRegion.classList.add("perseus-aria-live-region")

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/components/movable-point.tsx
@@ -3,15 +3,15 @@ import * as React from "react";
 import {useControlPoint} from "./use-control-point";
 
 import type {CSSCursor} from "./css-cursor";
-import type {AriaLive} from "../../types";
+import type {AriaLivePolitenessLevel} from "../../types";
 import type {KeyboardMovementConstraint} from "../use-draggable";
 import type {vec} from "mafs";
 
 type Props = {
     point: vec.Vector2;
     ariaDescribedBy?: string;
     ariaLabel?: string;
-    ariaLive?: AriaLive;
+    ariaLive?: AriaLivePolitenessLevel;
     color?: string;
     constrain?: KeyboardMovementConstraint;
     cursor?: CSSCursor | undefined;

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/components/use-control-point.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/components/use-control-point.tsx
@@ -10,15 +10,15 @@ import {useDraggable} from "../use-draggable";
 import {MovablePointView} from "./movable-point-view";
 
 import type {CSSCursor} from "./css-cursor";
-import type {AriaLive} from "../../types";
+import type {AriaLivePolitenessLevel} from "../../types";
 import type {KeyboardMovementConstraint} from "../use-draggable";
 import type {vec} from "mafs";
 
 type Params = {
     point: vec.Vector2;
     ariaDescribedBy?: string;
     ariaLabel?: string;
-    ariaLive?: AriaLive;
+    ariaLive?: AriaLivePolitenessLevel;
     color?: string | undefined;
     constrain?: KeyboardMovementConstraint;
     cursor?: CSSCursor | undefined;

diff --git a/packages/perseus/src/widgets/interactive-graphs/graphs/point.tsx b/packages/perseus/src/widgets/interactive-graphs/graphs/point.tsx
@@ -46,9 +46,11 @@ function LimitedPointGraph(props: PointGraphProps) {
     const {dispatch, graphState} = props;
     const {announcement} = graphState;
 
+    // Announcement would get updated here
+
     React.useEffect(() => {
-        if (announcement) {
-            ariaLiveAnnounce(announcement.text, {level: "assertive"})
+        if (announcement && announcement.text) {
+            ariaLiveAnnounce(announcement.text, {level: "polite"})
         }
     }, [announcement])
 

diff --git a/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts b/packages/perseus/src/widgets/interactive-graphs/reducer/interactive-graph-reducer.ts
@@ -508,7 +508,7 @@ function doMovePoint(
                     index: action.index,
                     newValue: boundAndSnapToGrid(action.destination, state),
                 }),
-                announcement: {text: "updated"}
+                announcement: {text: state.announcement?.text},
             };
         }
         case "sinusoid": {

diff --git a/packages/perseus/src/widgets/interactive-graphs/types.ts b/packages/perseus/src/widgets/interactive-graphs/types.ts
@@ -46,7 +46,7 @@ export interface InteractiveGraphStateCommon {
     range: [xRange: Interval, yRange: Interval];
     // snapStep = [xStep, yStep] in Cartesian units
     snapStep: vec.Vector2;
-    announcement?: {text: string};
+    announcement?: {text?: string};
 }
 
 export interface SegmentGraphState extends InteractiveGraphStateCommon {
@@ -137,4 +137,4 @@ export type GraphDimensions = {
     height: number; // pixels
 };
 
-export type AriaLive = "off" | "assertive" | "polite" | undefined;
+export type AriaLivePolitenessLevel = "off" | "assertive" | "polite";