Sev3 A11y Bug Fixes for OneNote Web Clipper#654
Merged
KethanaReddy7 merged 45 commits intomasterfrom Apr 7, 2026
Merged
Conversation
Add automatic focus management to ensure keyboard focus is visible when the success panel and region selecting panel are first rendered. This addresses accessibility issue MAS 2.4.7 (Focus Visible). - Add initiallySetFocus method to SuccessPanelClass - Add onElementFirstDraw to focus "View in OneNote" button on success - Add initiallySetFocus method to RegionSelectingPanelClass - Add onElementFirstDraw to focus "Back to Home" button in region panel Fixes #628 Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
Change the default_title from "Clip to OneNote" to "OneNote Clipper" across all browser extension manifests (Chrome, Edge, Firefox) to provide a clearer accessible name for screen reader users. Fixes #629 Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
Mode buttons previously had undefined tabIndex values, which caused keyboard focus to skip the location dropdown when navigating with Tab. This fix adds explicit tabIndex values (40-45) to mode buttons to ensure proper tab navigation order: 1. Mode buttons (40-45) 2. PDF options (60+) 3. Location dropdown (70) 4. Clip button (71) Fixes #631 Co-Authored-By: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
Update default_title from "OneNote Clipper" to "OneNote Web Clipper" across all browser extension manifests (Chrome, Edge, Firefox) per reviewer feedback. Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
fix: Add explicit tabIndex to mode buttons for proper focus order
A11y Bug 10987393: Update extension button accessible name for screen readers
…erlay The Location text label was being treated as an interactive element by Voice Access, causing it to display a number for the non-interactive control. This fix adds aria-hidden="true" to the optionLabel div and changes the label element to a span, since screen reader accessibility is already provided by the addSrOnlyLocationDiv function. Fixes #634 Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
This commit fixes the accessibility issue where keyboard focus could escape the "Clip Successful" popup when navigating with Tab key. Changes: - Add handleFocusTrap method to mainController.tsx that intercepts Tab key presses when the success panel is displayed - When Tab is pressed on the last focusable element, focus wraps to the first focusable element - When Shift+Tab is pressed on the first focusable element, focus wraps to the last focusable element - Add unit tests for focus trap functionality Fixes #636 Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
Per review feedback, remove the initiallySetFocus method and onElementFirstDraw call from the region selecting panel. Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
This reverts commit 6652b2a.
This reverts commit 5a2a5d7.
Updated focus trapping logic to include additional panels for accessibility compliance.
This reverts commit 81c3004.
A11y Bug 6223357 : Implement focus trap for Clip Successful popup and region selection Panel popup
A11y Bug 8780715 : add keyboard focus to success panel and region selecting panel
A11y Bug 8780675: Voice Access is showing numbers for the non interactive controls.
…yboard When the location dropdown is expanded using keyboard (Tab + Enter), focus should automatically move to the currently selected section. This improves keyboard accessibility by ensuring users can immediately identify which item is selected. The fix adds focus management to the onPopupToggle handler that: - Focuses on the selected section using aria-selected, data-id, or id - Falls back to focusing the first focusable item if no selection exists Fixes #640 Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com> Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…cape key When the location dropdown was closed via the Escape key, keyboard focus was lost, making it difficult for keyboard-only users to continue navigating. This fix ensures focus returns to the dropdown trigger element when the popup closes, improving accessibility for keyboard users. Fixes #641 Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
…focus Replace requestAnimationFrame with setTimeout(100ms) to ensure the OneNotePickerComponent popup is fully rendered before attempting to focus on the selected item. requestAnimationFrame alone may fire before the external component has finished rendering its interactive elements. Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
The focus was being lost because it was set immediately during the onPopupToggle callback, but the OneNotePicker component's internal DOM manipulation was happening after the focus call. By using setTimeout(0), the focus is now deferred until after the event loop allows the DOM to stabilize. Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
…d mode buttons In Windows high contrast themes (Aquatic, Desert), the selected state of font radio buttons (Sans Serif/Serif) and mode buttons (Article, etc.) was not visually distinguishable due to forced-colors overriding hardcoded CSS colors. Add explicit high contrast rules using CSS system color keywords (Highlight, HighlightText) to clearly indicate the selected/active state. Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com> Agent-Logs-Url: https://github.com/OneNoteDev/WebClipper/sessions/fc60bfbc-74fc-43f1-a7a2-e376898f9ca1
Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
A11y Bug 6210968: Keyboard focus gets lost after closing the 'location dropdown' control via esc key
A11y Bug 6210624: Keyboard focus does not land over the selected item after expanding the "location dropdown" using keyboard.
…ontrast-focus A11y Bug 10987393: [OneNote Clipper] [Web] [high contrast]: After applying High Contrast theme, selected state focus is not visible.
…e=dialog and aria-modal=true Agent-Logs-Url: https://github.com/OneNoteDev/WebClipper/sessions/dac056b7-abc8-4fe3-8c8f-59f5a34f4146 Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>
…y from inject script Agent-Logs-Url: https://github.com/OneNoteDev/WebClipper/sessions/6ec55267-0506-4b18-a277-54f3f90edcb7 Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>
…s background numbering Agent-Logs-Url: https://github.com/OneNoteDev/WebClipper/sessions/b160429a-a946-4869-9c23-834931415ee1 Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>
Agent-Logs-Url: https://github.com/OneNoteDev/WebClipper/sessions/a4bc18dd-5306-49f5-accf-24b9644af25c Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>
Agent-Logs-Url: https://github.com/OneNoteDev/WebClipper/sessions/029fac6a-7d39-4214-b537-4cab9afd25e1 Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>
Agent-Logs-Url: https://github.com/OneNoteDev/WebClipper/sessions/cd89f9f3-38d1-4b38-b360-6bc769e5bbbf Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>
…cation-dropdown-keyboard-focus
…-keyboard-focus A11y Bug 6210624: Keyboard focus and arrow key navigation in location dropdown
…voice-access A11y Bug 8780932: Fix Voice Access numbering background controls when clipper is open (A11y MAS 4.3.1)
Contributor
aanchalbhansali
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR aims to fix the following A11y bugs for webclipper-
Bug 5122289
Bug 6210624
Bug 6210968
Bug 6223357
Bug 8780675
Bug 8780715
Bug 8780932
Bug 8781417
Bug 9948579
Bug 10987393
Bug 7396207
Testing-
A11y team has verified the fix.