diff --git a/packages/split-button/src/SplitButton.ts b/packages/split-button/src/SplitButton.ts index 64cac4c127..d02481df88 100644 --- a/packages/split-button/src/SplitButton.ts +++ b/packages/split-button/src/SplitButton.ts @@ -158,7 +158,7 @@ export class SplitButton extends SizedMixin(PickerBase) { @click=${this.onButtonClick} @focus=${this.onButtonFocus} ?disabled=${this.disabled} - aria-label="More" + aria-labelledby="button" variant=${this.variant} treatment=${treatment} size=${this.size} diff --git a/packages/split-button/test/index.ts b/packages/split-button/test/index.ts index 2052b07a85..82b992c171 100644 --- a/packages/split-button/test/index.ts +++ b/packages/split-button/test/index.ts @@ -14,6 +14,7 @@ import { elementUpdated, expect, fixture, oneEvent } from '@open-wc/testing'; import { sendKeys } from '@web/test-runner-commands'; import { html, TemplateResult } from '@spectrum-web-components/base'; import { spy } from 'sinon'; +import { a11ySnapshot, findAccessibilityNode } from '@web/test-runner-commands'; import fieldDefaults, { m as field, @@ -97,6 +98,73 @@ export function runSplitButtonTests( await expect(el1).to.be.accessible(); await expect(el2).to.be.accessible(); }); + it('loads splitbutton accessibly and checks labels', async () => { + const test = await fixture(html` +
+ ${deprecatedMenu()} + + ${deprecatedMenu()} + +
+ `); + const el1 = test.querySelector('sp-split-button') as SplitButton; + const el2 = test.querySelector('sp-split-button[left]') as SplitButton; + + await elementUpdated(el1); + await elementUpdated(el2); + + type NamedRoledPopupNode = { + name: string; + role: string; + haspopup: boolean; + }; + const snapshot = (await a11ySnapshot( + {} + )) as unknown as NamedRoledPopupNode & { + children: NamedRoledPopupNode[]; + }; + expect( + findAccessibilityNode( + snapshot, + (node) => + (node.role === 'button' || node.role === 'buttonmenu') && + node.name === 'Option 1' && + node.haspopup + ), + 'Has a named "button" element with haspopup="true" and name="Option 1"' + ).to.not.be.null; + expect( + findAccessibilityNode( + snapshot, + (node) => + node.role === 'button' && + node.name === 'Option 1' && + !node.haspopup + ), + 'Has a named "button" element with haspopup="false" and name="Option 1"' + ).to.not.be.null; + expect( + findAccessibilityNode( + snapshot, + (node) => + (node.role === 'button' || node.role === 'buttonmenu') && + node.name === 'Test' && + node.haspopup + ), + 'Has a named "button" element with haspopup="true" and name="Test"' + ).to.not.be.null; + expect( + findAccessibilityNode( + snapshot, + (node) => + node.role === 'button' && + node.name === 'Test' && + !node.haspopup + ), + 'Has a named "button" element with haspopup="false" and name="Test"' + ).to.not.be.null; + }); + it('[type="field"] toggles open/close multiple time', async () => { const test = await fixture( wrapInDiv(