Merge branch 'dev'

.gitignore

@@ -4,5 +4,8 @@ node_modules/
 ## Build
 dist/
 
+## test
+test-results/
+
 ## Use yarn instead
 package-lock.json

src/classes/Dropdown.js

@@ -248,21 +248,12 @@ class Dropdown extends AbstractDomElement {
 
     this.button.setAttribute('aria-expanded', 'true')
 
-    const nodeListItems = el.querySelectorAll('li')
     const nodeListSelectedItems = el.querySelectorAll('li[aria-selected="true"]')
 
     if (nodeListSelectedItems.length === 1) {
       this.updateFocusedListItem(el.querySelector('li[aria-selected="true"]'))
     }
 
-    if (nodeListSelectedItems.length === 0 && nodeListItems.length >= 1) {
-      this.focusedElement = el.querySelector('li:first-child')
-    }
-
-    if (this.focusedElement && nodeListSelectedItems.length === 0 && nodeListItems.length > 1) {
-      this.focusedElement.setAttribute('aria-selected', 'true')
-    }
-
     if (onOpen) {
       onOpen.bind(this)()
     }
@@ -433,6 +424,19 @@ function focusPreviousElement() {
  * @author Milan Ricoul
  */
 function focusNextElement() {
+  const el = this._element
+
+  if (!this.focusedElement) {
+    const nodeListItems = el.querySelectorAll('li')
+    const nodeListSelectedItems = el.querySelectorAll('li[aria-selected="true"]')
+
+    if (nodeListSelectedItems.length === 0 && nodeListItems.length >= 1) {
+      this.updateFocusedListItem(el.querySelector('li:first-child'))
+    }
+
+    return
+  }
+
   if (this.focusedElement && this.focusedElement.nextElementSibling) {
     this.updateFocusedListItem(this.focusedElement.nextElementSibling)
 

src/classes/Dropdown.test.js

@@ -12,20 +12,7 @@ test.describe('Dropdown', () => {
     expect(display).toBe('block')
   })
 
-  test('Click on the dropdown button, expect first list item has aria-selected attribute set to true.', async ({
-    page,
-  }) => {
-    await page.click('#dropdown-1 button')
-    const hasValidAriaSelected = await page.$eval(
-      '#dropdown-1 li:first-child',
-      (firstListItem) =>
-        firstListItem.hasAttribute('aria-selected') && firstListItem.getAttribute('aria-selected') === 'true'
-    )
-
-    expect(hasValidAriaSelected).toBe(true)
-  })
-
-  test('Focus the dropdown button, press Enter key once, press ArrowDown key twice, expect the third list item has aria-selected attribute set to true.', async ({
+  test('Focus the dropdown button, press Enter key once, press ArrowDown key twice, expect the second list item has aria-selected attribute set to true.', async ({
     page,
   }) => {
     await page.focus('#dropdown-1 button')
@@ -34,7 +21,7 @@ test.describe('Dropdown', () => {
     await page.keyboard.down('ArrowDown')
 
     const hasValidAriaSelected = await page.$eval(
-      '#dropdown-1 li:nth-child(3)',
+      '#dropdown-1 li:nth-child(2)',
       (thirdListItem) =>
         thirdListItem.hasAttribute('aria-selected') && thirdListItem.getAttribute('aria-selected') === 'true'
     )