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

Merge pull request #1745 from ing-bank/feature/accordion-focus-handling

Browse source 
fix: fixed focus handling, focus now jumps from header to panel when …
This commit is contained in:
Danny Moerkerke 2022-08-15 09:13:24 +02:00 committed by GitHub
commit da4652e2b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 130 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/lucky-moose-count.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/accordion': minor
---
focus now jumps from header to panel when tabbing

2
docs/components/accordion/overview.md
View file

@ -28,7 +28,7 @@ class MyComponent extends ScopedElementsMixin(LitElement) {
decrease gradually during development, whereas volatile aroma compounds tend to peak in
mid– to late–season development. Taste quality tends to improve later in harvests when
there is a higher sugar/acid ratio with less bitterness. As a citrus fruit, the orange
is acidic, with pH levels ranging from 2.9 to 4.0.
is acidic, with pH levels ranging from 2.9 to 4.0. <a href="#">Link</a>
</p>
<p>
Sensory qualities vary according to genetic background, environmental conditions during

67
packages/accordion/src/LionAccordion.js
View file

@ -43,21 +43,21 @@ export class LionAccordion extends LitElement {
flex-direction: column;
}
.accordion ::slotted([slot='invoker']) {
.accordion [slot='invoker'] {
margin: 0;
}
.accordion ::slotted([slot='invoker'][expanded]) {
.accordion [slot='invoker'][expanded] {
font-weight: bold;
}
.accordion ::slotted([slot='content']) {
.accordion [slot='content'] {
margin: 0;
visibility: hidden;
display: none;
}
.accordion ::slotted([slot='content'][expanded]) {
.accordion [slot='content'][expanded] {
visibility: visible;
display: block;
}
@ -129,6 +129,7 @@ export class LionAccordion extends LitElement {
<div class="accordion">
<slot name="invoker"></slot>
<slot name="content"></slot>
<slot name="_accordion"></slot>
</div>
`;
}
@ -137,12 +138,16 @@ export class LionAccordion extends LitElement {
* @private
*/
__setupSlots() {
const invokerSlot = this.shadowRoot?.querySelector('slot[name=invoker]');
const invokerSlot = /** @type {HTMLSlotElement} */ (
this.shadowRoot?.querySelector('slot[name=invoker]')
);
const handleSlotChange = () => {
this.__cleanStore();
this.__setupStore();
this.__updateFocused();
this.__updateExpanded();
if (invokerSlot.assignedNodes().length > 0) {
this.__cleanStore();
this.__setupStore();
this.__updateFocused();
this.__updateExpanded();
}
};
if (invokerSlot) {
invokerSlot.addEventListener('slotchange', handleSlotChange);
@ -153,12 +158,20 @@ export class LionAccordion extends LitElement {
* @private
*/
__setupStore() {
const invokers = /** @type {HTMLElement[]} */ (
Array.from(this.querySelectorAll('[slot="invoker"]'))
);
const contents = /** @type {HTMLElement[]} */ (
Array.from(this.querySelectorAll('[slot="content"]'))
);
const accordion = this.shadowRoot?.querySelector('slot[name=_accordion]');
const existingInvokers = accordion ? accordion.querySelectorAll('[slot=invoker]') : [];
const existingContent = accordion ? accordion.querySelectorAll('[slot=content]') : [];
const invokers = /** @type {HTMLElement[]} */ ([
...Array.from(existingInvokers),
...Array.from(this.querySelectorAll('[slot="invoker"]')),
]);
const contents = /** @type {HTMLElement[]} */ ([
...Array.from(existingContent),
...Array.from(this.querySelectorAll('[slot="content"]')),
]);
if (invokers.length !== contents.length) {
// eslint-disable-next-line no-console
console.warn(
@ -184,6 +197,30 @@ export class LionAccordion extends LitElement {
this._collapse(entry);
this.__store.push(entry);
});
this.__rearrangeInvokersAndContent();
}
/**
* @private
*
* Moves all invokers and content to slot[name=_accordion] in correct order so focus works
* correctly when the user tabs.
*/
__rearrangeInvokersAndContent() {
const invokers = /** @type {HTMLElement[]} */ (
Array.from(this.querySelectorAll('[slot="invoker"]'))
);
const contents = /** @type {HTMLElement[]} */ (
Array.from(this.querySelectorAll('[slot="content"]'))
);
const accordion = this.shadowRoot?.querySelector('slot[name=_accordion]');
if (accordion) {
invokers.forEach((invoker, index) => {
accordion.insertAdjacentElement('beforeend', invoker);
accordion.insertAdjacentElement('beforeend', contents[index]);
});
}
}
/**

108
packages/accordion/test/lion-accordion.test.js
View file

@ -18,6 +18,33 @@ const basicAccordion = html`
</lion-accordion>
`;
/**
* @param {Element} el
*/
function getAccordionChildren(el) {
const slot = el.shadowRoot?.querySelector('slot[name=_accordion]');
return slot ? slot.children : [];
}
/**
* @param {Element} el
*/
function getInvokers(el) {
const slot = el.shadowRoot?.querySelector('slot[name=_accordion]');
return slot ? slot.querySelectorAll('[slot=invoker]') : [];
}
/**
* @param {Element} el
*/
function getContents(el) {
const slot = el.shadowRoot?.querySelector('slot[name=_accordion]');
return slot ? slot.querySelectorAll('[slot=content]') : [];
}
describe('<lion-accordion>', () => {
describe('Accordion', () => {
it('sets expanded to [] by default', async () => {
@ -37,15 +64,16 @@ describe('<lion-accordion>', () => {
`)
);
expect(el.expanded).to.deep.equal([1]);
expect(
Array.from(el.children).find(
Array.from(getAccordionChildren(el)).find(
child => child.slot === 'invoker' && child.hasAttribute('expanded'),
)?.textContent,
).to.equal('invoker 2');
el.expanded = [0];
expect(
Array.from(el.children).find(
Array.from(getAccordionChildren(el)).find(
child => child.slot === 'invoker' && child.hasAttribute('expanded'),
)?.textContent,
).to.equal('invoker 1');
@ -53,7 +81,7 @@ describe('<lion-accordion>', () => {
it('has [expanded] on current expanded invoker which serves as styling hook', async () => {
const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
el.expanded = [0];
expect(invokers[0]).to.have.attribute('expanded');
expect(invokers[1]).to.not.have.attribute('expanded');
@ -65,7 +93,7 @@ describe('<lion-accordion>', () => {
it('has [expanded] on current expanded invoker first child which serves as styling hook', async () => {
const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
el.expanded = [0];
expect(invokers[0].firstElementChild).to.have.attribute('expanded');
expect(invokers[1].firstElementChild).to.not.have.attribute('expanded');
@ -118,14 +146,14 @@ describe('<lion-accordion>', () => {
);
expect(el.focusedIndex).to.equal(1);
expect(
Array.from(el.children).find(
Array.from(getAccordionChildren(el)).find(
child => child.slot === 'invoker' && child.firstElementChild?.hasAttribute('focused'),
)?.textContent,
).to.equal('invoker 2');
el.focusedIndex = 0;
expect(
Array.from(el.children).find(
Array.from(getAccordionChildren(el)).find(
child => child.slot === 'invoker' && child.firstElementChild?.hasAttribute('focused'),
)?.textContent,
).to.equal('invoker 1');
@ -133,7 +161,7 @@ describe('<lion-accordion>', () => {
it('has [focused] on current focused invoker first child which serves as styling hook', async () => {
const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
el.focusedIndex = 0;
expect(invokers[0]).to.not.have.attribute('focused');
expect(invokers[1]).to.not.have.attribute('focused');
@ -159,14 +187,19 @@ describe('<lion-accordion>', () => {
describe('Accordion Contents (slot=content)', () => {
it('are visible when corresponding invoker is expanded', async () => {
const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
const contents = el.querySelectorAll('[slot=content]');
el.expanded = [0];
expect(contents[0]).to.be.visible;
expect(contents[1]).to.be.not.visible;
el.expanded = [1];
expect(contents[0]).to.be.not.visible;
expect(contents[1]).to.be.visible;
const contents = getContents(el);
setTimeout(() => {
expect(contents[0]).to.be.visible;
expect(contents[1]).to.be.not.visible;
el.expanded = [1];
expect(contents[0]).to.be.not.visible;
expect(contents[1]).to.be.visible;
}, 250);
});
it.skip('have a DOM structure that allows them to be animated ', async () => {});
@ -183,21 +216,21 @@ describe('<lion-accordion>', () => {
describe('User interaction', () => {
it('opens a invoker on click', async () => {
const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
invokers[1].firstElementChild?.dispatchEvent(new Event('click'));
expect(el.expanded).to.deep.equal([1]);
});
it('selects a invoker on click', async () => {
const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
invokers[1].firstElementChild?.dispatchEvent(new Event('click'));
expect(el.focusedIndex).to.equal(1);
});
it.skip('opens/close invoker on [enter] and [space]', async () => {
const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
invokers[0].firstElementChild?.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
expect(el.expanded).to.deep.equal([0]);
invokers[0].firstElementChild?.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
@ -206,7 +239,7 @@ describe('<lion-accordion>', () => {
it('selects next invoker on [arrow-right] and [arrow-down]', async () => {
const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
el.focusedIndex = 0;
invokers[0].firstElementChild?.dispatchEvent(
new KeyboardEvent('keydown', { key: 'ArrowRight' }),
@ -231,7 +264,7 @@ describe('<lion-accordion>', () => {
</lion-accordion>
`)
);
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
el.focusedIndex = 2;
invokers[2].firstElementChild?.dispatchEvent(
new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
@ -254,14 +287,14 @@ describe('<lion-accordion>', () => {
</lion-accordion>
`)
);
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
invokers[1].firstElementChild?.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home' }));
expect(el.focusedIndex).to.equal(0);
});
it('selects last invoker on [end]', async () => {
const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
invokers[0].firstElementChild?.dispatchEvent(new KeyboardEvent('keydown', { key: 'End' }));
expect(el.focusedIndex).to.equal(2);
});
@ -279,7 +312,7 @@ describe('<lion-accordion>', () => {
</lion-accordion>
`)
);
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
invokers[2].firstElementChild?.dispatchEvent(
new KeyboardEvent('keydown', { key: 'ArrowRight' }),
);
@ -299,7 +332,7 @@ describe('<lion-accordion>', () => {
</lion-accordion>
`)
);
const invokers = el.querySelectorAll('[slot=invoker]');
const invokers = getInvokers(el);
invokers[0].firstElementChild?.dispatchEvent(
new KeyboardEvent('keydown', { key: 'ArrowLeft' }),
);
@ -324,13 +357,14 @@ describe('<lion-accordion>', () => {
}
el.expanded = [4];
await el.updateComplete;
expect(
Array.from(el.children).find(
Array.from(getAccordionChildren(el)).find(
child => child.slot === 'invoker' && child.hasAttribute('expanded'),
)?.textContent,
).to.equal('invoker 5');
expect(
Array.from(el.children).find(
Array.from(getAccordionChildren(el)).find(
child => child.slot === 'content' && child.hasAttribute('expanded'),
)?.textContent,
).to.equal('content 5');
@ -375,12 +409,12 @@ describe('<lion-accordion>', () => {
<div slot="content">content 2</div>
</lion-accordion>
`);
expect(Array.from(el.children).find(child => child.slot === 'content')).to.not.have.attribute(
'tabindex',
);
expect(Array.from(el.children).find(child => child.slot === 'content')).to.not.have.attribute(
'tabindex',
);
expect(
Array.from(getAccordionChildren(el)).find(child => child.slot === 'content'),
).to.not.have.attribute('tabindex');
expect(
Array.from(getAccordionChildren(el)).find(child => child.slot === 'content'),
).to.not.have.attribute('tabindex');
});
describe('Invokers', () => {
@ -393,8 +427,8 @@ describe('<lion-accordion>', () => {
<div id="p2" slot="content">content 2</div>
</lion-accordion>
`);
const invokers = el.querySelectorAll('[slot=invoker]');
const contents = el.querySelectorAll('[slot=content]');
const invokers = getInvokers(el);
const contents = getContents(el);
expect(invokers[0].firstElementChild?.getAttribute('aria-controls')).to.equal(
contents[0].id,
);
@ -411,7 +445,8 @@ describe('<lion-accordion>', () => {
</lion-accordion>
`);
expect(
Array.from(el.children).find(child => child.slot === 'invoker')?.firstElementChild,
Array.from(getAccordionChildren(el)).find(child => child.slot === 'invoker')
?.firstElementChild,
).to.have.attribute('aria-expanded', 'false');
});
@ -426,7 +461,8 @@ describe('<lion-accordion>', () => {
);
el.expanded = [0];
expect(
Array.from(el.children).find(child => child.slot === 'invoker')?.firstElementChild,
Array.from(getAccordionChildren(el)).find(child => child.slot === 'invoker')
?.firstElementChild,
).to.have.attribute('aria-expanded', 'true');
});
});
@ -441,8 +477,8 @@ describe('<lion-accordion>', () => {
<div slot="content">content 2</div>
</lion-accordion>
`);
const contents = el.querySelectorAll('[slot=content]');
const invokers = el.querySelectorAll('[slot=invoker]');
const contents = getContents(el);
const invokers = getInvokers(el);
expect(contents[0]).to.have.attribute('aria-labelledby', invokers[0].firstElementChild?.id);
expect(contents[1]).to.have.attribute('aria-labelledby', invokers[1].firstElementChild?.id);
});