diff --git a/components/button/test/button-move.axe.js b/components/button/test/button-move.axe.js
index 8ab61b2a78d..bfc3ad81d29 100644
--- a/components/button/test/button-move.axe.js
+++ b/components/button/test/button-move.axe.js
@@ -29,4 +29,34 @@ describe('d2l-button-move', () => {
expect(description.innerText).to.equal('secondary');
});
+ it('partially disabled (up)', async() => {
+ const el = await fixture(html``);
+ await expect(el).to.be.accessible();
+ });
+
+ it('partially disabled (down)', async() => {
+ const el = await fixture(html``);
+ await expect(el).to.be.accessible();
+ });
+
+ it('partially disabled (left)', async() => {
+ const el = await fixture(html``);
+ await expect(el).to.be.accessible();
+ });
+
+ it('partially disabled (right)', async() => {
+ const el = await fixture(html``);
+ await expect(el).to.be.accessible();
+ });
+
+ it('autofocus', async() => {
+ const el = await fixture(html``);
+ await expect(el).to.be.accessible();
+ });
+
+ it('dark theme', async() => {
+ const el = await fixture(html``);
+ await expect(el).to.be.accessible();
+ });
+
});
diff --git a/components/button/test/button-move.test.js b/components/button/test/button-move.test.js
index 27ef932206c..4cb186ca05d 100644
--- a/components/button/test/button-move.test.js
+++ b/components/button/test/button-move.test.js
@@ -1,4 +1,4 @@
-import { clickElem, expect, fixture, html, oneEvent, runConstructor, sendKeysElem } from '@brightspace-ui/testing';
+import { aTimeout, clickElem, expect, fixture, html, oneEvent, runConstructor, sendKeysElem } from '@brightspace-ui/testing';
import { moveActions } from '../button-move.js';
describe('d2l-button-move', () => {
@@ -33,6 +33,85 @@ describe('d2l-button-move', () => {
});
});
+ it('does not bubble events', async() => {
+ const el = await fixture(html`
`);
+ const button = el.querySelector('d2l-button-move');
+ let bubbledEvent = false;
+ el.addEventListener('d2l-button-move-action', () => bubbledEvent = true);
+ await clickElem(button.shadowRoot.querySelector('.up-layer'));
+ expect(bubbledEvent).to.be.false;
+ });
+
+ });
+
+ describe('disabled states prevent events', () => {
+
+ [
+ { name: 'disabled-up prevents up click', disabledProp: 'disabledUp', action: el => clickElem(el.shadowRoot.querySelector('.up-layer')) },
+ { name: 'disabled-down prevents down click', disabledProp: 'disabledDown', action: el => clickElem(el.shadowRoot.querySelector('.down-layer')) },
+ { name: 'disabled-up prevents up key', disabledProp: 'disabledUp', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowUp') },
+ { name: 'disabled-down prevents down key', disabledProp: 'disabledDown', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowDown') },
+ { name: 'disabled-left prevents left key', disabledProp: 'disabledLeft', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowLeft') },
+ { name: 'disabled-right prevents right key', disabledProp: 'disabledRight', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'ArrowRight') },
+ { name: 'disabled-home prevents home key', disabledProp: 'disabledHome', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'Home') },
+ { name: 'disabled-home prevents ctrl-home key', disabledProp: 'disabledHome', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'Control+Home') },
+ { name: 'disabled-end prevents end key', disabledProp: 'disabledEnd', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'End') },
+ { name: 'disabled-end prevents ctrl-end key', disabledProp: 'disabledEnd', action: el => sendKeysElem(el.shadowRoot.querySelector('button'), 'press', 'Control+End') }
+ ].forEach(info => {
+ it(`${info.name}`, async() => {
+ const el = await fixture(html``);
+ el[info.disabledProp] = true;
+ await el.updateComplete;
+ let eventDispatched = false;
+ el.addEventListener('d2l-button-move-action', () => eventDispatched = true);
+ await info.action(el);
+ await aTimeout(50); // wait to ensure event is not dispatched
+ expect(eventDispatched).to.be.false;
+ });
+ });
+
+ });
+
+ describe('properties', () => {
+
+ it('button is disabled when all directions are disabled', async() => {
+ const el = await fixture(html``);
+ const button = el.shadowRoot.querySelector('button');
+ expect(button.disabled).to.be.true;
+ });
+
+ it('button is not disabled when only some directions are disabled', async() => {
+ const el = await fixture(html``);
+ const button = el.shadowRoot.querySelector('button');
+ expect(button.disabled).to.be.false;
+ });
+
+ it('text property sets aria-label and title', async() => {
+ const el = await fixture(html``);
+ const button = el.shadowRoot.querySelector('button');
+ expect(button.getAttribute('aria-label')).to.equal('Reorder Item');
+ expect(button.getAttribute('title')).to.equal('Reorder Item');
+ });
+
+ });
+
+ describe('focus', () => {
+
+ it('focus() method focuses the button', async() => {
+ const el = await fixture(html``);
+ el.focus();
+ const button = el.shadowRoot.querySelector('button');
+ expect(document.activeElement).to.equal(el);
+ expect(el.shadowRoot.activeElement).to.equal(button);
+ });
+
+ it('autofocus property focuses button on render', async() => {
+ const el = await fixture(html``);
+ await el.updateComplete;
+ const button = el.shadowRoot.querySelector('button');
+ expect(button.hasAttribute('autofocus')).to.be.true;
+ });
+
});
});