From 83f1dcef8b40fbafb842e1cdecb618da71fc3966 Mon Sep 17 00:00:00 2001 From: mricoul Date: Thu, 10 Oct 2024 11:24:34 +0200 Subject: [PATCH 1/2] fix (Dropdow): update focusedElement on open --- src/classes/Dropdown.js | 22 +++++++++++++--------- src/classes/Dropdown.test.js | 17 ++--------------- 2 files changed, 15 insertions(+), 24 deletions(-) diff --git a/src/classes/Dropdown.js b/src/classes/Dropdown.js index cb59291..d841a7f 100644 --- a/src/classes/Dropdown.js +++ b/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) diff --git a/src/classes/Dropdown.test.js b/src/classes/Dropdown.test.js index 6ca6bf3..6830d08 100644 --- a/src/classes/Dropdown.test.js +++ b/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' ) From c915abf90fd9f12660956aa55ca4af5f4048ca55 Mon Sep 17 00:00:00 2001 From: mricoul Date: Thu, 10 Oct 2024 11:24:42 +0200 Subject: [PATCH 2/2] chore (.gitignore): add test dir --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index ba5d265..b856ece 100644 --- a/.gitignore +++ b/.gitignore @@ -4,5 +4,8 @@ node_modules/ ## Build dist/ +## test +test-results/ + ## Use yarn instead package-lock.json