Skip to content

Add focused state for DropDownButton and reduces the icon width of the dropdown model button #13773

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

LeafShi1
Copy link
Member

@LeafShi1 LeafShi1 commented Aug 4, 2025

Fixes #13766, #13765

Proposed changes

  • Added a Focused state to the property page's drop-down button.
  • Reduces the icon width of the model button.

Customer Impact

  • The drop-down button of the Property page can be focused under DarkMode

Regression?

  • Yes

Risk

  • Minimal

Screenshots

Before

Dropdown arrow and ellipse symbol in PropertyGrid appears larger in DarkMode and the focus indicator (e.g., dotted line or outline) is not visible when navigating to the DropDownButton or Ellipse Button controls by keyboard

Dark mode on 100% DPI:
image

image

Dark mode on 250% DPI:
image

image

After

The dropdown arrow appears normal and it can be focued

100% DPI:
image

image

250% DPI:
image

image

Test methodology

  • manually

Test environment(s)

  • .net 10.0.0-preview.7.25377.103
Microsoft Reviewers: Open in CodeFlow

@LeafShi1 LeafShi1 requested a review from a team as a code owner August 4, 2025 10:12
@github-actions github-actions bot added the area-DarkMode Issues relating to Dark Mode feature label Aug 4, 2025
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes accessibility issues with the PropertyGrid's dropdown button by adding focused state support and correcting the dropdown chevron size in dark mode.

  • Adds Focused state to ComboBoxState and ModernControlButtonState enums for proper focus indication
  • Implements focus rectangle rendering for dropdown buttons to improve keyboard navigation accessibility
  • Reduces dropdown chevron width from size + (size / 2) to just size to fix oversized appearance

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
ComboBoxState.cs Adds Focused = 5 enum value for focus state support
ControlPaint_ModernControlButtonRenderer.cs Implements focus rectangle drawing and fixes chevron width calculation
ControlPaint.ModernControlButtonState.cs Adds Focused state to internal button state enum
DropDownButton.cs Updates state logic to handle focused state and maps it to the renderer
PublicAPI.Unshipped.txt Documents the new public API addition

Copy link

codecov bot commented Aug 4, 2025

Codecov Report

❌ Patch coverage is 21.05263% with 15 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (main@7c9d043). Learn more about missing BASE report.
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main      #13773   +/-   ##
==========================================
  Coverage        ?   77.08776%           
==========================================
  Files           ?        3271           
  Lines           ?      644363           
  Branches        ?       47660           
==========================================
  Hits            ?      496725           
  Misses          ?      143952           
  Partials        ?        3686           
Flag Coverage Δ
Debug 77.08776% <21.05263%> (?)
integration 19.02731% <21.05263%> (?)
production 51.89803% <21.05263%> (?)
test 97.41609% <ø> (?)
unit 49.30118% <0.00000%> (?)

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@LeafShi1 LeafShi1 force-pushed the Fix_Dropdown-issue-on-PropertyGrid branch from 9eac0a4 to 38e7fda Compare August 5, 2025 01:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-DarkMode Issues relating to Dark Mode feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Dark Mode: Dropdown arrow in PropertyGrid appears larger
1 participant