TabView's New Tab Button color contrast ratio inaccessible (Light Theme)

[carlos-zamora]

Describe the bug
The New Tab Button for the TabView does not meet a 3:1 color contrast ratio.

Steps to reproduce the bug
This can be seen in Windows Terminal's TabRowControl.xaml, where we replace the NewTabButton with a SplitButton matching the styling of the TabView's NewTabButton.

More easily, this can be seen/tested in the Xaml Controls Gallery page introducing the TabView.

Steps to reproduce the behavior:

1. Open Xaml Controls Gallery and navigate to the TabView page
2. Open Accessibility Insights (download link here) to check the color contrast ratio
3. Verify whether the color contrast ratio for the NewTabButton meets the 3:1 contrast ratio

Expected behavior
It meets the 3:1 ratio

Screenshots

• Light Theme (fails)
  
  

• Dark Theme (passes)
  
  

Version Info

NuGet package version:

Windows 10 version	Saw the problem?
Insider Build (xxxxx)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop
Mobile
Xbox
Surface Hub
IoT

[ranjeshj]

@carlos-zamora Both TabView + and the splitbutton have this issue ? @chigy as FYI.

[carlos-zamora]

@carlos-zamora Carlos Zamora FTE Both TabView + and the splitbutton have this issue ? @chigy Chigusa Sansen FTE as FYI.

Yeah. I assume this is different from #1901 because it's a different resource dictionary, but if not, feel free to close it.

This is being tracked in the Terminal repo here (microsoft/terminal#5392) and was submitted by the accessibility testers.

[chigy]

@carlos-zamora , do you have screenshot of the offending UI?

[carlos-zamora]

@carlos-zamora Carlos Zamora FTE , do you have screenshot of the offending UI?

Yes. They should be visible in the issue description above. Windows Terminal is on the left side, and Accessibility Insights is on the right detecting the issue.

[chigy]

@carlos-zamora , oops, I see it now. I wasn't clear what I was looking at. :)

@stmoy , is this issue with TabView or the way those resources are used within Terminal?

[carlos-zamora]

Huh. I just noticed that we do this:

                <mux:SplitButton.Resources>
		    <!-- Override the SplitButton* resources to match the tab view's button's styles. -->
                    <ResourceDictionary>
                        <ResourceDictionary.ThemeDictionaries>
                            <ResourceDictionary x:Key="Light">
                                <StaticResource x:Key="SplitButtonBackground" ResourceKey="TabViewItemHeaderBackground" />
                                <StaticResource x:Key="SplitButtonForeground" ResourceKey="SystemControlBackgroundBaseMediumBrush" />
                                <StaticResource x:Key="SplitButtonBackgroundPressed" ResourceKey="TabViewItemHeaderBackgroundPressed" />
                                <StaticResource x:Key="SplitButtonForegroundPressed" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
                                <StaticResource x:Key="SplitButtonBackgroundPointerOver" ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
                                <StaticResource x:Key="SplitButtonForegroundPointerOver" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
                            </ResourceDictionary>
                            <ResourceDictionary x:Key="Dark">
                                <StaticResource x:Key="SplitButtonBackground" ResourceKey="TabViewItemHeaderBackground" />
                                <StaticResource x:Key="SplitButtonForeground" ResourceKey="SystemControlBackgroundBaseMediumBrush" />
                                <StaticResource x:Key="SplitButtonBackgroundPressed" ResourceKey="TabViewItemHeaderBackgroundPressed" />
                                <StaticResource x:Key="SplitButtonForegroundPressed" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
                                <StaticResource x:Key="SplitButtonBackgroundPointerOver" ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
                                <StaticResource x:Key="SplitButtonForegroundPointerOver" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
                            </ResourceDictionary>
                            <ResourceDictionary x:Key="HighContrast">
                                <StaticResource x:Key="SplitButtonBackground" ResourceKey="TabViewItemHeaderBackground" />
                                <StaticResource x:Key="SplitButtonForeground" ResourceKey="SystemControlBackgroundBaseMediumBrush" />
                                <StaticResource x:Key="SplitButtonBackgroundPressed" ResourceKey="TabViewItemHeaderBackgroundPressed" />
                                <StaticResource x:Key="SplitButtonForegroundPressed" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
                                <StaticResource x:Key="SplitButtonBackgroundPointerOver" ResourceKey="TabViewItemHeaderBackgroundPointerOver" />
                                <StaticResource x:Key="SplitButtonForegroundPointerOver" ResourceKey="SystemControlBackgroundBaseMediumHighBrush" />
                            </ResourceDictionary>
                        </ResourceDictionary.ThemeDictionaries>
                    </ResourceDictionary>
                </mux:SplitButton.Resources>
            </mux:SplitButton>

Overriding the SplitButton's resources to match the tab view's button styles.

So this might actually be an issue with the TabView resources. And a duplicate of #1901. Sorry!

[stmoy]

Good question. I was under the impression that the SplitButton was custom for Terminal (as the regular ol' TabView doesn't have one built in) - but I think that it cannot be fixed independently of the TabView fix since it has a transparent background. I don't think it's actually a dupe of #1901 as I'm guessing there will need to be some custom work here, but I think the former must be solved before this.

[carlos-zamora]

Ok, I went to the Xaml Controls Gallery and here are some more useful results:

Light Theme: fail

Dark Theme: pass

Note: the target ratio is 3:1 for UI components.

[chigy]

@carlos-zamora , what is this measuring?

[carlos-zamora]

Oh sorry! I've been running around a bit today. The above ratios are measuring the color contrast of the New Tab Button that is included by default in a TabView. Color 1 is the color of the '+' (foreground) , and Color 2 is the background.

These buttons are shown here:

In Terminal, we suppress the New Tab button and replace it with a SplitButton that matches the styling (same foreground and background color).

So, it turns out, I was incorrect in what I first said reporting this issue. The problem isn't the SplitButton's color contrast, but rather the New Tab button's that is shipped in the TabView. I'll update the issue title and description appropriately. Sorry about the confusion.

[ranjeshj]

@stmoy @chigy do we need to update the colors for the add/close buttons ?

[stmoy]

@ranjeshj - yes, but it's more than that. Several parts of TabView (background/foreground, buttons, text) don't meet the updated contrast ratio guidance. #1901 tracks taking a holistic pass across TabView to bring it up to compliance. We should probably close this one as a dupe of #1901 if @carlos-zamora believes that updating the defaults will fix this case.

[carlos-zamora]

Yeah. Feel free to mark this as a duplicate of that one :)

[ranjeshj]

ok. Lets track this as part of the other issue then. Thanks