Skip to content

A11y Bug 7396207: Add screen reader direction announcements for Region mode keyboard navigation #600

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aanchalbhansali merged 10 commits into from
Dec 30, 2025
Merged

A11y Bug 7396207: Add screen reader direction announcements for Region mode keyboard navigation #600

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f2aeba4
Initial plan
Copilot Dec 16, 2025
b69131c
Add keyboard navigation support for Location menu (OneNotePicker)
Copilot Dec 16, 2025
53aed7b
Address code review feedback: fix memory leak and improve type safety
Copilot Dec 16, 2025
a587e70
Fix Region mode keyboard navigation with screen readers (Narrator)
Copilot Dec 25, 2025
b008a42
Improve screen reader announcements: throttle messages and use approp…
Copilot Dec 25, 2025
45356de
Simplify to keep only direction announcements, remove selection state…
Copilot Dec 30, 2025
165c82e
Merge branch 'user/abhansali/fix-ally-bugs' of https://github.com/One…
Dec 30, 2025
6d71687
optimizing announcements
Dec 30, 2025
0263868
nit change
Dec 30, 2025
24371a3
Remove package-lock.json changes
Copilot Dec 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions src/scripts/clipperUI/regionSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ interface RegionSelectorState {
keyboardSelectionInProgress?: boolean;
winWidth?: number;
winHeight?: number;
ariaLiveMessage?: string;
ariaAlertMessage?: string;
}

class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStateProp> {
Expand Down Expand Up @@ -105,6 +107,28 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
this.setState({ mousePosition: point});
}

/**
* 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
*/
Expand Down Expand Up @@ -133,7 +157,9 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
if (e.which === Constants.KeyCodes.enter ) {
if (!this.state.selectionInProgress) {
this.startSelection({ x: this.state.mousePosition.x, y: this.state.mousePosition.y }, true /* fromKeyboard */);
this.setState({ ariaLiveMessage: Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.SelectionStarted") });
} else {
this.setState({ ariaAlertMessage: Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.SelectionComplete") });
this.stopSelection({ x: this.state.mousePosition.x, y: this.state.mousePosition.y });
}
e.preventDefault();
Expand Down Expand Up @@ -164,6 +190,13 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat

this.setMousePosition(newPosition);

if (!e.repeat) {
let directionMessage = this.getDirectionMessage();
if (directionMessage) {
this.setState({ ariaLiveMessage: directionMessage });
}
}

if (this.state.selectionInProgress) {
this.moveSelection(newPosition);
}
Expand Down Expand Up @@ -431,6 +464,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 role="alert" aria-atomic="true" className={Constants.Classes.srOnly}>
{this.state.ariaAlertMessage}
</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>
Expand Down
6 changes: 6 additions & 0 deletions src/strings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@
"WebClipper.Accessibility.ScreenReader.Footer": "User details",
"WebClipper.Accessibility.ScreenReader.Loading": "Loading...",
"WebClipper.Accessibility.ScreenReader.RegionSelectionCanvas": "Selection canvas",
"WebClipper.Accessibility.ScreenReader.SelectionStarted": "Selection started",
"WebClipper.Accessibility.ScreenReader.SelectionComplete": "Selection complete",
"WebClipper.Accessibility.ScreenReader.Up": "Up",
"WebClipper.Accessibility.ScreenReader.Down": "Down",
"WebClipper.Accessibility.ScreenReader.Left": "Left",
"WebClipper.Accessibility.ScreenReader.Right": "Right",
"WebClipper.Action.BackToHome": "Back",
"WebClipper.Action.Cancel": "Cancel",
"WebClipper.Action.Clip": "Clip",
Expand Down