From 03b4784bb864a314487a33ebcf2d41ac48012fe4 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 25 Oct 2026 10:50:11 -0700
Subject: [PATCH] Grr, didnt commit this

---
 .../custom-fields-query-dropdown.component.html        | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
index e7dd8352c..b04b207ad 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
@@ -35,7 +35,7 @@
   @if (getCustomFieldByID(atom.field)?.data_type === CustomFieldDataType.Date) {
     @let relativeDate = getRelativeDate(atom);
     <div class="d-flex gap-2 w-100 ms-0 mt-1">
-      <div class="btn-group btn-group-sm date-mode" role="group" aria-label="Date mode" i18n-aria-label>
+      <fieldset class="btn-group btn-group-sm flex-shrink-0 date-mode" aria-label="Date mode" i18n-aria-label>
         <input type="radio" class="btn-check" [id]="atom.id + '_fixed'" [name]="atom.id + '_dateMode'" [checked]="!relativeDate" (change)="toggleRelativeDate(atom)" [disabled]="disabled" aria-label="Fixed date" i18n-aria-label>
         <label class="btn btn-outline-secondary text-nowrap" [for]="atom.id + '_fixed'" title="Fixed date" i18n-title>
           <i-bs name="calendar"></i-bs><span class="d-none d-md-inline ms-2" i18n>Fixed</span>
@@ -44,7 +44,7 @@
         <label class="btn btn-outline-secondary text-nowrap" [for]="atom.id + '_relative'" title="Relative date" i18n-title>
           <i-bs name="clock-history"></i-bs><span class="d-none d-md-inline ms-2" i18n>Relative</span>
         </label>
-      </div>
+      </fieldset>
       <div class="input-group input-group-sm flex-grow-1">
         @if (relativeDate) {
           @if (relativeDate.unit.includes('{n}')) {
@@ -53,7 +53,8 @@
               (ngModelChange)="updateRelativeDate(atom, { amount: $event })"
               [ngModelOptions]="{standalone: true}" />
           }
-          <select class="form-select" aria-label="Unit" i18n-aria-label
+          <label class="visually-hidden" [for]="atom.id + '_unit'" i18n>Unit</label>
+          <select class="form-select" [id]="atom.id + '_unit'"
             [ngModel]="relativeDate.unit"
             (ngModelChange)="updateRelativeDate(atom, { unit: $event })"
             [ngModelOptions]="{standalone: true}">
@@ -115,6 +116,7 @@
 </ng-template>
 
 <ng-template #queryAtom let-atom="atom">
+  <label class="visually-hidden" [for]="atom.id + '_operator'" i18n>Operator</label>
   <div class="input-group input-group-sm">
     <ng-select #fieldSelects
       class="paperless-input-select"
@@ -128,7 +130,7 @@
       [appendTo]="selectAppendTo"
       (mousedown)="$event.stopImmediatePropagation()"
     ></ng-select>
-    <select class="w-25 form-select" [class.rounded-end]="hasDateValueRow(atom)" [(ngModel)]="atom.operator" [ngModelOptions]="{standalone: true}" [disabled]="disabled">
+    <select class="w-25 form-select" [id]="atom.id + '_operator'" [class.rounded-end]="hasDateValueRow(atom)" [(ngModel)]="atom.operator" [ngModelOptions]="{standalone: true}" [disabled]="disabled">
       @for (operator of getOperatorsForField(atom.field); track operator.label) {
         <option [ngValue]="operator.value">{{operator.label}}</option>
       }