Fix context menu keyboard selection. (#16354)

When opening a context menu and pressing the "arrow down" key, the first menu item was not selected. This issue was introduced by #11287. The fix is to make the `ContextMenu` focusable.

Added an integration test to try to prevent regressions.

Co-authored-by: Max Katz <maxkatz6@outlook.com>

samples/IntegrationTestApp/MainWindow.axaml

@@ -94,6 +94,19 @@
         </StackPanel>
       </TabItem>
 
+      <TabItem Header="ContextMenu">
+        <StackPanel>
+          <Button Name="ShowContextMenu" Content="Right-click to show context menu.">
+            <Button.ContextMenu>
+              <ContextMenu>
+                <MenuItem Name="ContextMenuItem1" Header="Item 1"/>
+                <MenuItem Name="ContextMenuItem2" Header="Item 2"/>
+              </ContextMenu>
+            </Button.ContextMenu>
+          </Button>
+        </StackPanel>
+      </TabItem>
+
       <TabItem Header="Gestures">
         <DockPanel>
           <DockPanel DockPanel.Dock="Top">

src/Avalonia.Themes.Fluent/Controls/ContextMenu.xaml

@@ -38,6 +38,7 @@
     <Setter Property="BorderBrush" Value="{DynamicResource MenuFlyoutPresenterBorderBrush}" />
     <Setter Property="BorderThickness" Value="{DynamicResource MenuFlyoutPresenterBorderThemeThickness}" />
     <Setter Property="CornerRadius" Value="{DynamicResource OverlayCornerRadius}" />
+    <Setter Property="Focusable" Value="True" />
     <Setter Property="MaxWidth" Value="{DynamicResource FlyoutThemeMaxWidth}" />
     <Setter Property="MinHeight" Value="{DynamicResource MenuFlyoutThemeMinHeight}" />
     <Setter Property="Padding" Value="{DynamicResource MenuFlyoutPresenterThemePadding}" />

src/Avalonia.Themes.Simple/Controls/ContextMenu.xaml

@@ -6,6 +6,7 @@
     <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
     <Setter Property="BorderBrush" Value="{DynamicResource ThemeBorderMidBrush}" />
     <Setter Property="BorderThickness" Value="1" />
+    <Setter Property="Focusable" Value="True" />
     <Setter Property="Padding" Value="4,2" />
     <Setter Property="TextBlock.FontSize" Value="{DynamicResource FontSizeNormal}" />
     <Setter Property="TextBlock.FontWeight" Value="Normal" />

tests/Avalonia.IntegrationTests.Appium/ContextMenuTests.cs

@@ -0,0 +1,36 @@
+using OpenQA.Selenium;
+using OpenQA.Selenium.Appium;
+using OpenQA.Selenium.Interactions;
+using Xunit;
+
+namespace Avalonia.IntegrationTests.Appium
+{
+    [Collection("Default")]
+    public class ContextMenuTests
+    {
+        private readonly AppiumDriver<AppiumWebElement> _session;
+
+        public ContextMenuTests(DefaultAppFixture fixture)
+        {
+            _session = fixture.Session;
+
+            var tabs = _session.FindElementByAccessibilityId("MainTabs");
+            var tab = tabs.FindElementByName("ContextMenu");
+            tab.Click();
+        }
+        
+        [PlatformFact(TestPlatforms.Windows)]
+        public void Select_First_Item_With_Down_Arrow_Key()
+        {
+            var control = _session.FindElementByAccessibilityId("ShowContextMenu");
+
+            new Actions(_session)
+                .ContextClick(control)
+                .SendKeys(Keys.ArrowDown)
+                .Perform();
+
+            var clickedMenuItem = _session.FindElementByAccessibilityId("ContextMenuItem1");
+            Assert.True(clickedMenuItem.GetIsFocused());
+        }
+    }
+}

tests/Avalonia.IntegrationTests.Appium/ElementExtensions.cs

@@ -58,8 +58,7 @@ namespace Avalonia.IntegrationTests.Appium
         {
             if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows))
             {
-                var active = element.WrappedDriver.SwitchTo().ActiveElement() as AppiumWebElement;
-                return element.Id == active?.Id;
+                return element.GetAttribute("HasKeyboardFocus") == "True";
             }
             else
             {