Sev3 A11y Bug Fixes for OneNote Web Clipper

gulpfile.js

@@ -194,7 +194,8 @@ gulp.task("tslint", function() {
     var tsFiles = [
         PATHS.SRC.ROOT + "**/*.ts",
         PATHS.SRC.ROOT + "**/*.tsx",
-        "!" + PATHS.SRC.ROOT + "**/*.d.ts"
+        "!" + PATHS.SRC.ROOT + "**/*.d.ts",
+        "!" + PATHS.SRC.ROOT + "scripts/definitions/custom/aria-web-telemetry-*.d_internal.ts"
     ];
 
     return gulp.src(tsFiles)

src/scripts/clipperUI/components/modeButtonSelector.tsx

@@ -16,7 +16,7 @@ class ModeButtonSelectorClass extends ComponentBase<{}, ClipperStateProp> {
 		});
 	};
 
-	private getPdfButtonProps(currentMode: ClipMode): PropsForModeElementNoAriaGrouping {
+	private getPdfButtonProps(currentMode: ClipMode, tabIndex: number): PropsForModeElementNoAriaGrouping {
 		if (this.props.clipperState.pageInfo.contentType !== OneNoteApi.ContentType.EnhancedUrl) {
 			return undefined;
 		}
@@ -27,11 +27,12 @@ class ModeButtonSelectorClass extends ComponentBase<{}, ClipperStateProp> {
 			myMode: ClipMode.Pdf,
 			selected: currentMode === ClipMode.Pdf,
 			onModeSelected: this.onModeSelected.bind(this),
-			tooltipText: Localization.getLocalizedString("WebClipper.ClipType.Pdf.Button.Tooltip")
+			tooltipText: Localization.getLocalizedString("WebClipper.ClipType.Pdf.Button.Tooltip"),
+			tabIndex: tabIndex
 		};
 	}
 
-	private getAugmentationButtonProps(currentMode: ClipMode): PropsForModeElementNoAriaGrouping {
+	private getAugmentationButtonProps(currentMode: ClipMode, tabIndex: number): PropsForModeElementNoAriaGrouping {
 		if (this.props.clipperState.pageInfo.contentType === OneNoteApi.ContentType.EnhancedUrl) {
 			return undefined;
 		}
@@ -46,11 +47,12 @@ class ModeButtonSelectorClass extends ComponentBase<{}, ClipperStateProp> {
 			myMode: ClipMode.Augmentation,
 			selected: buttonSelected,
 			onModeSelected: this.onModeSelected.bind(this),
-			tooltipText: augmentationTooltip
+			tooltipText: augmentationTooltip,
+			tabIndex: tabIndex
 		};
 	}
 
-	private getFullPageButtonProps(currentMode: ClipMode): PropsForModeElementNoAriaGrouping {
+	private getFullPageButtonProps(currentMode: ClipMode, tabIndex: number): PropsForModeElementNoAriaGrouping {
 		if (this.props.clipperState.pageInfo.contentType === OneNoteApi.ContentType.EnhancedUrl) {
 			return undefined;
 		}
@@ -61,11 +63,12 @@ class ModeButtonSelectorClass extends ComponentBase<{}, ClipperStateProp> {
 			myMode: ClipMode.FullPage,
 			selected: currentMode === ClipMode.FullPage,
 			onModeSelected: this.onModeSelected.bind(this),
-			tooltipText: Localization.getLocalizedString("WebClipper.ClipType.ScreenShot.Button.Tooltip")
+			tooltipText: Localization.getLocalizedString("WebClipper.ClipType.ScreenShot.Button.Tooltip"),
+			tabIndex: tabIndex
 		};
 	}
 
-	private getRegionButtonProps(currentMode: ClipMode): PropsForModeElementNoAriaGrouping {
+	private getRegionButtonProps(currentMode: ClipMode, tabIndex: number): PropsForModeElementNoAriaGrouping {
 		let enableRegionClipping = this.props.clipperState.injectOptions && this.props.clipperState.injectOptions.enableRegionClipping;
 		let contextImageModeUsed = this.props.clipperState.invokeOptions && this.props.clipperState.invokeOptions.invokeMode === InvokeMode.ContextImage;
 
@@ -79,15 +82,16 @@ class ModeButtonSelectorClass extends ComponentBase<{}, ClipperStateProp> {
 			myMode: ClipMode.Region,
 			selected: currentMode === ClipMode.Region,
 			onModeSelected: this.onModeSelected.bind(this),
-			tooltipText: Localization.getLocalizedString("WebClipper.ClipType.MultipleRegions.Button.Tooltip")
+			tooltipText: Localization.getLocalizedString("WebClipper.ClipType.MultipleRegions.Button.Tooltip"),
+			tabIndex: tabIndex
 		};
 	}
 
 	private getRegionButtonLabel(): string {
 		return "WebClipper.ClipType.Region.Button";
 	}
 
-	private getSelectionButtonProps(currentMode: ClipMode): PropsForModeElementNoAriaGrouping {
+	private getSelectionButtonProps(currentMode: ClipMode, tabIndex: number): PropsForModeElementNoAriaGrouping {
 		if (this.props.clipperState.invokeOptions.invokeMode !== InvokeMode.ContextTextSelection) {
 			return undefined;
 		}
@@ -98,11 +102,12 @@ class ModeButtonSelectorClass extends ComponentBase<{}, ClipperStateProp> {
 			myMode: ClipMode.Selection,
 			selected: currentMode === ClipMode.Selection,
 			onModeSelected: this.onModeSelected.bind(this),
-			tooltipText: Localization.getLocalizedString("WebClipper.ClipType.Selection.Button.Tooltip")
+			tooltipText: Localization.getLocalizedString("WebClipper.ClipType.Selection.Button.Tooltip"),
+			tabIndex: tabIndex
 		};
 	}
 
-	private getBookmarkButtonProps(currentMode: ClipMode): PropsForModeElementNoAriaGrouping {
+	private getBookmarkButtonProps(currentMode: ClipMode, tabIndex: number): PropsForModeElementNoAriaGrouping {
 		if (this.props.clipperState.pageInfo.rawUrl.indexOf("file:///") === 0) {
 			return undefined;
 		}
@@ -113,20 +118,24 @@ class ModeButtonSelectorClass extends ComponentBase<{}, ClipperStateProp> {
 			myMode: ClipMode.Bookmark,
 			selected: currentMode === ClipMode.Bookmark,
 			onModeSelected: this.onModeSelected.bind(this),
-			tooltipText: Localization.getLocalizedString("WebClipper.ClipType.Bookmark.Button.Tooltip")
+			tooltipText: Localization.getLocalizedString("WebClipper.ClipType.Bookmark.Button.Tooltip"),
+			tabIndex: tabIndex
 		};
 	}
 
 	private getListOfButtons(): HTMLElement[] {
 		let currentMode = this.props.clipperState.currentMode.get();
 
+		// Base tabIndex for mode buttons - they should come before PDF options (60+) and location dropdown (70)
+		let baseTabIndex = 40;
+
 		let buttonProps = [
-			this.getFullPageButtonProps(currentMode),
-			this.getRegionButtonProps(currentMode),
-			this.getAugmentationButtonProps(currentMode),
-			this.getSelectionButtonProps(currentMode),
-			this.getBookmarkButtonProps(currentMode),
-			this.getPdfButtonProps(currentMode),
+			this.getFullPageButtonProps(currentMode, baseTabIndex),
+			this.getRegionButtonProps(currentMode, baseTabIndex + 1),
+			this.getAugmentationButtonProps(currentMode, baseTabIndex + 2),
+			this.getSelectionButtonProps(currentMode, baseTabIndex + 3),
+			this.getBookmarkButtonProps(currentMode, baseTabIndex + 4),
+			this.getPdfButtonProps(currentMode, baseTabIndex + 5),
 		];
 
 		let visibleButtons = [];

src/scripts/clipperUI/components/sectionPicker.tsx

@@ -56,6 +56,53 @@ export class SectionPickerClass extends ComponentBase<SectionPickerState, Sectio
 			Clipper.logger.logClickEvent(Log.Click.Label.sectionPickerLocationContainer);
 		}
 		this.props.onPopupToggle(shouldNowBeOpen);
+		if (shouldNowBeOpen) {
+			// Focus the selected section and attach arrow key navigation for keyboard users
+			setTimeout(() => {
+				let sectionPickerPopup = document.getElementById("sectionPickerContainer");
+
+				let curSectionId = this.state.curSection && this.state.curSection.section ? this.state.curSection.section.id : undefined;
+				let elementToFocus: HTMLElement;
+				if (curSectionId) {
+					elementToFocus = document.getElementById(curSectionId) as HTMLElement;
+				}
+				if (!elementToFocus && sectionPickerPopup) {
+					// Fall back to the first keyboard-navigable item in the section picker popup
+					elementToFocus = sectionPickerPopup.querySelector("[tabindex]:not([tabindex=\"-1\"])") as HTMLElement;
+				}
+				if (elementToFocus) {
+					elementToFocus.focus();
+				}
+
+				// Attach Up/Down arrow key navigation (OneNotePicker only handles Enter/Tab)
+				if (sectionPickerPopup && !sectionPickerPopup.getAttribute("data-arrow-key-handler-attached")) {
+					sectionPickerPopup.setAttribute("data-arrow-key-handler-attached", "true");
+					sectionPickerPopup.addEventListener("keydown", (e: KeyboardEvent) => {
+						if (e.which !== Constants.KeyCodes.up && e.which !== Constants.KeyCodes.down) {
+							return;
+						}
+						e.preventDefault();
+						let focusableItems = Array.prototype.slice.call(
+							sectionPickerPopup.querySelectorAll("[tabindex]:not([tabindex=\"-1\"])")
+						).filter((el) => {
+							let parent = (el as HTMLElement).parentElement;
+							return !parent || !parent.closest(".Closed");
+						}) as HTMLElement[];
+						if (focusableItems.length === 0) {
+							return;
+						}
+						let currentIndex = focusableItems.indexOf(document.activeElement as HTMLElement);
+						if (e.which === Constants.KeyCodes.up) {
+							let prevIndex = currentIndex <= 0 ? 0 : currentIndex - 1;
+							focusableItems[prevIndex].focus();
+						} else {
+							let nextIndex = currentIndex >= focusableItems.length - 1 ? focusableItems.length - 1 : currentIndex + 1;
+							focusableItems[nextIndex].focus();
+						}
+					}, true);
+				}
+			}, 0);
+		}
 	}
 
 	// Returns true if successful; false otherwise
@@ -235,6 +282,30 @@ export class SectionPickerClass extends ComponentBase<SectionPickerState, Sectio
 		};
 	}
 
+	// Attach escape key handler to return focus to the dropdown button when Escape is pressed
+	attachEscapeFocusHandler(element: HTMLElement, isInitialized: boolean) {
+		if (!isInitialized) {
+			const escKeyCode = 27;
+			const handleKeyDown = (ev: KeyboardEvent) => {
+				if (ev.keyCode === escKeyCode) {
+					// Check if the dropdown popup is currently visible
+					let sectionPickerPopup = document.querySelector(".SectionPickerPopup");
+					if (sectionPickerPopup) {
+						// The popup is open - schedule focus return after it closes
+						setTimeout(() => {
+							let locationButton = document.getElementById(Constants.Ids.sectionLocationContainer);
+							if (locationButton) {
+								locationButton.focus();
+							}
+						}, 10);
+					}
+				}
+			};
+			// Use capture phase to run before OneNotePicker's handler
+			document.addEventListener("keydown", handleKeyDown, true);
+		}
+	}
+
 	addSrOnlyLocationDiv(element: HTMLElement) {
 		const pickerLinkElement = document.getElementById(Constants.Ids.sectionLocationContainer);
 		if (!pickerLinkElement) {
@@ -246,6 +317,9 @@ export class SectionPickerClass extends ComponentBase<SectionPickerState, Sectio
 		srDiv.setAttribute("class", Constants.Classes.srOnly);
 		// Make srDiv the first child of pickerLinkElement
 		pickerLinkElement.insertBefore(srDiv, pickerLinkElement.firstChild);
+
+		// Attach escape key handler to return focus to the dropdown button
+		this.attachEscapeFocusHandler(element, false);
 	}
 
 	render() {
@@ -296,10 +370,10 @@ export class SectionPickerClass extends ComponentBase<SectionPickerState, Sectio
 
 		return (
 			<div id={Constants.Ids.locationPickerContainer} {...this.onElementFirstDraw(this.addSrOnlyLocationDiv)}>
-				<div id={Constants.Ids.optionLabel} className="optionLabel">
-					<label htmlFor={Constants.Ids.sectionLocationContainer} aria-label={locationString} className="buttonLabelFont" style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Regular)}>
-						<span aria-hidden="true">{locationString}</span>
-					</label>
+				<div id={Constants.Ids.optionLabel} className="optionLabel" aria-hidden="true">
+					<span className="buttonLabelFont" style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Regular)}>
+						{locationString}
+					</span>
 				</div>
 				<OneNotePicker.OneNotePickerComponent
 					id={Constants.Ids.sectionLocationContainer}

src/scripts/clipperUI/mainController.tsx

@@ -82,6 +82,10 @@ export class MainControllerClass extends ComponentBase<MainControllerState, Main
 			if (event.keyCode === Constants.KeyCodes.esc) {
 				this.handleEscPress();
 			}
+			// Handle focus trap for success panel (A11y fix)
+			if (event.keyCode === Constants.KeyCodes.tab) {
+				this.handleFocusTrap(event);
+			}
 		};
 	}
 
@@ -97,6 +101,68 @@ export class MainControllerClass extends ComponentBase<MainControllerState, Main
 		}
 	}
 
+	// Prevents Tab key from moving focus outside the popup 
+	handleFocusTrap(event: KeyboardEvent) {
+		// Only trap focus for specific panels that need it
+		if (this.state.currentPanel !== PanelType.ClippingSuccess &&
+			this.state.currentPanel !== PanelType.RegionInstructions) {
+			return;
+		}
+
+		let mainController = document.getElementById(Constants.Ids.mainController);
+		if (!mainController) {
+			return;
+		}
+
+		// Get all focusable elements within the main controller
+		let focusableElements = mainController.querySelectorAll(
+			"a[tabindex], button[tabindex], input[tabindex], [tabindex]:not([tabindex='-1'])"
+		);
+
+		if (focusableElements.length === 0) {
+			return;
+		}
+
+		// Filter to only include elements with positive tabIndex and sort by tabIndex
+		let sortedFocusables: HTMLElement[] = [];
+		for (let i = 0; i < focusableElements.length; i++) {
+			let element = focusableElements[i] as HTMLElement;
+			if (element.tabIndex >= 0) {
+				sortedFocusables.push(element);
+			}
+		}
+
+		if (sortedFocusables.length === 0) {
+			return;
+		}
+
+		// Sort by tabIndex
+		sortedFocusables.sort((a, b) => a.tabIndex - b.tabIndex);
+
+		// Always handle Tab manually to prevent focus from escaping the iframe
+		event.preventDefault();
+
+		// Find current element's index
+		let currentIndex = -1;
+		for (let i = 0; i < sortedFocusables.length; i++) {
+			if (document.activeElement === sortedFocusables[i]) {
+				currentIndex = i;
+				break;
+			}
+		}
+
+		let nextIndex: number;
+		if (event.shiftKey) {
+			// Shift + Tab: move to previous, wrap to last if at first
+			nextIndex = currentIndex <= 0 ? sortedFocusables.length - 1 : currentIndex - 1;
+		} else {
+			// Tab: move to next, wrap to first if at last
+			nextIndex = currentIndex >= sortedFocusables.length - 1 ? 0 : currentIndex + 1;
+		}
+
+		sortedFocusables[nextIndex].focus();
+	}
+
 	initAnimationStrategy() {
 		this.controllerAnimationStrategy = new ExpandFromRightAnimationStrategy({
 			extShouldAnimateIn: () => { return this.props.clipperState.uiExpanded; },
@@ -361,7 +427,8 @@ export class MainControllerClass extends ComponentBase<MainControllerState, Main
 			<div
 				id={Constants.Ids.mainController}
 				{...this.onElementDraw(this.onMainControllerDraw)}
-				role="main"
+				role="dialog"
+				aria-modal="true"
 				aria-label={Localization.getLocalizedString("WebClipper.Label.OneNoteWebClipper")} >
 				{closeButtonToRender}
 				<div className="panelContent">

src/scripts/clipperUI/panels/regionSelectingPanel.tsx

@@ -4,6 +4,10 @@ import {ClipperStateProp} from "../clipperState";
 import {ComponentBase} from "../componentBase";
 
 class RegionSelectingPanelClass extends ComponentBase<{}, ClipperStateProp> {
+	initiallySetFocus(element: HTMLElement) {
+		element.focus();
+	}
+
 	handleCancelButton() {
 		this.props.clipperState.setState({
 			focusOnRender: Constants.Ids.regionButton
@@ -28,6 +32,7 @@ class RegionSelectingPanelClass extends ComponentBase<{}, ClipperStateProp> {
 					</div>
 					<div className="wideButtonContainer">
 						<a id={ Constants.Ids.regionClipCancelButton } role="button"
+							{...this.onElementFirstDraw(this.initiallySetFocus)}
 							{...this.enableInvoke({callback: this.handleCancelButton, tabIndex: 0})} >
 							<span className="wideButtonFont wideActionButton buttonTextInHighContrast" style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Semibold)}>
 								{Localization.getLocalizedString("WebClipper.Action.BackToHome")}

src/scripts/clipperUI/panels/successPanel.tsx

@@ -14,6 +14,10 @@ import {Clipper} from "../frontEndGlobals";
 import {SpriteAnimation} from "../components/spriteAnimation";
 
 class SuccessPanelClass extends ComponentBase<{ }, ClipperStateProp> {
+	initiallySetFocus(element: HTMLElement) {
+		element.focus();
+	}
+
 	public onLaunchOneNoteButton() {
 		Clipper.logger.logUserFunnel(Log.Funnel.Label.ViewInWac);
 		let data = this.props.clipperState.oneNoteApiResult.data as OneNoteApi.Page;
@@ -38,6 +42,7 @@ class SuccessPanelClass extends ComponentBase<{ }, ClipperStateProp> {
 				</div>
 				<div className="wideButtonContainer">
 					<a id={Constants.Ids.launchOneNoteButton} className="wideButtonFont wideActionButton buttonTextInHighContrast" role="button"
+						{...this.onElementFirstDraw(this.initiallySetFocus)}
 						{...this.enableInvoke({callback: this.onLaunchOneNoteButton, tabIndex: 70})}
 						style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Regular)}>
 						{Localization.getLocalizedString("WebClipper.Action.ViewInOneNote")}

src/scripts/extensions/chrome/manifest.json

@@ -61,7 +61,7 @@
       "256": "icons/icon-256.png"
     },
     "action": {
-      "default_title": "Clip to OneNote",
+      "default_title": "OneNote Web Clipper",
       "default_icon": {
         "19": "icons/icon-19.png",
         "38": "icons/icon-38.png"