Fix selected state visibility for font radio buttons and mode buttons in high contrast themes

[Copilot]

In Windows high contrast themes (Aquatic, Desert), the browser's forced-colors mode remaps hardcoded CSS colors to system colors, causing the selected state of font radio buttons (Sans Serif/Serif) and mode buttons (Article, Full Page, etc.) to be visually indistinguishable from their unselected states.

Changes

• src/styles/clipper.less — Added two rule blocks inside the existing @media (forced-colors: active) query:
  • .control-button.active: explicitly sets Highlight/HighlightText system colors so the selected font radio button is always visually distinct
  • .modeButton.selected: same treatment for selected mode buttons

@media (forced-colors: active) {
    // Ensure selected state of font radio buttons is visible in high contrast themes (Aquatic, Desert, etc.)
    .control-button.active {
        forced-color-adjust: none;
        background-color: Highlight !important;
        color: HighlightText !important;
        border: 2px solid HighlightText !important;
    }

    // Ensure selected state of mode buttons is visible in high contrast themes
    .modeButton.selected {
        forced-color-adjust: none;
        background-color: Highlight !important;
        color: HighlightText !important;
        border: 2px solid HighlightText !important;
    }
}

forced-color-adjust: none opts these elements out of the browser's automatic color remapping; the CSS system color keywords (Highlight, HighlightText) then ensure correct, theme-aware contrast in all high contrast modes. No impact on non-high-contrast rendering.

Original prompt

[OneNote Clipper] [Web] [high contrast]: After applying High Contrast theme, selected state focus is not visible.

Work Item Details

Note: Please focus on the descriptions and information that provide context about the task requirements, functionality, and implementation details. Dates, priorities, and administrative metadata are less relevant for coding tasks.

Description

Environment Details:

Application Name: OneNote Clipper-web

Platform: Web

OS Version: 25H2(26200.7392)

Edge Version: 143.0.3650.96 (Official build) (64-bit)

Application URL: https://www.onenote.com/clipper

Repro Steps:

1. Open https://www.onenote.com/clipper.

2. Navigate till get one note web clipper for edge and activate it.

3. Edge Add-ons page will appear. Invoke the Get button.

4. OneNote Clipper will be added in edge extension section. 

5. Expand the Extension button and turn on the OneNote Clipper Show in Toolbar button.

6. Now invoke the OneNote clipper button.

7. Open in sign in page, 

8. Navigate to "Article" button, invoke it.

9. Navigate to "sans serif" tab item.

10. Observe the issue.

Actual Result:

After applying High Contrast theme, selected state focus is not visible.

Expected Result:

In High Contrast theme, the selected state/focus indicator must be clearly visible with sufficient contrast and a distinct visual style (e.g., outline, border, highlight) so users can easily identify the focused or selected element.

User Impact:

Users with low vision, color vision deficiencies, or those relying on High Contrast mode cannot determine the current focus or selected item.

MAS Reference:

MAS 4.3.1 – No Disruption of Accessibility Features

Have feedback on bugs logged, please tag bug as “A11yRCA” and add your feedback in the comment section.

Tags

A11yMAS; A11yRT; A11ySev3; Accessibility; MAS4.3.1; OneNoteClipper_Web; RT-122025; RT-OneNote Clipper-Web-Dec2025; TCS-E+D

RCA Analysis

Was change validated in devMain first before porting to fork?

Why was Flighting|Backout not used?

Impact of bug (# users affected):

RCA and Mitigation/Fix Details:

What are you doing to prevent this in the future?

Comments

Swastika Chattopadhyay (TATA CONSULTANCY SERVICES LTD) (Thu, 08 Jan 2026 10:29:22 GMT): The issue is partially fixed.
Earlier, the keyboard focus indicator was not visible on the Font radio buttons.
Currently, although the focus indicator is visible on radio buttons, the selected state of the Font radio buttons is not distinguishable in the Aquatic and Desert themes.
Lowering the severity to Sev 3.
Hence, reactivating the bug

Aanchal Bhansali (Thu, 08 Jan 2026 09:52:47 GMT): @<06a55c10-962a-61ed-af44-62219eb2e694> / @<4bfc4598-9829-6e30-bd46-e00c8e12568e> Keyboard focus has been fixed in extension version 3.10.12:

We will take up the contrast colors issue in subsequent update. 

Since this does not hamper the functionality of the buttons or make any feature inactive, hence please downgrade the Severity to 3 for now.

Aanchal Bhansali (Wed, 07 Jan 2026 18:03:39 GMT): Fixed in PR: A11y Bug 8780801: Fix keyboard focus visibility in high contrast desert theme by Copilot · Pull Request #609 · OneNoteDev/WebClipper

Extension version: 3.10.12

Work item: AB#10987393
Created via Azure DevOps

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[KethanaReddy7]

@claude remove styling for claude buttons that you added.

[claude]

Claude finished @KethanaReddy7's task in 41s —— View job

---

Clarification Needed

• Understand the request - identify which styling to remove
• Review current changes in the PR
• Make the requested changes
• Commit and push

I've reviewed the changes in this PR, but I don't see any "claude buttons" styling. This PR adds styling for:

1. .control-button.active - Font radio buttons (Sans Serif/Serif)
2. .modeButton.selected - Mode buttons (Article, Full Page, etc.)

Both are high contrast accessibility fixes to make selected states visible in Windows high contrast themes.

Could you clarify which styling you'd like me to remove? If you'd like me to remove both button styles, that would undo the accessibility fix this PR is meant to provide.