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

fix: fixed focus handling, focus now jumps from header to panel when tabbing

Browse source
This commit is contained in:
Danny Moerkerke 2022-07-11 16:22:13 +02:00
parent 718ce0146a
commit be30ff540b
2 changed files with 47 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

@ -61,6 +61,25 @@ export class LionAccordion extends LitElement {
visibility: visible;
display: block;
}
.accordion [slot='invoker'] {
margin: 0;
}
.accordion [slot='invoker'][expanded] {
font-weight: bold;
}
.accordion [slot='content'] {
margin: 0;
visibility: hidden;
display: none;
}
.accordion [slot='content'][expanded] {
visibility: visible;
display: block;
}
`,
];
}
@ -139,10 +158,12 @@ export class LionAccordion extends LitElement {
__setupSlots() {
const invokerSlot = this.shadowRoot?.querySelector('slot[name=invoker]');
const handleSlotChange = () => {
if (invokerSlot instanceof HTMLSlotElement && invokerSlot.assignedNodes().length > 0) {
this.__cleanStore();
this.__setupStore();
this.__updateFocused();
this.__updateExpanded();
}
};
if (invokerSlot) {
invokerSlot.addEventListener('slotchange', handleSlotChange);
@ -180,12 +201,33 @@ export class LionAccordion extends LitElement {
};
this._setupContent(entry);
this._setupInvoker(entry);
this.__rearrangeInvokersAndContent();
this._unfocusInvoker(entry);
this._collapse(entry);
this.__store.push(entry);
});
}
/**
* @private
*/
__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('.accordion');
if (accordion) {
invokers.forEach((invoker, index) => {
accordion.insertAdjacentElement('beforeend', invoker);
accordion.insertAdjacentElement('beforeend', contents[index]);
});
}
}
/**
* @param {number} index
* @private