diff --git a/package-lock.json b/package-lock.json index bd88cc63..6be860be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25001,7 +25001,7 @@ "requires": { "debuglog": "^1.0.1", "dezalgo": "^1.0.0", - "graceful-fs": "4.2.2", + "graceful-fs": "^4.1.2", "once": "^1.3.0" } }, diff --git a/src/scripts/clipperUI/regionSelector.tsx b/src/scripts/clipperUI/regionSelector.tsx index 7a24fa54..9f6e1b79 100644 --- a/src/scripts/clipperUI/regionSelector.tsx +++ b/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 { @@ -35,6 +37,8 @@ class RegionSelectorClass extends ComponentBase= 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 +
+ {this.state.ariaLiveMessage} +
+
+ {this.state.ariaLiveAssertiveMessage} +
diff --git a/src/strings.json b/src/strings.json index 93969acb..68259e64 100644 --- a/src/strings.json +++ b/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",