Add screen reader announcements for Region mode keyboard navigation

src/scripts/clipperUI/regionSelector.tsx

@@ -25,6 +25,8 @@ interface RegionSelectorState {
 	keyboardSelectionInProgress?: boolean;
 	winWidth?: number;
 	winHeight?: number;
+	ariaLiveMessage?: string;
+	ariaLiveAssertiveMessage?: string;
 }
 
 class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStateProp> {
@@ -35,6 +37,8 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
 	private mouseMovementHandler = this.globalMouseMoveHandler.bind(this);
 	private mouseOverHandler = this.globalMouseOverHandler.bind(this);
 	private keyDownDict: { [key: number]: boolean } = {};
+	private lastAnnouncementTime: number = 0;
+	private announcementThrottleMs: number = 500; // Throttle announcements to every 500ms
 
 	getInitialState(): RegionSelectorState {
 		return {
@@ -76,6 +80,11 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
 		if (this.props.clipperState.regionResult.status !== Status.InProgress) {
 			this.setState({ firstPoint: point, secondPoint: undefined, selectionInProgress: true, keyboardSelectionInProgress: fromKeyboard });
 			this.props.clipperState.setState({ regionResult: { status: Status.InProgress, data: this.props.clipperState.regionResult.data } });
+
+			// Announce selection started for screen readers (assertive - important state change)
+			if (fromKeyboard) {
+				this.announceAriaLiveAssertiveMessage(Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.SelectionStarted"));
+			}
 		}
 	}
 
@@ -105,6 +114,47 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
 		this.setState({ mousePosition: point});
 	}
 
+	/**
+	 * Announce screen reader message for keyboard navigation (polite, throttled)
+	 */
+	private announceAriaLiveMessage(message: string) {
+		const now = Date.now();
+		// Throttle direction announcements to avoid overwhelming the screen reader
+		if (now - this.lastAnnouncementTime >= this.announcementThrottleMs) {
+			this.setState({ ariaLiveMessage: message });
+			this.lastAnnouncementTime = now;
+		}
+	}
+
+	/**
+	 * Announce critical screen reader message (assertive, not throttled)
+	 */
+	private announceAriaLiveAssertiveMessage(message: string) {
+		this.setState({ ariaLiveAssertiveMessage: message });
+	}
+
+	/**
+	 * Get the direction message for screen reader based on key presses
+	 */
+	private getDirectionMessage(): string {
+		let directions: string[] = [];
+
+		if (this.keyDownDict[Constants.KeyCodes.up]) {
+			directions.push(Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.Up"));
+		}
+		if (this.keyDownDict[Constants.KeyCodes.down]) {
+			directions.push(Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.Down"));
+		}
+		if (this.keyDownDict[Constants.KeyCodes.left]) {
+			directions.push(Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.Left"));
+		}
+		if (this.keyDownDict[Constants.KeyCodes.right]) {
+			directions.push(Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.Right"));
+		}
+
+		return directions.join(" ");
+	}
+
 	/**
 	 * Define the ending point, and notify the main UI
 	 */
@@ -115,6 +165,12 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
 				this.resetState();
 			} else {
 				this.setState({ secondPoint: point, selectionInProgress: false, keyboardSelectionInProgress: false });
+
+				// Announce selection completed for screen readers (assertive - important state change)
+				if (this.state.keyboardSelectionInProgress) {
+					this.announceAriaLiveAssertiveMessage(Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.SelectionCompleted"));
+				}
+
 				// Get the image immediately
 				this.startRegionClip();
 			}
@@ -164,6 +220,12 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
 
 			this.setMousePosition(newPosition);
 
+			// Announce direction for screen readers
+			let directionMessage = this.getDirectionMessage();
+			if (directionMessage) {
+				this.announceAriaLiveMessage(directionMessage);
+			}
+
 			if (this.state.selectionInProgress) {
 				this.moveSelection(newPosition);
 			}
@@ -431,6 +493,12 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
 				onmouseup={this.mouseUpHandler.bind(this)} ontouchstart={this.touchStartHandler.bind(this)}
 				ontouchmove={this.touchMoveHandler.bind(this)} ontouchend={this.touchEndHandler.bind(this)}
 				onkeydown={this.keyDownHandler.bind(this)} onkeyup={this.keyUpHandler.bind(this)}>
+				<div aria-live="polite" aria-atomic="true" className={Constants.Classes.srOnly}>
+					{this.state.ariaLiveMessage}
+				</div>
+				<div aria-live="assertive" aria-atomic="true" className={Constants.Classes.srOnly}>
+					{this.state.ariaLiveAssertiveMessage}
+				</div>
 				<img id="cursor"  {...this.ref("cursor")} src={ExtensionUtils.getImageResourceUrl("crosshair_cursor.svg")}
 					width={Constants.Styles.customCursorSize + "px"} height={Constants.Styles.customCursorSize + "px"} />
 				<canvas id={Constants.Ids.outerFrame} {...this.ref(Constants.Ids.outerFrame)}></canvas>

src/strings.json

@@ -12,6 +12,12 @@
 	"WebClipper.Accessibility.ScreenReader.Footer": "User details",
 	"WebClipper.Accessibility.ScreenReader.Loading": "Loading...",
 	"WebClipper.Accessibility.ScreenReader.RegionSelectionCanvas": "Selection canvas",
+	"WebClipper.Accessibility.ScreenReader.Up": "Up",
+	"WebClipper.Accessibility.ScreenReader.Down": "Down",
+	"WebClipper.Accessibility.ScreenReader.Left": "Left",
+	"WebClipper.Accessibility.ScreenReader.Right": "Right",
+	"WebClipper.Accessibility.ScreenReader.SelectionStarted": "Selection started. Use arrow keys to adjust and press Enter to complete.",
+	"WebClipper.Accessibility.ScreenReader.SelectionCompleted": "Selection completed",
 	"WebClipper.Action.BackToHome": "Back",
 	"WebClipper.Action.Cancel": "Cancel",
 	"WebClipper.Action.Clip": "Clip",