diff --git a/packages/action-group/src/ActionGroup.ts b/packages/action-group/src/ActionGroup.ts index d5ae37d3e9..80a7de1a9f 100644 --- a/packages/action-group/src/ActionGroup.ts +++ b/packages/action-group/src/ActionGroup.ts @@ -170,13 +170,12 @@ export class ActionGroup extends SizedMixin(SpectrumElement, { } private deselectSelectedButtons(): void { - const selected = [ - ...this.querySelectorAll('[selected]'), - ] as ActionButton[]; - selected.forEach((el) => { - el.selected = false; - el.tabIndex = -1; - el.setAttribute( + this.buttons.forEach((button) => { + if (!button.selected) return; + + button.selected = false; + button.tabIndex = -1; + button.setAttribute( this.selects ? 'aria-checked' : /* c8 ignore */ 'aria-pressed', 'false' ); diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts index 65bbd70ede..554b5f54c3 100644 --- a/packages/action-group/test/action-group.test.ts +++ b/packages/action-group/test/action-group.test.ts @@ -423,6 +423,45 @@ describe('ActionGroup', () => { expect(el.selected, '"Third" selected').to.deep.equal(['Third']); }); + it('manages [selects="single"] selection through multiple slots', async () => { + const test = await fixture( + html` +
+ First + Second + Third +
+ ` + ); + + const firstItem = test.querySelector( + 'sp-action-button' + ) as ActionButton; + const thirdItem = test.querySelector( + 'sp-action-button[selected]' + ) as ActionButton; + + const shadowRoot = test.attachShadow({ mode: 'open' }); + shadowRoot.innerHTML = ` + + + + `; + + const el = shadowRoot.querySelector('sp-action-group') as ActionGroup; + await elementUpdated(el); + + expect(el.selected, '"Third" selected').to.deep.equal(['Third']); + expect(firstItem.selected).to.be.false; + expect(thirdItem.selected).to.be.true; + + firstItem.click(); + await elementUpdated(el); + + expect(el.selected, '"First" selected').to.deep.equal(['First']); + expect(firstItem.selected).to.be.true; + expect(thirdItem.selected).to.be.false; + }); it('surfaces [selects="multiple"] selection', async () => { const el = await fixture( html`