♿ a11y(dropdown): start focus from selected option (#1448)

* Create PR for #1446

* feat(a11y-dropdown): focus selected option when opening dropdown popup to improve a11y with keyboard navigation

* feat(a11y-dropdown): move to option list to be consumed by other parts (like combobox) in the future

* fix(dropdonw): adjust selection

* chore: fix condtion

* chore: update ts definitions

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Marco Zirkenbach <marco.zirkenbach@baloise.ch>
Co-authored-by: Gery Hirschfeld <gerhard.hirschfeld@baloise.ch>

Author: 3 people

.changeset/shy-birds-poke.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': minor
+---
+
+**dropdown**: focus selected option when navigating with opening dropdown popup

e2e/cypress/e2e/a11y/bal-dropdown.a11y.cy.ts

@@ -1,19 +1,16 @@
-import { selectors } from 'support/utils'
-
 describe('bal-dropdown', () => {
   beforeEach(() => {
     cy.pageA11y('/components/bal-dropdown/test/bal-dropdown.a11y.html')
     cy.platform('desktop')
     cy.waitForDesignSystem()
   })
 
-  it('closed state', () => {
+  it('inital state', () => {
     cy.get('main').testA11y()
   })
 
-  it('open state', () => {
+  it('selected state', () => {
     cy.getByLabelText('Year').click()
-    cy.get('main').testA11y()
     cy.getByRole('option', { name: 'v1990' }).click()
     cy.get('main').testA11y()
   })

packages/core/src/components.d.ts

@@ -2277,6 +2277,10 @@ export namespace Components {
           * @returns focusIndex
          */
         "focusPrevious": () => Promise<number>;
+        /**
+          * Focus the selected visible option in the list, if no option is selected it selects the first one
+         */
+        "focusSelected": () => Promise<number>;
         /**
           * Returns a list of options
          */

packages/core/src/components/bal-option-list/bal-option-list.tsx

@@ -115,6 +115,22 @@ export class OptionList implements ComponentInterface, Loggable {
    * ------------------------------------------------------
    */
 
+  /**
+   * Focus the selected visible option in the list, if no option is selected it selects the first one
+   */
+  @Method() async focusSelected(): Promise<number> {
+    const options = this.options
+    const indexToFocus = this.getSelectedOptionIndex(options)
+
+    if (indexToFocus > 0) {
+      this.updateFocus(options, indexToFocus)
+      await waitAfterFramePaint()
+      return indexToFocus
+    } else {
+      return await this.focusFirst()
+    }
+  }
+
   /**
    * Focus the first visible option in the list
    * @returns focusIndex
@@ -430,10 +446,20 @@ export class OptionList implements ComponentInterface, Loggable {
     return undefined
   }
 
+  private getSelectedOptionIndex(options: HTMLBalOptionElement[]): number {
+    for (let index = 0; index < options.length; index++) {
+      const option = options[index]
+      if (option.selected && !option.hidden) {
+        return index
+      }
+    }
+    return this.focusIndex
+  }
+
   private getFirstOptionIndex(options: HTMLBalOptionElement[]): number {
     for (let index = 0; index < options.length; index++) {
       const option = options[index]
-      if (!option.disabled) {
+      if (!option.disabled && !option.hidden) {
         return index
       }
     }
@@ -516,7 +542,6 @@ export class OptionList implements ComponentInterface, Loggable {
           ...block.class(),
         }}
         id={this.inputId}
-        tabIndex={-1}
       >
         <div
           role="listbox"

packages/core/src/utils/dropdown/popup.ts

@@ -30,7 +30,7 @@ export class DropdownPopupUtil {
     }
   }
 
-  expandList() {
+  async expandList() {
     if (this.component.panelEl) {
       this.component.panelCleanup = autoUpdate(
         this.component.el,
@@ -39,7 +39,7 @@ export class DropdownPopupUtil {
       )
     }
     this.component.isExpanded = true
-    this.component.listEl?.focusFirst()
+    await this.component.listEl?.focusSelected()
   }
 
   collapseList() {