A11y Bug 8780932: Fix Voice Access numbering background controls when clipper is open (A11y MAS 4.3.1) by Copilot · Pull Request #652 · OneNoteDev/WebClipper

Copilot · 2026-03-30T08:45:38Z

When the OneNote Clipper UI is open, Voice Access displays numbered overlays on background page controls — elements that should be unreachable while the clipper is active.

The root cause: the clipper UI runs inside an iframe appended to document.documentElement, giving it a separate accessibility tree from the host page. aria-modal="true" inside the iframe cannot suppress Voice Access numbering of parent page elements. The fix must happen in the inject script, which runs in the host page context.

Since the iframe is a child of <html> (not <body>), setting aria-hidden="true" and inert on document.body hides all page content from assistive technologies while keeping the clipper iframe (a sibling of <body>) fully accessible:

<html>
  <head>…</head>
  <body aria-hidden="true" inert>…page content…</body>   <!-- hidden from Voice Access, pointer events disabled -->
  <iframe id="oneNoteWebClipper">…</iframe>               <!-- still accessible -->
</html>

aria-hidden="true" removes body elements from the AT accessibility tree. The inert attribute additionally disables all pointer events on body elements — this is necessary because Voice Access on Windows (built on UI Automation) can also scan for elements capable of receiving pointer/mouse events independently of AT-tree visibility, so aria-hidden alone is insufficient.

Changes

clipperInject.ts: Set aria-hidden="true" and inert on document.body when the clipper opens, and remove both when it closes. Three cases are covered:
- First open (constructor): body is marked inert and hidden immediately after the frame is created and shown
- Re-open after close (toggleClipper()): body is marked inert and hidden when the frame is shown again
- Close (hideUi handler): both aria-hidden and inert are removed so page controls are fully accessible again
mainController.tsx: Replace role="main" with role="dialog" and add aria-modal="true" on the main controller container, which remains beneficial for assistive technologies that can traverse same-origin iframes.

<div
    id={Constants.Ids.mainController}
    role="dialog"
    aria-modal="true"
    aria-label={Localization.getLocalizedString("WebClipper.Label.OneNoteWebClipper")} >

mainController_tests.tsx: Add regression test asserting role="dialog" and aria-modal="true" are present on the rendered main controller element.

IN CHROME
Before:

After:

IN EDGE
Before:

After:

…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>

KethanaReddy7 · 2026-03-30T10:45:49Z

@copilot The current changes are not working as expected. With the clipper open, Voice Access still shows number overlays for background page elements, not just the clipper UI. Please review the current implementation, identify why the background is still being exposed, and suggest the correct fix.

…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>

Copilot · 2026-03-30T10:53:42Z

@copilot The current changes are not working as expected. With the clipper open, Voice Access still shows number overlays for background page elements, not just the clipper UI. Please review the curr...

The previous fix was applied in the wrong place. The clipper UI runs inside an iframe appended to document.documentElement, giving it a completely separate accessibility tree from the host page. aria-modal="true" inside the iframe can only suppress sibling elements within the iframe — it cannot prevent Voice Access from numbering elements in the parent page.

The correct fix is in clipperInject.ts (which runs in the host page context). Since the iframe is a child of <html>, not <body>, we can mark <body aria-hidden="true"> to hide all page content from AT while keeping the clipper iframe (a sibling of <body>) fully accessible:

<html>
  <head>…</head>
  <body aria-hidden="true">…page content…</body>  ← hidden from Voice Access
  <iframe id="oneNoteWebClipper">…</iframe>        ← still accessible
</html>

Three cases are handled (commit 9fb6f3e):

First open (constructor): sets aria-hidden="true" on document.body immediately after the frame is created and shown
Re-open after close (toggleClipper()): sets aria-hidden="true" when showing the frame
Close (hideUi handler): removes aria-hidden so page controls are accessible again

KethanaReddy7 · 2026-03-31T04:27:45Z

@copilot Please review the code, it wasn't able to fix the issue

…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>

Copilot · 2026-03-31T04:36:30Z

@copilot Please review the code, it wasn't able to fix the issue

The root gap was that aria-hidden="true" on document.body removes page elements from the ARIA accessibility tree, but Voice Access on Windows (built on UI Automation) can also enumerate elements that are capable of receiving pointer/mouse events — independently of AT-tree visibility. Elements hidden from the AT tree but still pointer-event-capable were still being numbered.

The fix (commit 271fb4c) adds the inert attribute alongside aria-hidden on document.body at all three lifecycle points:

<!-- When clipper is open -->
<html>
  <head>…</head>
  <body aria-hidden="true" inert>…page content…</body>  ← removed from AT tree + pointer events disabled
  <iframe id="oneNoteWebClipper">…</iframe>              ← unaffected, still accessible
</html>

inert is the HTML-standard mechanism that simultaneously:

Removes elements from the accessibility tree (same as aria-hidden)
Disables all pointer events (so Voice Access cannot enumerate or activate them)
Removes elements from the tab/focus order

All three lifecycle points are covered: first open (constructor), re-open (toggleClipper), and close (hideUi removes both attributes).

aanchalbhansali

Approved

Initial plan

44a6ec8

Copilot AI assigned Copilot and KethanaReddy7 Mar 30, 2026

Copilot started work on behalf of KethanaReddy7 March 30, 2026 08:45 View session

Copilot AI changed the title ~~[WIP] Verify accessibility with Voice Access for OneNote Clipper~~ Fix Voice Access numbering background controls when clipper is open (A11y MAS 4.3.1) Mar 30, 2026

Copilot finished work on behalf of KethanaReddy7 March 30, 2026 08:53

Copilot AI requested a review from KethanaReddy7 March 30, 2026 08:53

Copilot started work on behalf of KethanaReddy7 March 30, 2026 10:46 View session

Fix Voice Access background controls: set aria-hidden on document.bod…

9fb6f3e

…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>

Copilot finished work on behalf of KethanaReddy7 March 30, 2026 10:54

Copilot started work on behalf of KethanaReddy7 March 31, 2026 04:27 View session

Add inert alongside aria-hidden on body to fully suppress Voice Acces…

271fb4c

…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>

Copilot finished work on behalf of KethanaReddy7 March 31, 2026 04:37

KethanaReddy7 requested a review from aanchalbhansali April 2, 2026 05:23

KethanaReddy7 marked this pull request as ready for review April 2, 2026 05:23

KethanaReddy7 changed the base branch from master to user/kpeddireddy/LocationButtonTab April 2, 2026 05:31

KethanaReddy7 changed the title ~~Fix Voice Access numbering background controls when clipper is open (A11y MAS 4.3.1)~~ A11y Bug 8780932: Fix Voice Access numbering background controls when clipper is open (A11y MAS 4.3.1) Apr 2, 2026

aanchalbhansali approved these changes Apr 2, 2026

View reviewed changes

KethanaReddy7 merged commit eab6121 into user/kpeddireddy/LocationButtonTab Apr 2, 2026
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

A11y Bug 8780932: Fix Voice Access numbering background controls when clipper is open (A11y MAS 4.3.1)#652

A11y Bug 8780932: Fix Voice Access numbering background controls when clipper is open (A11y MAS 4.3.1)#652
KethanaReddy7 merged 4 commits intouser/kpeddireddy/LocationButtonTabfrom
copilot/verify-accessibility-voice-access

Copilot AI commented Mar 30, 2026 •

edited by KethanaReddy7

Loading

Uh oh!

KethanaReddy7 commented Mar 30, 2026

Uh oh!

Copilot AI commented Mar 30, 2026

Uh oh!

KethanaReddy7 commented Mar 31, 2026

Uh oh!

Copilot AI commented Mar 31, 2026

Uh oh!

aanchalbhansali left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Mar 30, 2026 • edited by KethanaReddy7 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Uh oh!

KethanaReddy7 commented Mar 30, 2026

Uh oh!

Copilot AI commented Mar 30, 2026

Uh oh!

KethanaReddy7 commented Mar 31, 2026

Uh oh!

Copilot AI commented Mar 31, 2026

Uh oh!

aanchalbhansali left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 30, 2026 •

edited by KethanaReddy7

Loading