fix(list): errors following a full review of the component (#DS-5402)

packages/components/core/option/optgroup.ts

@@ -14,6 +14,8 @@ let uniqueOptgroupIdCounter = 0;
     encapsulation: ViewEncapsulation.None,
     host: {
         class: 'kbq-optgroup',
+        role: 'group',
+        '[attr.aria-labelledby]': 'labelId',
         '[class.kbq-disabled]': 'disabled'
     },
     exportAs: 'kbqOptgroup'

packages/components/filter-bar/pipes/pipe-date.html

@@ -28,7 +28,12 @@
 <ng-template #content>
     @if (isListMode) {
         <div class="kbq-date-list">
-            <kbq-list-selection #listSelection [autoSelect]="false" [ngModel]="data.value?.name">
+            <kbq-list-selection
+                #listSelection
+                [autoSelect]="false"
+                [attr.aria-label]="data.name"
+                [ngModel]="data.value?.name"
+            >
                 <kbq-list-option (click)="showPeriod()" (keydown.enter)="showPeriod()">
                     {{ localeData.datePipe?.customPeriod }}
                     <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->

packages/components/filter-bar/pipes/pipe-datetime.html

@@ -28,7 +28,12 @@
 <ng-template #content>
     @if (isListMode) {
         <div class="kbq-date-list">
-            <kbq-list-selection #listSelection [autoSelect]="false" [ngModel]="data.value?.name">
+            <kbq-list-selection
+                #listSelection
+                [autoSelect]="false"
+                [attr.aria-label]="data.name"
+                [ngModel]="data.value?.name"
+            >
                 <kbq-list-option (click)="showPeriod()" (keydown.enter)="showPeriod()">
                     {{ localeData.datePipe?.customPeriod }}
                     <!-- prevents [kbq-icon] from matching icon slot in kbq-list-option, keeping chevron after label text -->

packages/components/list/_list-theme.scss

@@ -1,27 +1,40 @@
 @use '../core/styles/common/tokens';
 
+/// Emits the five themed colors of a list option for a single visual state.
+///
+/// Every color falls back to the matching `default`-state token: a state that only redefines the
+/// background then keeps the base text/icon/caption colors instead of resolving to an undefined
+/// `var()` — which, for inherited properties such as `color`, silently degrades to `inherit`.
 @mixin _kbq-list-item($state-name) {
-    --kbq-option-background: var(--kbq-list-#{$state-name}-container-background);
+    --kbq-option-background: var(--kbq-list-#{$state-name}-container-background, transparent);
 
-    background: var(--kbq-list-#{$state-name}-container-background);
+    background: var(--kbq-list-#{$state-name}-container-background, transparent);
 
     .kbq-list-text {
-        color: var(--kbq-list-#{$state-name}-text-color);
+        color: var(--kbq-list-#{$state-name}-text-color, var(--kbq-list-default-text-color));
     }
 
     .kbq-icon.kbq-empty {
-        color: var(--kbq-list-#{$state-name}-icon-color);
+        color: var(--kbq-list-#{$state-name}-icon-color, var(--kbq-list-default-icon-color));
     }
 
     .kbq-option-action .kbq-icon.kbq-empty {
-        color: var(--kbq-list-#{$state-name}-icon-button-color);
+        color: var(--kbq-list-#{$state-name}-icon-button-color, var(--kbq-list-default-icon-button-color));
     }
 
     .kbq-list-option-caption {
-        color: var(--kbq-list-#{$state-name}-caption-color);
+        color: var(--kbq-list-#{$state-name}-caption-color, var(--kbq-list-default-caption-color));
     }
 }
 
+/// Emits the background-only `:active` treatment. The active states deliberately reuse the colors of
+/// the state they sit on top of (default / selected), so only the background token is redefined.
+@mixin _kbq-list-item-active($state-name) {
+    --kbq-option-background: var(--kbq-list-#{$state-name}-container-background);
+
+    background: var(--kbq-list-#{$state-name}-container-background);
+}
+
 @mixin kbq-list-theme() {
     .kbq-list-option {
         @include _kbq-list-item(default);
@@ -34,10 +47,7 @@
 
         &.kbq-active:not(.kbq-disabled),
         &:active:not(.kbq-disabled) {
-            // the active state defines only a background token; the mixin would emit undefined text/icon/caption color vars
-            --kbq-option-background: var(--kbq-list-states-active-container-background);
-
-            background: var(--kbq-list-states-active-container-background);
+            @include _kbq-list-item-active(states-active);
         }
 
         &.kbq-selected:not(.kbq-disabled) {
@@ -50,9 +60,7 @@
 
             &.kbq-active,
             &:active {
-                --kbq-option-background: var(--kbq-list-states-selected-active-container-background);
-
-                background: var(--kbq-list-states-selected-active-container-background);
+                @include _kbq-list-item-active(states-selected-active);
             }
         }
 
@@ -78,9 +86,7 @@
 
             &.kbq-active,
             &:active {
-                --kbq-option-background: var(--kbq-list-multiple-states-selected-active-container-background);
-
-                background: var(--kbq-list-multiple-states-selected-active-container-background);
+                @include _kbq-list-item-active(multiple-states-selected-active);
             }
         }
 

packages/components/list/list-option.html

@@ -1,7 +1,8 @@
 @if (externalPseudoCheckbox) {
     <ng-content select="kbq-pseudo-checkbox" />
 } @else if (showCheckbox) {
-    <kbq-pseudo-checkbox [disabled]="disabled" [state]="selected ? 'checked' : 'unchecked'" />
+    <!-- Decorative: assistive technology reads the selected state from the option's own aria-selected. -->
+    <kbq-pseudo-checkbox aria-hidden="true" [disabled]="disabled" [state]="selected ? 'checked' : 'unchecked'" />
 }
 
 <ng-content select="[kbq-icon]" />