From b4d8222975b3c357cb3d0eff83d008e3adfd90a0 Mon Sep 17 00:00:00 2001 From: qa46hx Date: Tue, 23 Jun 2020 14:27:09 +0200 Subject: [PATCH] fix(accordion): fix keyboard interaction --- packages/accordion/package.json | 36 +++++++++---------- packages/accordion/src/LionAccordion.js | 12 +++---- .../accordion/test/lion-accordion.test.js | 30 +++++++++------- 3 files changed, 40 insertions(+), 38 deletions(-) diff --git a/packages/accordion/package.json b/packages/accordion/package.json index 31d7205ee..7a891883f 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -2,41 +2,41 @@ "name": "@lion/accordion", "version": "0.1.1", "description": "Vertically stacked list of invokers that can be clicked to reveal or hide content associated with them.", + "license": "MIT", "author": "ing-bank", "homepage": "https://github.com/ing-bank/lion/", - "license": "MIT", - "publishConfig": { - "access": "public" - }, "repository": { "type": "git", "url": "https://github.com/ing-bank/lion.git", "directory": "packages/accordion" }, + "main": "index.js", + "module": "index.js", + "files": [ + "*.js", + "docs", + "src", + "test", + "translations" + ], "scripts": { "prepublishOnly": "../../scripts/npm-prepublish.js", "start": "cd ../../ && yarn dev-server --open packages/tabs/README.md", "test": "cd ../../ && yarn test:browser --grep \"packages/tabs/test/**/*.test.js\"", "test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/tabs/test/**/*.test.js\"" }, - "keywords": [ - "lion", - "web-components", - "accordion" - ], - "main": "index.js", - "module": "index.js", - "files": [ - "docs", - "src", - "test", - "translations", - "*.js" - ], "sideEffects": [ "lion-accordion.js" ], "dependencies": { "@lion/core": "0.7.2" + }, + "keywords": [ + "accordion", + "lion", + "web-components" + ], + "publishConfig": { + "access": "public" } } diff --git a/packages/accordion/src/LionAccordion.js b/packages/accordion/src/LionAccordion.js index ab5a772e2..9d86f5cfa 100644 --- a/packages/accordion/src/LionAccordion.js +++ b/packages/accordion/src/LionAccordion.js @@ -13,14 +13,14 @@ const setupInvoker = ({ element, uid, index, clickHandler, keydownHandler }) => element.firstElementChild.setAttribute('id', `invoker-${uid}`); element.firstElementChild.setAttribute('aria-controls', `content-${uid}`); element.firstElementChild.addEventListener('click', clickHandler); - element.firstElementChild.addEventListener('keyup', keydownHandler); + element.firstElementChild.addEventListener('keydown', keydownHandler); }; const cleanInvoker = (element, clickHandler, keydownHandler) => { element.firstElementChild.removeAttribute('id'); element.firstElementChild.removeAttribute('aria-controls'); element.firstElementChild.removeEventListener('click', clickHandler); - element.firstElementChild.removeEventListener('keyup', keydownHandler); + element.firstElementChild.removeEventListener('keydown', keydownHandler); }; const focusInvoker = element => { @@ -190,18 +190,14 @@ export class LionAccordion extends LitElement { case 'ArrowDown': case 'ArrowRight': e.preventDefault(); - if (this.focusedIndex + 1 >= this._pairCount) { - this.focusedIndex = 0; - } else { + if (this.focusedIndex + 2 <= this._pairCount) { this.focusedIndex += 1; } break; case 'ArrowUp': case 'ArrowLeft': e.preventDefault(); - if (this.focusedIndex <= 0) { - this.focusedIndex = this._pairCount - 1; - } else { + if (this.focusedIndex >= 1) { this.focusedIndex -= 1; } break; diff --git a/packages/accordion/test/lion-accordion.test.js b/packages/accordion/test/lion-accordion.test.js index 672e057fc..30f09e989 100644 --- a/packages/accordion/test/lion-accordion.test.js +++ b/packages/accordion/test/lion-accordion.test.js @@ -199,10 +199,12 @@ describe('', () => { const invokers = el.querySelectorAll('[slot=invoker]'); el.focusedIndex = 0; invokers[0].firstElementChild.dispatchEvent( - new KeyboardEvent('keyup', { key: 'ArrowRight' }), + new KeyboardEvent('keydown', { key: 'ArrowRight' }), ); expect(el.focusedIndex).to.equal(1); - invokers[0].firstElementChild.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' })); + invokers[0].firstElementChild.dispatchEvent( + new KeyboardEvent('keydown', { key: 'ArrowDown' }), + ); expect(el.focusedIndex).to.equal(2); }); @@ -219,9 +221,11 @@ describe('', () => { `); const invokers = el.querySelectorAll('[slot=invoker]'); el.focusedIndex = 2; - invokers[2].firstElementChild.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' })); + invokers[2].firstElementChild.dispatchEvent( + new KeyboardEvent('keydown', { key: 'ArrowLeft' }), + ); expect(el.focusedIndex).to.equal(1); - invokers[1].firstElementChild.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' })); + invokers[1].firstElementChild.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' })); expect(el.focusedIndex).to.equal(0); }); @@ -235,18 +239,18 @@ describe('', () => { `); const invokers = el.querySelectorAll('[slot=invoker]'); - invokers[1].firstElementChild.dispatchEvent(new KeyboardEvent('keyup', { key: 'Home' })); + invokers[1].firstElementChild.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home' })); expect(el.focusedIndex).to.equal(0); }); it('selects last invoker on [end]', async () => { const el = await fixture(basicAccordion); const invokers = el.querySelectorAll('[slot=invoker]'); - invokers[0].firstElementChild.dispatchEvent(new KeyboardEvent('keyup', { key: 'End' })); + invokers[0].firstElementChild.dispatchEvent(new KeyboardEvent('keydown', { key: 'End' })); expect(el.focusedIndex).to.equal(2); }); - it('selects first invoker on [arrow-right] if on last invoker', async () => { + it('stays on last invoker on [arrow-right]', async () => { const el = await fixture(html`

@@ -259,12 +263,12 @@ describe('', () => { `); const invokers = el.querySelectorAll('[slot=invoker]'); invokers[2].firstElementChild.dispatchEvent( - new KeyboardEvent('keyup', { key: 'ArrowRight' }), + new KeyboardEvent('keydown', { key: 'ArrowRight' }), ); - expect(el.focusedIndex).to.equal(0); + expect(el.focusedIndex).to.equal(2); }); - it('selects last invoker on [arrow-left] if on first invoker', async () => { + it('stays on first invoker on [arrow-left]', async () => { const el = await fixture(html`

@@ -276,8 +280,10 @@ describe('', () => { `); const invokers = el.querySelectorAll('[slot=invoker]'); - invokers[0].firstElementChild.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft' })); - expect(el.focusedIndex).to.equal(2); + invokers[0].firstElementChild.dispatchEvent( + new KeyboardEvent('keydown', { key: 'ArrowLeft' }), + ); + expect(el.focusedIndex).to.equal(null); }); });