wagesj45/advanced-calculator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Codex CLI 2025-08-27 03:07:30 -05:00
commit a212870d09
1 changed files with 84 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/AdvancedCalculator/Views/MainView.axaml
View file

@ -48,13 +48,16 @@
<RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" /> <RowDefinition Height="{Binding IsFunctionsPanelOpen, Converter={StaticResource BoolToGridLengthConverter}}" />
</Grid.RowDefinitions> </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 ItemsSource="{Binding Variables}" SelectedIndex="-1" HorizontalContentAlignment="Stretch"
AutomationProperties.Name="Variables list">
<ListBox.ItemTemplate> <ListBox.ItemTemplate>
<DataTemplate x:DataType="m:VariableItem"> <DataTemplate x:DataType="m:VariableItem">
<Button Command="{Binding DataContext.InsertVariableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" <Button Command="{Binding DataContext.InsertVariableCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
CommandParameter="{Binding VariableName}" CommandParameter="{Binding VariableName}"
Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"> Background="Transparent" BorderThickness="0" Padding="8" MinHeight="44"
AutomationProperties.Name="Insert variable">
<Grid ColumnDefinitions="Auto,*,Auto"> <Grid ColumnDefinitions="Auto,*,Auto">
<TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}" <TextBlock Grid.Column="0" FontFamily="{StaticResource MDI}"
FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" /> FontSize="22" Text="{Binding Icon}" VerticalAlignment="Center" Margin="0,0,8,0" />
@ -68,15 +71,33 @@
</DataTemplate> </DataTemplate>
</ListBox.ItemTemplate> </ListBox.ItemTemplate>
</ListBox> </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 --> <!-- Function definitions -->
<ListBox Grid.Row="1" BorderThickness="0" HorizontalContentAlignment="Stretch" <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> <ListBox.ItemTemplate>
<DataTemplate x:DataType="m:FunctionDefinitionItem"> <DataTemplate x:DataType="m:FunctionDefinitionItem">
<Button Command="{Binding DataContext.InsertFunctionCommand, RelativeSource={RelativeSource AncestorType=UserControl}}" <Button Command="{Binding DataContext.InsertFunctionCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
CommandParameter="{Binding FunctionName}" 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 Spacing="8">
<StackPanel Orientation="Horizontal" Spacing="8" VerticalAlignment="Center"> <StackPanel Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
<TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" /> <TextBlock FontFamily="{StaticResource MDI}" Text="{Binding Icon}" />
@ -105,7 +126,9 @@
<SplitView.Content> <SplitView.Content>
<Grid RowDefinitions="*,Auto"> <Grid RowDefinitions="*,Auto">
<!-- History --> <!-- History -->
<ListBox Grid.Row="0" ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}"> <Grid Grid.Row="0">
<ListBox ItemsSource="{Binding History}" SelectedIndex="{Binding SelectedHistoryIndex}"
AutomationProperties.Name="History list">
<ListBox.ItemTemplate> <ListBox.ItemTemplate>
<DataTemplate x:DataType="m:HistoryItem"> <DataTemplate x:DataType="m:HistoryItem">
<Grid ColumnDefinitions="Auto,*" Margin="4,2"> <Grid ColumnDefinitions="Auto,*" Margin="4,2">
@ -119,6 +142,22 @@
</DataTemplate> </DataTemplate>
</ListBox.ItemTemplate> </ListBox.ItemTemplate>
</ListBox> </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 --> <!-- Input Row -->
<Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*,Auto" Margin="4" ColumnSpacing="6"> <Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,*,Auto" Margin="4" ColumnSpacing="6">
@ -127,19 +166,24 @@
IsVisible="{Binding $parent[Window].Bounds.Width, IsVisible="{Binding $parent[Window].Bounds.Width,
Converter={StaticResource WidthToBooleanConverter}, Converter={StaticResource WidthToBooleanConverter},
ConverterParameter=640}" ConverterParameter=640}"
IsChecked="{Binding #RootSplit.IsPaneOpen}"> IsChecked="{Binding #RootSplit.IsPaneOpen}"
AutomationProperties.Name="Open side panel">
<TextBlock Text="≡" FontSize="18"/> <TextBlock Text="≡" FontSize="18"/>
</ToggleButton> </ToggleButton>
<!-- Toggle functions panel inside the pane --> <!-- 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}" /> <TextBlock FontFamily="{StaticResource MDI}" Text="{x:Static m:IconFont.Function}" />
</Button> </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 --> <!-- 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"/> <TextBlock Text="Evaluate"/>
</Button> </Button>
</Grid> </Grid>