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