A11y Bug 8780675: Voice Access is showing numbers for the non interactive controls.

[KethanaReddy7]

Environment Details:
Application Name: OneNote Clipper-Web
OS: Windows 11 OS build 26058.1000
Edge Dev Version: Version 123.0.2400.1 (Official build) dev (64-bit)
AT's: Voice access
Pre-Requisites:
Open the URL: OneNote Web Clipper Installation
Invoke the 'Get OneNote web Clipper for Microsoft Edge' button.
Edge Add-ons page will appear. Invoke the Get button.
OneNote Clipper will be added in edge extension section.
Expand the Extension button and turn on the OneNote Clipper Show in Toolbar button.
OneNote Clipper will appear beside of the search field.
Now invoke the OneNote clipper button.
Sign in with V-id.
Turn on Voice access.
Repro Steps:
Open the Ankylosaurus - Wikipedia
Now invoke the OneNote clipper button.
OneNote Clipper dialog box will appear.
Say command "Click Location" and observe the issue.
Actual Result:
Voice Access is showing numbers for the non-interactive controls. Voice access showing numbers to the Location text. It is not a interactive element.
Expected Result:
Voice Access should not provide numbers for the non-interactive controls.
User Impact:
Voice access users will confuse if voice access showing numbers to the non-interactive controls.
MAS Reference:
MAS 4.3.1 – No Disruption of Accessibility Features

[claude]

Claude finished @KethanaReddy7's task in 3m 43s —— View job • claude/issue-634-20260309-0501 • Create PR ➔

---

Accessibility Fix Complete

I've fixed the Voice Access issue where numbers were being shown for the non-interactive "Location" text control.

• Read CLAUDE.md for repo-specific instructions (none found)
• Find the Location text element in the OneNote Clipper UI
• Identify the accessibility fix needed
• Implement the fix with proper ARIA attributes
• Commit and push changes

Summary

Problem: Voice Access was treating the "Location" label as an interactive element because it was rendered as a <label htmlFor="..."> element. Labels with htmlFor are clickable (they activate their associated control), so Voice Access assigned a number to it.

Solution: In src/scripts/clipperUI/components/sectionPicker.tsx:

1. Added aria-hidden="true" to the optionLabel div to hide it from all assistive technologies (including Voice Access)
2. Changed the <label> element to a <span> since it no longer needs form label semantics
3. Screen reader accessibility is preserved via the existing addSrOnlyLocationDiv function which adds a screen-reader-only div with the "Location:" text inside the picker component

This ensures Voice Access won't assign a number to the "Location" text while maintaining proper screen reader support.

|

[KethanaReddy7]

Closing the issue with the PR #638