A11y_.NETCore3.0(WPF)_WPF Text Formatting_HighContrast: Button selection is not visible when we apply High contrast Black theme.

[grubioe]

Copied from VSO 949977

Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier.”

Environment Details:
Application Name: .NET Core 3.0 (WPF)

.NET Core SDK version: 3.0.100-preview8-013442

Windows Version: Windows10

ScreenReader Version: Narrator, NVDA 2019.1.1

Pre-requisite:

1. Download the latest .NET Core 3 daily build by going to this link.

2. Install Windows (x86 or x64) versions of sdk listed under Master (3.0.x Runtime) by clicking "Installer" link.

Repro Steps:

1. Open Visual Studio.

2. Hit on File and select Open->Project/Solution.

3. Run exe file for "Text Formatting" from the build app folder provided.

4. Main Window for "Text Formatting" solution will appear.

5. Select some buttons Bold and Italic

6. Apply High contrast Black

Actual:

When we select some text formatting options like Bold, Italic buttons, It is visible in normal mode

But in High contrast black theme we are unable to se the selection.

Expected:

All content available on screen should be clearly visible in high contrast mode.

User Impact:

Low vision users will face difficulties for accessing screen in High contrast theme.

Recommendations:

Please refer to below URL which is repository for accessibility bug fixes.

https://microsoft.sharepoint.com/teams/msenable/Pages/Home.aspx

MAS Reference:

MAS 1.4.3

https://microsoft.sharepoint.com/:w:/r/teams/msenable/_layouts/15/WopiFrame.aspx?sourcedoc={a73546c7-765f-489c-b18f-afb659fe99e6}

[arpitmathur]

In non-high contrast themes, when you check a ToggleButton and navigate away, we show the button as highlighted with a lighter shade of the selection color.

We don't follow this behavior in high contrast themes. The text is slightly-depressed upon checkign but that is not visually apparent and would definitely not be to a visually impaired person.

[arpitmathur]

In non-high contrast themes, when you check a ToggleButton and navigate to another control, we display the checked status by highlighting the button with a lighter shade of the selection color.

We don't follow this behavior in high contrast themes. The text is slightly-depressed upon checking but that is not visually apparent and would definitely not be to a visually impaired person.

In the image above, the 'S', 'C' and 'I' buttons are checked. However, it's barely noticeable that 'S' and 'C' are checked. The checked status of the 'I' button is also not noticeable when it receives focus.

The fix here is to check for a toggle button to be checked when in a high-contrast theme, we then add a border around the button. When a checked button also has keyboard focus, we add a border in the background-color. When the user navigates away, the border color is the same as the selection-color.

In the image below, the 'S', 'C' and 'I' buttons are checked again. Here, it's visually apparent that they are currently checked.

[arpitmathur]

Pull request here has been merged into master. #1976

[arpitmathur]

Reopening the issue to track porting the change to release/3.1