Fix a11y error for single select with search field position trigger (#…

…1866) * Fix a11y error for single select with search field position trigger * Fix lint * Add check for searchEnabled
cibernox · Dec 27, 2024 · f9e0ab0 · f9e0ab0
1 parent 5bf2ea0
commit f9e0ab0
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/ember-power-select/src/components/power-select.hbs b/ember-power-select/src/components/power-select.hbs
@@ -67,7 +67,7 @@
       role={{or @triggerRole "combobox"}}
       title={{@title}}
       id={{this.triggerId}}
-      tabindex={{and (not @disabled) (or @tabindex "0")}}
+      tabindex={{and (not @disabled) (or this.tabindex "0")}}
       ...attributes
     >
       {{#let

diff --git a/ember-power-select/src/components/power-select.ts b/ember-power-select/src/components/power-select.ts
@@ -370,12 +370,24 @@ export default class PowerSelectComponent extends Component<PowerSelectSignature
     return '';
   }
 
-  get searchFieldPosition(): string {
+  get searchFieldPosition(): TSearchFieldPosition {
     return this.args.searchFieldPosition === undefined
       ? 'before-options'
       : this.args.searchFieldPosition;
   }
 
+  get tabindex(): string | number {
+    if (
+      this.args.searchEnabled &&
+      this.args.tabindex === undefined &&
+      this.searchFieldPosition === 'trigger'
+    ) {
+      return '-1';
+    }
+
+    return this.args.tabindex || '0';
+  }
+
   // Actions
   @action
   handleOpen(_select: Select, e: Event): boolean | void {

diff --git a/ember-power-select/src/components/power-select/input.hbs b/ember-power-select/src/components/power-select/input.hbs
@@ -8,9 +8,9 @@
     class="ember-power-select-search-input-field"
     value={{@select.searchText}}
     role={{or @role "combobox"}}
-    aria-activedescendant={{@ariaActiveDescendant}}
-    aria-controls={{@listboxId}}
-    aria-owns={{@listboxId}}
+    aria-activedescendant={{if @select.isOpen @ariaActiveDescendant}}
+    aria-controls={{if @select.isOpen @listboxId}}
+    aria-owns={{if @select.isOpen @listboxId}}
     aria-autocomplete="list"
     aria-haspopup="listbox"
     aria-expanded={{if @select.isOpen "true" "false"}}

diff --git a/test-app/app/components/custom-trigger-with-search.ts b/test-app/app/components/custom-trigger-with-search.ts
@@ -17,6 +17,8 @@ export interface CustomTriggerWithSearchSignature {
 export default class CustomGroupComponent extends Component<CustomTriggerWithSearchSignature> {
   @action
   onSearch(evt: Event) {
-    this.args.select.actions.search((evt.target as HTMLInputElement).value ?? '');
+    this.args.select.actions.search(
+      (evt.target as HTMLInputElement).value ?? '',
+    );
   }
 }