A11y Bug 9948579: [OneNote Clipper] [Web]: Keyboard focus is not moving to default location dropdown with tab key.

[KethanaReddy7]

Environment Details:
Application Name: Excel Start - In Grid Create with Copilot.
Platform: Web
Browser version: Version 135.0.3179.33 (Official build) beta (64-bit)
Application URL: https://www.onenote.com/clipper
Repro Steps:
Open https://www.onenote.com/clipper.
Navigate till get one note web clipper for edge and activate it.
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.
Now invoke the OneNote clipper button.
Sign in with V-id.
Try to navigate to location dropdown with tab key.
Observe the issue.
Actual Result:
Keyboard focus is not moving to default location dropdown with tab key. Only by using shift+ tab key we can be able to move to default location dropdown.
Expected Result:
Keyboard focus should be able to default location dropdown by using tab key.
User Impact:
Users will face difficulty if keyboard focus is not moving to default location dropdown with tab key.
MAS Reference:
MAS 2.4.3 – Focus Order
Have feedback on bugs logged, please tag bug as “A11yRCA” and add your feedback in the comment section.

[claude]

Claude finished @KethanaReddy7's task in 5m 23s —— View job • claude/issue-631-20260226-0922 • Create PR ➔

---

Accessibility Fix Complete

Issue: Keyboard focus is not moving to default location dropdown with tab key (MAS 2.4.3 – Focus Order)

Todo List

• Read repository guidelines (CLAUDE.md)
• Explore codebase to find location dropdown component
• Identify the focus order issue
• Implement fix for tab navigation
• Commit and push changes
• Provide PR link

Root Cause

Mode buttons in modeButton.tsx used tabIndex: this.props.tabIndex, but ModeButtonSelector didn't pass a tabIndex prop. This resulted in undefined tabIndex values, causing the <a> elements to not be properly included in the keyboard tab order, which led to the location dropdown being skipped when navigating with the Tab key.

Solution

Added explicit tabIndex values (40-45) to all mode buttons in modeButtonSelector.tsx. This ensures the correct tab order:

1. Mode buttons (tabIndex 40-45)
2. PDF options (tabIndex 60+)
3. Location dropdown (tabIndex 70)
4. Clip button (tabIndex 71)
5. Footer buttons (tabIndex 80-82)
6. Close button (tabIndex 300)

Changes Made

• Modified src/scripts/clipperUI/components/modeButtonSelector.tsx:
  • Updated all button props methods to accept a tabIndex parameter
  • Added tabIndex property to each button's return object
  • Updated getListOfButtons() to pass sequential tabIndex values starting at 40

|