Fix: Control button focus indicators invisible in High Contrast mode

[Copilot]

Problem

In High Contrast mode, focus indicators on control buttons (e.g., "sans serif" font selector in Article mode) are invisible due to white outline (@FocusOnPurpleBackground: #f8f8f8) on white button background.

Root Cause

CSS specificity issue: .control-button:focus rule in mainClassDefinitions.less overrides the high contrast media query's button:focus rule, preventing the Highlight system color from being applied.

Changes

Added .control-button:focus to the high contrast media query selector list in clipper.less:

@media (forced-colors: active) {
    a:focus,
    button:focus,
    [role="button"]:focus,
    .wideActionButton:focus,
    .control-button:focus {  // Added
        outline: solid 2px Highlight !important;
        outline-offset: 2px !important;
    }
}

This ensures control buttons use the system Highlight color (adapts to user's high contrast theme) for focus indicators, restoring visibility and meeting MAS 4.3.1 requirements.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>A11y Bug: 10987393: [high contrast]: After applying High Contrast theme, selected state focus is not visible.</issue_title>
<issue_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:
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.
Open in sign in page,
Navigate to "Article" button, invoke it.
Navigate to "sans serif" tab item.
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.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes A11y Bug: 10987393: [high contrast]: After applying High Contrast theme, selected state focus is not visible. #618

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.