Fixed aria labels on ValueSelect

Author: jschick04

src/EventLogExpert/Shared/Components/Filters/FilterRow.razor

@@ -43,7 +43,7 @@
             <div>
                 @if (Value.Data.Category is FilterCategory.Description)
                 {
-                    <TextInput aria-labelledby="@($"{Id}_Value")" CssClass="input filter-description" @bind-Value="@Value.Data.Value" />
+                    <TextInput CssClass="input filter-description" @bind-Value="@Value.Data.Value" />
                 }
                 else if (Value.Data.Evaluator == FilterEvaluator.MultiSelect)
                 {

src/EventLogExpert/Shared/Components/Filters/SubFilterRow.razor

@@ -24,7 +24,7 @@
         <label aria-label="Value" id="@($"{Id}_Value")">Value: </label>
         @if (Value.Data.Category is FilterCategory.Description)
         {
-            <TextInput aria-labelledby="@($"{Id}_Value")" CssClass="input filter-description" @bind-Value="@Value.Data.Value" />
+            <TextInput CssClass="input filter-description" @bind-Value="@Value.Data.Value" />
         }
         else if (Value.Data.Evaluator == FilterEvaluator.MultiSelect)
         {

src/EventLogExpert/Shared/Components/ValueSelect.razor

@@ -3,10 +3,10 @@
 @inherits BaseComponent<T>
 
 <div class="dropdown-input" @onkeydown="HandleKeyDown" @onkeydown:preventDefault="_preventDefault" @ref="_selectComponent">
-    <input aria-expanded="false" aria-label="@AriaLabel" aria-labelledby="@AriaLabelledBy" class="@CssClass" @oninput="OnInputChange"
-        readonly="@(!IsInput || IsMultiSelect)" role="listbox" tabindex="0" type="text" value="@DisplayString" />
+    <input aria-activedescendant="@HighlightedItem?.ItemId" aria-controls="@_itemId" aria-expanded="@IsOpen" aria-label="@AriaLabel" aria-labelledby="@AriaLabelledBy"
+        class="@CssClass" @oninput="OnInputChange" readonly="@(!IsInput || IsMultiSelect)" role="combobox" tabindex="0" type="text" value="@DisplayString" />
 
-    <div class="dropdown-list" tabindex="-1">
+    <div class="dropdown-list" id="@_itemId" role="listbox" tabindex="-1">
         <CascadingValue Value="this">
             @ChildContent
         </CascadingValue>

src/EventLogExpert/Shared/Components/ValueSelect.razor.cs

@@ -10,10 +10,12 @@ namespace EventLogExpert.Shared.Components;
 
 public sealed partial class ValueSelect<T> : BaseComponent<T>
 {
+    private readonly string _itemId = $"select_{Guid.NewGuid().ToString()[..8]}";
     private readonly List<ValueSelectItem<T>> _items = [];
     private readonly HashSet<T> _selectedValues = [];
 
     private ValueSelectItem<T>? _highlightedItem;
+    private bool _isOpen;
     private bool _preventDefault;
     private ElementReference _selectComponent;
 
@@ -38,7 +40,9 @@ public ValueSelectItem<T>? HighlightedItem
     public bool IsInput { get; set; }
 
     [Parameter]
-    public bool IsMultiSelect { get; set; } = false;
+    public bool IsMultiSelect { get; set; }
+
+    public string IsOpen => _isOpen.ToString().ToLower();
 
     private string? DisplayString
     {
@@ -86,9 +90,17 @@ public bool AddItem(ValueSelectItem<T> item)
 
     public void ClearSelected() => _selectedValues.Clear();
 
-    public async Task CloseDropDown() => await JSRuntime.InvokeVoidAsync("closeDropdown", _selectComponent);
+    public async Task CloseDropDown()
+    {
+        _isOpen = false;
+        await JSRuntime.InvokeVoidAsync("closeDropdown", _selectComponent);
+    }
 
-    public async Task OpenDropDown() => await JSRuntime.InvokeVoidAsync("openDropdown", _selectComponent);
+    public async Task OpenDropDown()
+    {
+        _isOpen = true;
+        await JSRuntime.InvokeVoidAsync("openDropdown", _selectComponent);
+    }
 
     public void RemoveItem(ValueSelectItem<T> item) => _items.Remove(item);
 

src/EventLogExpert/Shared/Components/ValueSelectItem.razor

@@ -1,7 +1,8 @@
 @typeparam T
 
-<div aria-selected="@_isSelected" class="@CssClass" highlighted="@(_parent.HighlightedItem?.Equals(this) ?? false)"
-    @onmousedown="SelectItem" @onmouseenter="HighlightItem" role="option" selected="@_isSelected">
+<div aria-selected="@_isSelected.ToString().ToLower()" class="@CssClass" highlighted="@(_parent.HighlightedItem?.Equals(this) ?? false)"
+    id="@ItemId" @onmousedown="SelectItem" @onmouseenter="HighlightItem" role="option">
+
     @if (ChildContent is not null)
     {
         @ChildContent

src/EventLogExpert/Shared/Components/ValueSelectItem.razor.cs

@@ -23,6 +23,8 @@ public sealed partial class ValueSelectItem<T> : IDisposable
     [Parameter]
     public bool IsDisabled { get; set; }
 
+    public string ItemId { get; } = $"_{Guid.NewGuid().ToString()[..8]}";
+
     [Parameter]
     public T Value { get; set; } = default!;
 

src/EventLogExpert/wwwroot/css/app.css

@@ -311,7 +311,7 @@ i.bi.bi-star-fill { color: var(--clr-yellow); }
         &:hover,
         &[highlighted] { background-color: var(--background-darkgray); }
 
-        &[selected] {
+        &[aria-selected="true"] {
             color: var(--background-darkgray);
             background-color: var(--clr-lightblue);
         }
@@ -391,7 +391,7 @@ i.bi.bi-star-fill { color: var(--clr-yellow); }
 
     &:hover { filter: brightness(0.9); }
 
-    &[selected] { filter: brightness(0.9); }
+    &[aria-selected="true"] { filter: brightness(0.9); }
 }
 
 @media (forced-colors: active) {