A few accessibility fixes (#9017)

* Add aria-label to buttons without it

* Horizontally-align property grid headers with content

* Change generated colors to fluent versions

* Revert color changes

* Add aria labels to tooltips

Author: adamint

src/Aspire.Dashboard/Components/Controls/GridValue.razor

@@ -47,7 +47,8 @@
         <span class="defaultHidden">
             <FluentButton Appearance="Appearance.Lightweight"
                           Disabled="@(ValueToVisualize is null && Value is null)"
-                          OnClick="OpenTextVisualizerAsync">
+                          OnClick="OpenTextVisualizerAsync"
+                          aria-label="@DialogsLoc[nameof(Dialogs.OpenInTextVisualizer)]">
                 <FluentIcon Icon="Icons.Regular.Size16.SlideSearch" />
             </FluentButton>
         </span>

src/Aspire.Dashboard/Components/Pages/Login.razor

@@ -32,7 +32,7 @@
                 <div class="token-entry-footer">
                     <a href="@NavigationManager.Uri" id="helpLink">@Loc[nameof(Dashboard.Resources.Login.WhereIsMyTokenLinkText)]</a>
                     <FluentButton Appearance="Appearance.Accent" Name="submit-token" Type="ButtonType.Submit">@Loc[nameof(Dashboard.Resources.Login.LogInButtonText)]</FluentButton>
-                    <FluentTooltip Anchor="helpLink" MaxWidth="650px">
+                    <FluentTooltip Anchor="helpLink" MaxWidth="650px" aria-label="https://go.microsoft.com/fwlink/?linkid=2265718">
                         <div class="token-help-container">
                             <div>
                                 <a href="/img/TokenExample.png" target="_blank">

src/Aspire.Dashboard/Components/Pages/Resources.razor

@@ -145,7 +145,7 @@
                                                     <span @onclick:stopPropagation="true" class="main-grid-expand-container @(context.IsCollapsed ? "main-grid-collapsed" : "main-grid-expanded")">
                                                         @if (context.Children.Count > 0)
                                                         {
-                                                            <FluentButton Appearance="Appearance.Lightweight" Class="main-grid-expand-button" OnClick="@(() => OnToggleCollapse(context))">
+                                                            <FluentButton aria-label="@ControlsStringsLoc[nameof(ControlsStrings.ToggleNesting)]" Appearance="Appearance.Lightweight" Class="main-grid-expand-button" OnClick="@(() => OnToggleCollapse(context))">
                                                                 <FluentIcon Icon="Icons.Regular.Size12.ChevronRight" Color="Color.Neutral" />
                                                             </FluentButton>
                                                         }

src/Aspire.Dashboard/Components/Pages/TraceDetail.razor

@@ -120,7 +120,7 @@
                                         <span @onclick:stopPropagation="true" class="main-grid-expand-container @(context.IsCollapsed ? "main-grid-collapsed" : "main-grid-expanded")">
                                             @if (context.Children.Count > 0)
                                             {
-                                                <FluentButton Appearance="Appearance.Lightweight" Class="main-grid-expand-button" OnClick="@(() => OnToggleCollapse(context))">
+                                                <FluentButton aria-label="@ControlStringsLoc[nameof(ControlsStrings.ToggleNesting)]" Appearance="Appearance.Lightweight" Class="main-grid-expand-button" OnClick="@(() => OnToggleCollapse(context))">
                                                     <FluentIcon Icon="Icons.Regular.Size12.ChevronRight" Color="Color.Neutral" />
                                                 </FluentButton>
                                             }

src/Aspire.Dashboard/Components/Pages/Traces.razor

@@ -126,14 +126,18 @@
                                         @{
                                             var items = overflow.ItemsOverflow.ToList();
                                         }
-                                        <FluentTooltip UseTooltipService="false" Anchor="@overflow.IdMoreButton">
-                                            @foreach (var item in items)
-                                            {
-                                                <div style="margin-top: 8px; margin-bottom: 8px;">
-                                                    @item.ChildContent
-                                                </div>
-                                            }
-                                        </FluentTooltip>
+
+                                        @if (items.Count > 0)
+                                        {
+                                            <FluentTooltip aria-label="@(string.Join(", ", items.Select(i => i.Text)))" UseTooltipService="false" Anchor="@overflow.IdMoreButton">
+                                                @foreach (var item in items)
+                                                {
+                                                    <div style="margin-top: 8px; margin-bottom: 8px;">
+                                                        @item.ChildContent
+                                                    </div>
+                                                }
+                                            </FluentTooltip>
+                                        }
                                     </OverflowTemplate>
                                 </FluentOverflow>
                             </AspireTemplateColumn>