microsoft / microsoft/microsoft-ui-xaml

Tooltips don't always display on keyboard focus

Open
#11,500 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area-ToolTip bug team-Controls
Dominant language
C++
Stars
8.4k
Forks
942
Avg merge
2d 7h
Merged PRs (30d)
105

Description

Describe the bug

Tooltips are supposed to be shown when the user focuses on controls using the keyboard. But when controls process the keyboard input manually to move focus, the tooltips do not show up.

Why is this important?

This is an accessibility issue.

Steps to reproduce the bug

I added the following code to the Gallery app's BreadcrumbBar page to test:

        <controls:ControlExample x:Name="Example3" SampleDefinition="BreadcrumbBar\BreadcrumbbarItemsWithTooltips.txt">
            <controls:ControlExample.Example>
                <BreadcrumbBar x:Name="BreadcrumbBar3" ItemsSource="{x:Bind FoldersWithToolTips, Mode=OneWay}">
                    <BreadcrumbBar.ItemTemplate>
                        <DataTemplate x:DataType="l:Folder">
                            <BreadcrumbBarItem ToolTipService.ToolTip="{Binding ToolTip}">
                                <BreadcrumbBarItem.ContentTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Name}" AutomationProperties.Name="{Binding Name}"/>
                                    </DataTemplate>
                                </BreadcrumbBarItem.ContentTemplate>
                            </BreadcrumbBarItem>
                        </DataTemplate>
                    </BreadcrumbBar.ItemTemplate>
                </BreadcrumbBar>
            </controls:ControlExample.Example>
        </controls:ControlExample>
    public ObservableCollection<Folder> FoldersWithToolTips { get; } = new()
    {
        new Folder { Name = "Home", ToolTip = "Tooltip for Home" },
        new Folder { Name = "Documents", ToolTip = "Tooltip for Documents" },
        new Folder { Name = "Design", ToolTip = "Tooltip for Design" },
        new Folder { Name = "Northwind", ToolTip = "Tooltip for Northwind" },
    };

Go to the BreadcrumbBar example using the tab key.
Then use the left/right arrow keys to go to the other items.

Actual behavior

When using the tab key to highlight the first item, the tooltip will show up.
When using the arrow keys to highlight the other items (or back to the first item), the tooltips don't show.

Expected behavior

The tooltips should show up whether using tab or arrow keys. Note that the visible focus box works in both cases. The tooltip display code should use the same logic as the focus box to know that the control was focused with the keyboard.

Screenshots

Tooltip shows on tab:

Image

Tooltip doesn't show on arrow:

Image
NuGet package version

WinUI gallery 2.9.3.0

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue in the Gallery app's BreadcrumbBar example using the provided XAML and Folder data, then trace the tooltip and keyboard-focus handling for tab and arrow-key navigation. Done means tooltips appear for every BreadcrumbBar item when focus moves with either keyboard method, while the existing focus box behavior remains unchanged.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp, csharp
Domain
accessibility, desktop
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.