A11y + empty states: add AutomationProperties names to controls; overlay empty-state hints for Variables and History; add input Watermark.

src/AdvancedCalculator/Views/MainView.axaml

@@ -48,35 +48,56 @@
           <RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" />
         </Grid.RowDefinitions>
 
-        <!-- Variables list -->
+        <!-- Variables list with empty-state hint overlay -->
-        <ListBox Grid.Row="0" ItemsSource="{Binding Variables}" SelectedIndex="-1" HorizontalContentAlignment="Stretch">
+        <Grid Grid.Row="0">
-          <ListBox.ItemTemplate>
+          <ListBox ItemsSource="{Binding Variables}" SelectedIndex="-1" HorizontalContentAlignment="Stretch"
-            <DataTemplate x:DataType="m:VariableItem">
+                   AutomationProperties.Name="Variables list">
-              <Button Command="{Binding DataContext.InsertVariableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
+            <ListBox.ItemTemplate>
-                      CommandParameter="{Binding VariableName}"
+              <DataTemplate x:DataType="m:VariableItem">
-                      Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44">
+                <Button Command="{Binding DataContext.InsertVariableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
-                <Grid ColumnDefinitions="Auto,*,Auto">
+                        CommandParameter="{Binding VariableName}"
-                  <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
+                        Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
-                             FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
+                        AutomationProperties.Name="Insert variable">
-                  <TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
+                  <Grid ColumnDefinitions="Auto,*,Auto">
-                  <StackPanel Grid.Column="2" Spacing="6" VerticalAlignment="Center">
+                    <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
-                    <TextBlock Text="{Binding Value}" />
+                               FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
-                    <TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
+                    <TextBlock Grid.Column="1" Text="{Binding VariableName}" FontWeight="Bold" VerticalAlignment="Center" />
-                  </StackPanel>
+                    <StackPanel Grid.Column="2" Spacing="6" VerticalAlignment="Center">
-                </Grid>
+                      <TextBlock Text="{Binding Value}" />
-              </Button>
+                      <TextBlock IsVisible="{Binding IsExpression}" Text="{Binding ExpressionComputation}" FontStyle="Italic" />
-            </DataTemplate>
+                    </StackPanel>
-          </ListBox.ItemTemplate>
+                  </Grid>
-        </ListBox>
+                </Button>
+              </DataTemplate>
+            </ListBox.ItemTemplate>
+          </ListBox>
+          <TextBlock Text="No variables yet. Define with: x = 5"
+                     IsVisible="False"
+                     IsHitTestVisible="False"
+                     Opacity="0.6"
+                     HorizontalAlignment="Center" VerticalAlignment="Center">
+            <TextBlock.Styles>
+              <Style Selector="TextBlock">
+                <Style.Triggers>
+                  <DataTrigger Binding="{Binding Variables.Count}" Value="0">
+                    <Setter Property="IsVisible" Value="True" />
+                  </DataTrigger>
+                </Style.Triggers>
+              </Style>
+            </TextBlock.Styles>
+          </TextBlock>
+        </Grid>
 
         <!-- Function definitions -->
         <ListBox Grid.Row="1" BorderThickness="0" HorizontalContentAlignment="Stretch"
-                 ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}">
+                 ItemsSource="{x:Static m:FunctionDefinitionItem.DefinedFunctions}"
+                 AutomationProperties.Name="Functions list">
           <ListBox.ItemTemplate>
             <DataTemplate x:DataType="m:FunctionDefinitionItem">
               <Button Command="{Binding DataContext.InsertFunctionCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                       CommandParameter="{Binding FunctionName}"
-                      Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44">
+                      Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
+                      AutomationProperties.Name="Insert function">
                 <StackPanel Spacing="8">
                   <StackPanel Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
                     <TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" />
@@ -105,20 +126,38 @@
     <SplitView.Content>
       <Grid RowDefinitions="*,Auto">
         <!-- History -->
-        <ListBox Grid.Row="0" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}">
+        <Grid Grid.Row="0">
-          <ListBox.ItemTemplate>
+          <ListBox ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}"
-            <DataTemplate x:DataType="m:HistoryItem">
+                   AutomationProperties.Name="History list">
-              <Grid ColumnDefinitions="Auto,*" Margin="4,2">
+            <ListBox.ItemTemplate>
-                <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
+              <DataTemplate x:DataType="m:HistoryItem">
-                           FontSize="22" VerticalAlignment="Center" Margin="0,0,8,0" />
+                <Grid ColumnDefinitions="Auto,*" Margin="4,2">
-                <StackPanel Grid.Column="1">
+                  <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.ArrowRightDropCircle}"
-                  <TextBlock Text="{Binding Input}" />
+                             FontSize="22" VerticalAlignment="Center" Margin="0,0,8,0" />
-                  <TextBlock Text="{Binding Output}" FontWeight="Bold" />
+                  <StackPanel Grid.Column="1">
-                </StackPanel>
+                    <TextBlock Text="{Binding Input}" />
-              </Grid>
+                    <TextBlock Text="{Binding Output}" FontWeight="Bold" />
-            </DataTemplate>
+                  </StackPanel>
-          </ListBox.ItemTemplate>
+                </Grid>
-        </ListBox>
+              </DataTemplate>
+            </ListBox.ItemTemplate>
+          </ListBox>
+          <TextBlock Text="No history yet. Enter an expression and Evaluate."
+                     IsVisible="False"
+                     IsHitTestVisible="False"
+                     Opacity="0.6"
+                     HorizontalAlignment="Center" VerticalAlignment="Center">
+            <TextBlock.Styles>
+              <Style Selector="TextBlock">
+                <Style.Triggers>
+                  <DataTrigger Binding="{Binding History.Count}" Value="0">
+                    <Setter Property="IsVisible" Value="True" />
+                  </DataTrigger>
+                </Style.Triggers>
+              </Style>
+            </TextBlock.Styles>
+          </TextBlock>
+        </Grid>
 
         <!-- Input Row -->
         <Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*,Auto" Margin="4" ColumnSpacing="6">
@@ -127,19 +166,24 @@
                         IsVisible="{Binding $parent[Window].Bounds.Width,
                                             Converter={StaticResource WidthToBooleanConverter},
                                             ConverterParameter=640}"
-                        IsChecked="{Binding #RootSplit.IsPaneOpen}">
+                        IsChecked="{Binding #RootSplit.IsPaneOpen}"
+                        AutomationProperties.Name="Open side panel">
             <TextBlock Text="≡" FontSize="18"/>
           </ToggleButton>
 
           <!-- Toggle functions panel inside the pane -->
-          <Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0" MinHeight="40" MinWidth="40">
+          <Button Grid.Column="1" Command="{Binding ToggleFunctionsCommand}" Margin="0,0,6,0" MinHeight="40" MinWidth="40"
+                  AutomationProperties.Name="Toggle functions panel">
             <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
           </Button>
 
-          <TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinHeight="44"/>
+          <TextBox Grid.Column="2" Text="{Binding InputText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinHeight="44"
+                   AutomationProperties.Name="Expression input"
+                   Watermark="Type an expression (e.g., 2 + 2)"/>
           
           <!-- Explicit evaluate button for touch -->
-          <Button Grid.Column="3" Command="{Binding SubmitCommand}" MinHeight="44" Padding="16,8">
+          <Button Grid.Column="3" Command="{Binding SubmitCommand}" MinHeight="44" Padding="16,8"
+                  AutomationProperties.Name="Evaluate">
             <TextBlock Text="Evaluate"/>
           </Button>
         </Grid>