microsoft / microsoft/microsoft-ui-xaml
ContentDialog focus highlight is shown when dialog is opened via a keyboard event
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 8.4k
- Forks
- 942
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 105
Description
### Describe the bug
When a ContentDialog is shown which contains interactive controls, the display of the focus highlight is inconsistent:
1. If the dialog is opened via a button click, the highlight is not shown. The first interactive control on the dialog is focussed, but the highlight is not shown.
2. If the dialog is opened via a `KeyUp` event handler or in response to a `KeyboardAccelerator` invocation, the focus highlight _is_ shown.
### Steps to reproduce the bug
1. Create a new project in Visual Studio. Choose "Blank App, Packaged (WinUI 3 in Desktop)" as the project template.
2. Name the project "CheckboxTest".
3. Replace the `MainWindow.xaml` file contents with the XAML below:
``` xaml
```
4. Replace the `MainWindow.xaml.cs` file code with:
``` csharp
using System;
using System.Threading.Tasks;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;
namespace CheckboxTest;
public sealed partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
this.Content.KeyUp += Content_KeyUp;
}
private async void Content_KeyUp(object sender, KeyRoutedEventArgs e)
{
if (e.Key == Windows.System.VirtualKey.Delete)
{
if (await OpenDeleteDialog() == ContentDialogResult.Primary)
{
// ... do delete stuff
}
}
}
private async void ShowDialogButton_Click(object sender, RoutedEventArgs e)
{
if (await OpenDeleteDialog() == ContentDialogResult.Primary)
{
// ... do delete stuff
}
}
private async Task OpenDeleteDialog()
{
DeleteConfirmationDialog.XamlRoot = Content.XamlRoot;
return await DeleteConfirmationDialog.ShowAsync();
}
}
```
5. Run the project and click the "Show Dialog" button. Observe that the dialog is shown with no focus highlight present on the checkbox control:

6. Close the dialog by pressing Enter or selecting the "Cancel" button.
7. Press Delete. Observe that the dialog is shown with the first interactive element highlighted as the focussed control:

### Expected behavior
The display of the focus highlight should be consistent, i.e. independent of the method used to show the ContentDialog. I suggest not showing the highlight until the user uses Tab to move the focus around the dialog's controls.
### Screenshots
_No response_
### NuGet package version
None
### Windows version
Windows 11 (24H2): Build 26100
### Additional context
Additional context may be found on my StackOverflow question here: https://stackoverflow.com/questions/79376328/winui-3-how-to-set-focus-to-a-contentdialog-button/79382988
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the behavior using the MainWindow.xaml and MainWindow.xaml.cs samples, starting at OpenDeleteDialog and ContentDialog.ShowAsync. Compare opening the dialog from ShowDialogButton_Click with Content_KeyUp and the Delete keyboard event. Done means the focus highlight behavior is consistent for both opening paths and matches the stated keyboard-navigation expectation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- csharp
- Domain
- accessibility, desktop
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 42/100