Added labels to sub filter and fixed issue with dropdown list being aria hidden

Author: jschick04

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

@@ -2,9 +2,9 @@
 
 <div class="flex-center-aligned-row px-4">
     <div class="flex-align-center">
-        <BooleanSelect @bind-Value="Value.ShouldCompareAny" EnabledString="OR" DisabledString="AND" IsSingleColor="true" />
+        <BooleanSelect AriaLabel="Should Compare" @bind-Value="Value.ShouldCompareAny" EnabledString="OR" DisabledString="AND" IsSingleColor="true" />
 
-        <ValueSelect CssClass="input filter-dropdown" T="FilterCategory" @bind-Value="Value.Data.Category" ToStringFunc="x => x.ToFullString()">
+        <ValueSelect AriaLabel="Category" CssClass="input filter-dropdown" T="FilterCategory" @bind-Value="Value.Data.Category" ToStringFunc="x => x.ToFullString()">
             @foreach (FilterCategory item in Enum.GetValues(typeof(FilterCategory)))
             {
                 if (item == FilterCategory.Xml && !FilterService.IsXmlEnabled) { continue; }

src/EventLogExpert/Shared/Components/ValueSelect.razor

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

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

@@ -15,7 +15,6 @@ public sealed partial class ValueSelect<T> : BaseComponent<T>
     private readonly HashSet<T> _selectedValues = [];
 
     private ValueSelectItem<T>? _highlightedItem;
-    private bool _isOpen;
     private bool _preventDefault;
     private ElementReference _selectComponent;
 
@@ -42,8 +41,6 @@ public ValueSelectItem<T>? HighlightedItem
     [Parameter]
     public bool IsMultiSelect { get; set; }
 
-    public string IsOpen => _isOpen.ToString().ToLower();
-
     private string? DisplayString
     {
         get
@@ -90,17 +87,9 @@ public bool AddItem(ValueSelectItem<T> item)
 
     public void ClearSelected() => _selectedValues.Clear();
 
-    public async Task CloseDropDown()
-    {
-        _isOpen = false;
-        await JSRuntime.InvokeVoidAsync("closeDropdown", _selectComponent);
-    }
+    public async Task CloseDropDown() => await JSRuntime.InvokeVoidAsync("closeDropdown", _selectComponent);
 
-    public async Task OpenDropDown()
-    {
-        _isOpen = true;
-        await JSRuntime.InvokeVoidAsync("openDropdown", _selectComponent);
-    }
+    public async Task OpenDropDown() => await JSRuntime.InvokeVoidAsync("openDropdown", _selectComponent);
 
     public void RemoveItem(ValueSelectItem<T> item) => _items.Remove(item);
 

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

@@ -8,14 +8,14 @@ namespace EventLogExpert.Shared.Components;
 
 public sealed partial class ValueSelectItem<T> : IDisposable
 {
-    private bool _isSelected = false;
+    private bool _isSelected;
     private ValueSelect<T> _parent = null!;
 
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
     [Parameter]
-    public bool ClearItem { get; set; } = false;
+    public bool ClearItem { get; set; }
 
     [Parameter]
     public string CssClass { get; set; } = string.Empty;

src/EventLogExpert/wwwroot/js/dropdowns.js

@@ -10,6 +10,7 @@ window.registerDropdown = (root) => {
 
             dropdown.removeAttribute("data-toggle");
             dropdown.setAttribute("aria-expanded", "false");
+            dropdown.setAttribute("aria-hidden", "true");
 
             dropdown.style.position = false;
             dropdown.style.top = false;
@@ -40,6 +41,7 @@ window.registerDropdown = (root) => {
 
         dropdown.setAttribute("data-toggle", "");
         dropdown.setAttribute("aria-expanded", "true");
+        dropdown.setAttribute("aria-hidden", "false");
 
         scrollToSelectedItem();
     }
@@ -67,6 +69,7 @@ window.closeDropdown = (root) => {
 
     dropdown.removeAttribute("data-toggle");
     dropdown.setAttribute("aria-expanded", "false");
+    dropdown.setAttribute("aria-hidden", "true");
 
     dropdown.style.position = false;
     dropdown.style.top = false;
@@ -87,6 +90,7 @@ window.openDropdown = (root) => {
 
     dropdown.setAttribute("data-toggle", "");
     dropdown.setAttribute("aria-expanded", "true");
+    dropdown.setAttribute("aria-hidden", "false");
 
     scrollToSelectedItem(root);
 };