From c9c5c6cf1407e26ce5f58a152ba9edc80072d475 Mon Sep 17 00:00:00 2001 From: Anakaren Rojas Date: Tue, 10 Dec 2024 14:01:58 -0800 Subject: [PATCH] update prototype to move announcement out of reducer --- .../src/widgets/interactive-graphs/ariaLiveAnnounce.ts | 9 ++++----- .../graphs/components/movable-point.tsx | 4 ++-- .../graphs/components/use-control-point.tsx | 4 ++-- .../src/widgets/interactive-graphs/graphs/point.tsx | 6 ++++-- .../reducer/interactive-graph-reducer.ts | 2 +- packages/perseus/src/widgets/interactive-graphs/types.ts | 4 ++-- 6 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/perseus/src/widgets/interactive-graphs/ariaLiveAnnounce.ts b/packages/perseus/src/widgets/interactive-graphs/ariaLiveAnnounce.ts index b39635a563..f8883e2be1 100644 --- 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 index b855da3e1c..dd6351fb39 100644 --- 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,7 +3,7 @@ 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"; @@ -11,7 +11,7 @@ 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 index 0cc35e3f6b..e40d98b119 100644 --- 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,7 +10,7 @@ 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"; @@ -18,7 +18,7 @@ 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 index eb955390c4..0e84f4eea8 100644 --- 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 index 29c9c21069..5e00b1ccd8 100644 --- 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 index 25fc4e3cd6..b1d5d36c87 100644 --- 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";