fix(combobox): enable screen readers to announce "no results" properly (

#1344) This is a backport a158ac7 (#1316) to 16.x. CDE-1515 Co-authored-by: Kevin Buhmann <[email protected]> Co-authored-by: mivaylo <[email protected]>
vmware-clarity · Apr 3, 2024 · 72f44b2 · 72f44b2
1 parent 6ca101e
commit 72f44b2
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
@@ -2869,6 +2869,8 @@ export class ClrOptions<T> implements AfterViewInit, LoadingListener, OnDestroy
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
+    get noResultsElementId(): string;
+    // (undocumented)
     optionSelectionService: OptionSelectionService<T>;
     // (undocumented)
     optionsId: string;

diff --git a/projects/angular/src/forms/combobox/combobox.ts b/projects/angular/src/forms/combobox/combobox.ts
@@ -302,7 +302,7 @@ export class ClrCombobox<T>
 
   getActiveDescendant() {
     const model = this.focusHandler.pseudoFocus.model;
-    return model ? model.id : null;
+    return model ? model.id : this.options?.noResultsElementId;
   }
 
   setDisabledState(): void {

diff --git a/projects/angular/src/forms/combobox/options.ts b/projects/angular/src/forms/combobox/options.ts
@@ -43,7 +43,7 @@ let nbOptionsComponents = 0;
     </div>
 
     <!-- Rendered if data set is empty -->
-    <div *ngIf="emptyOptions">
+    <div *ngIf="emptyOptions" [id]="noResultsElementId" role="option">
       <span class="clr-combobox-options-empty-text">
         {{ commonStrings.keys.comboboxNoResults }}
       </span>
@@ -104,6 +104,10 @@ export class ClrOptions<T> implements AfterViewInit, LoadingListener, OnDestroy
     return !this.optionSelectionService.loading && this.items.length === 0;
   }
 
+  get noResultsElementId() {
+    return `${this.optionsId}-no-results`;
+  }
+
   ngAfterViewInit() {
     this.focusHandler.listbox = this.el.nativeElement;