ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1484 from ing-bank/switch/arrow-keys

Browse source 
feat(switch): make key handlers protected, enable arrow keys
This commit is contained in:
Thijs Louisse 2021-08-20 19:41:20 +02:00 committed by GitHub
commit b0d32f2fbe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/perfect-bags-compare.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/switch': minor
---
Make keyup handlers protected, enables subclassers to switch using alternative keys.

22
packages/switch/src/LionSwitchButton.js
View file

@ -80,9 +80,9 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
/** @protected */ /** @protected */
this._toggleChecked = this._toggleChecked.bind(this); this._toggleChecked = this._toggleChecked.bind(this);
/** @private */ /** @private */
this.__handleKeydown = this.__handleKeydown.bind(this); this.__handleKeydown = this._handleKeydown.bind(this);
/** @private */ /** @private */
this.__handleKeyup = this.__handleKeyup.bind(this); this.__handleKeyup = this._handleKeyup.bind(this);
} }
connectedCallback() { connectedCallback() {
@ -121,23 +121,23 @@ export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
} }
/** /**
* @param {KeyboardEvent} e * @param {KeyboardEvent} ev
* @private * @protected
*/ */
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
__handleKeydown(e) { _handleKeydown(ev) {
// prevent "space" scrolling on "macOS" // prevent "space" scrolling on "macOS"
if (e.keyCode === 32) { if (ev.key === ' ') {
e.preventDefault(); ev.preventDefault();
} }
} }
/** /**
* @param {KeyboardEvent} e * @param {KeyboardEvent} ev
* @private * @protected
*/ */
__handleKeyup(e) { _handleKeyup(ev) {
if ([32 /* space */, 13 /* enter */].indexOf(e.keyCode) !== -1) { if ([' ', 'Enter'].includes(ev.key)) {
this._toggleChecked(); this._toggleChecked();
} }
} }

13
packages/switch/test/lion-switch-button.test.js
View file

@ -50,6 +50,19 @@ describe('lion-switch-button', () => {
expect(el.hasAttribute('checked')).to.be.false; expect(el.hasAttribute('checked')).to.be.false;
}); });
it('should toggle the value of "checked" on key-up', async () => {
expect(el.checked).to.be.false;
expect(el.hasAttribute('checked')).to.be.false;
el.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
await el.updateComplete;
expect(el.checked).to.be.true;
expect(el.hasAttribute('checked')).to.be.true;
el.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
await el.updateComplete;
expect(el.checked).to.be.false;
expect(el.hasAttribute('checked')).to.be.false;
});
it('can be disabled', async () => { it('can be disabled', async () => {
el.disabled = true; el.disabled = true;
expect(el.checked).to.be.false; expect(el.checked).to.be.false;