Skip to content

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

Draft
Copilot wants to merge 2 commits intomasterfrom
copilot/on-clipper-fix-high-contrast-focus
Draft

Fix selected state visibility for font radio buttons and mode buttons in high contrast themes#649
Copilot wants to merge 2 commits intomasterfrom
copilot/on-clipper-fix-high-contrast-focus

Conversation

Copy link
Contributor

Copilot AI commented Mar 23, 2026 •
edited by azure-boards bot
Loading

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

Image

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:

Image

Image

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
Fix high contrast selected state visibility for font radio buttons an…
b97c0bb 
…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 <[email protected]>
Agent-Logs-Url: https://github.com/OneNoteDev/WebClipper/sessions/fc60bfbc-74fc-43f1-a7a2-e376898f9ca1
Copilot AI changed the title [WIP] Fix focus visibility in high contrast theme for OneNote Clipper Fix selected state visibility for font radio buttons and mode buttons in high contrast themes Mar 23, 2026
Copilot AI requested a review from KethanaReddy7 March 23, 2026 06:53
@aanchalbhansali aanchalbhansali changed the base branch from master to user/kpeddireddy/LocationButtonTab March 23, 2026 07:23
@aanchalbhansali aanchalbhansali changed the base branch from user/kpeddireddy/LocationButtonTab to master March 23, 2026 07:24
@KethanaReddy7
Copy link

KethanaReddy7 commented Mar 24, 2026

@claude remove styling for claude buttons that you added.

@claude
Copy link

claude bot commented Mar 24, 2026 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@KethanaReddy7 KethanaReddy7 Awaiting requested review from KethanaReddy7

At least 1 approving review is required to merge this pull request.

Assignees

Copilot code review Copilot

@KethanaReddy7 KethanaReddy7

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@KethanaReddy7