Fix screen readers trying to read IconElement in some cases

lepoco · Sep 24, 2024 · 7969f43 · 7969f43
1 parent 35d3b8c
commit 7969f43
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 0 deletions.
diff --git a/src/Wpf.Ui/Controls/Button/Button.xaml b/src/Wpf.Ui/Controls/Button/Button.xaml
@@ -195,6 +195,18 @@
                                     VerticalAlignment="Center"
                                     Content="{TemplateBinding Content}"
                                     TextElement.Foreground="{TemplateBinding Foreground}" />
+
+                                <!-- TextBlock added so that screen readers don't try to read Icon -->
+                                <TextBlock 
+                                   Grid.Column="0"
+                                   Grid.ColumnSpan="2"
+                                   Width="{Binding Width, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"
+                                   Margin="-10"
+                                   FontSize="1"
+                                   Opacity="0"
+                                   Text="{Binding AutomationProperties.Name, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"
+                                   Height="{Binding Height, RelativeSource={RelativeSource AncestorType={x:Type Button}}}"
+                                   Background="Black"/>
                             </Grid>
                         </Border>
                     </Border>

diff --git a/src/Wpf.Ui/Controls/Menu/MenuItem.xaml b/src/Wpf.Ui/Controls/Menu/MenuItem.xaml
@@ -74,6 +74,16 @@
                         ContentSource="Header"
                         RecognizesAccessKey="True"
                         TextElement.Foreground="{TemplateBinding Foreground}" />
+                    <!-- TextBlock added so that screen readers don't try to read Icon -->
+                    <TextBlock Grid.Column="0"
+                        Grid.ColumnSpan="3"
+                        Width="{Binding Width, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                        Height="{Binding Height, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                        Margin="-10"
+                        FontSize="1"
+                        Opacity="0"
+                        Text="{Binding AutomationProperties.Name, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                        Background="Black"/>
                 </Grid>
 
                 <Popup
@@ -181,6 +191,16 @@
                     ContentSource="Header"
                     RecognizesAccessKey="True"
                     TextElement.Foreground="{TemplateBinding Foreground}" />
+                <!-- TextBlock added so that screen readers don't try to read Icon -->
+                <TextBlock Grid.Column="0"
+                   Grid.ColumnSpan="3"
+                   Width="{Binding Width, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                   Height="{Binding Height, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                   Margin="-10"
+                   FontSize="1"
+                   Opacity="0"
+                   Text="{Binding AutomationProperties.Name, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                   Background="Black"/>
             </Grid>
         </Border>
         <ControlTemplate.Triggers>
@@ -264,6 +284,17 @@
                     FontSize="11"
                     Foreground="{DynamicResource TextFillColorDisabledBrush}"
                     Text="{TemplateBinding InputGestureText}" />
+
+                <!-- TextBlock added so that screen readers don't try to read Icon -->
+                <TextBlock Grid.Column="0"
+                   Grid.ColumnSpan="5"
+                   Width="{Binding Width, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                   Height="{Binding Height, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                   Margin="-10"
+                   FontSize="1"
+                   Opacity="0"
+                   Text="{Binding AutomationProperties.Name, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                   Background="Black"/>
             </Grid>
         </Border>
         <ControlTemplate.Triggers>
@@ -334,6 +365,17 @@
                             FontSize="{TemplateBinding FontSize}"
                             Symbol="ChevronRight20" />
                     </Grid>
+
+                    <!-- Fix double narration from mousing over the button and then the associated text -->
+                    <TextBlock Grid.Column="0"
+                        Grid.ColumnSpan="3"
+                        Width="{Binding Width, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                        Height="{Binding Height, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                        Margin="-10"
+                        FontSize="1"
+                        Opacity="0"
+                        Text="{Binding AutomationProperties.Name, RelativeSource={RelativeSource AncestorType={x:Type MenuItem}}}"
+                        Background="Black"/>
                 </Grid>
             </Border>