diff --git a/packages/calcite-components/src/components/handle/handle.e2e.ts b/packages/calcite-components/src/components/handle/handle.e2e.ts index b6c5c1af990..68eeb3dd42d 100644 --- a/packages/calcite-components/src/components/handle/handle.e2e.ts +++ b/packages/calcite-components/src/components/handle/handle.e2e.ts @@ -125,4 +125,22 @@ describe("calcite-handle", () => { describe("translation support", () => { t9n("calcite-handle"); }); + + it("sets radio role properly", async () => { + const page = await newE2EPage(); + const label = "Hello World"; + await page.setContent(``); + await page.waitForChanges(); + + const handle = await page.find("calcite-handle"); + + const internalHandle = await page.find(`calcite-handle >>> .${CSS.handle}`); + expect(internalHandle.getAttribute("role")).toBe("radio"); + expect(internalHandle.getAttribute("aria-checked")).toBe("false"); + + handle.setProperty("selected", true); + + await page.waitForChanges(); + expect(internalHandle.getAttribute("aria-checked")).toBe("true"); + }); }); diff --git a/packages/calcite-components/src/components/handle/handle.tsx b/packages/calcite-components/src/components/handle/handle.tsx index d42351aa944..08b15036103 100644 --- a/packages/calcite-components/src/components/handle/handle.tsx +++ b/packages/calcite-components/src/components/handle/handle.tsx @@ -300,13 +300,14 @@ export class Handle implements LoadableComponent, T9nComponent, InteractiveCompo return ( // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486