Skip to content
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

Enhanced FocusVisual for various controls #1112

Merged
merged 7 commits into from
Mar 16, 2023

Conversation

cbra-caa
Copy link
Contributor

@cbra-caa cbra-caa commented Mar 6, 2023

#792

Improved the visual cue for textboxes when getting keyboard focus by using the full theme color.

Improved the FocusVisualStyle for the other controls to follow the WCAG recommendations.
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

If this is to be improved further, the next step would be to make the controls taller in general, or add more spacing between the elements in the ribbon. As it is right now the textbox, f.ex. cant increase the size of its border without pushing nearby controls 😅

@@ -58,7 +58,7 @@
TargetType="{x:Type Fluent:Button}">
<Setter Property="Fluent:RibbonProperties.IconSize" Value="Small" />
<Setter Property="Fluent:RibbonProperties.MouseOverBackground" Value="{DynamicResource Fluent.Ribbon.Brushes.BackstageTabItem.MouseOver.Background}" />
<Setter Property="FocusVisualStyle" Value="{DynamicResource Fluent.Ribbon.Styles.ControlStyleEmptyFocus}" />
<Setter Property="FocusVisualStyle" Value="{StaticResource Fluent.Ribbon.Styles.FocusVisual.Tight}" />
Copy link
Member

Choose a reason for hiding this comment

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

All resource usages have to use DynamicResource.
Otherwise people won't be able to overwrite those.

@batzen
Copy link
Member

batzen commented Mar 9, 2023

Just had a look at this.
IMHO it's way too much for certain cases.

  • ComboBox gets highlighted completely, which looks very strange
  • RibbonTabItem also looks very strange
  • It's cut off for items in QAT

I guess it would look way better if it had a narrower dotted border, instead of a rectangle with a 2 px stroke.
Just like the default focus visual, but with correct colors for dark/light.

…ator than the standard striped one. This is also to conform to the requirements in WCAG SC 1.4.11.
…han the current dimmed theme color. This is to conform to the requirements in WCAG SC 1.4.11.
…, by only marking the ActiveBorder instead of using a FocusVisualStyle.
@cbra-caa
Copy link
Contributor Author

I tried to base the solution off of the newest version of Office (2021). There every control has a 2px solid border when focused, even including textboxes and comboboxes. Should I continue with the solid line, or use the striped one?

From Word 2021 f.ex.:
Combobox - writeable:
image

Combobox:
image

Spinner:
image

Button:
image

Backstage:
image

@batzen batzen merged commit 1a320c1 into fluentribbon:develop Mar 16, 2023
@batzen
Copy link
Member

batzen commented Mar 16, 2023

Thanks for contributing!

@batzen batzen changed the title Focusvisual Enhanced FocusVisual for various controls Mar 16, 2023
batzen added a commit that referenced this pull request Mar 16, 2023
@cbra-caa cbra-caa deleted the focusvisual branch March 22, 2023 07:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants