Skip to content

Accessibility Improvements and Build Fixes#654

Open
KethanaReddy7 wants to merge 44 commits intomasterfrom
user/kpeddireddy/LocationButtonTab
Open

Accessibility Improvements and Build Fixes#654
KethanaReddy7 wants to merge 44 commits intomasterfrom
user/kpeddireddy/LocationButtonTab

Conversation

@KethanaReddy7
Copy link
Copy Markdown

This PR includes multiple accessibility fixes such as keyboard navigation in location dropdown, focus management for popups, Voice Access support, and high contrast mode visibility.

github-actions bot and others added 30 commits February 25, 2026 09:09
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>
Updated focus trapping logic to include additional panels for accessibility compliance.
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.
Copilot AI and others added 14 commits March 30, 2026 08:45
…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/029fac6a-7d39-4214-b537-4cab9afd25e1

Co-authored-by: KethanaReddy7 <257986085+KethanaReddy7@users.noreply.github.com>
…-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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants