From b2e1b9b93cb36e32208553f9a7a524b21d76b4e9 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Fri, 5 Apr 2024 15:27:23 -0700
Subject: [PATCH] fix(list, list-item): support keyboard sorting in screen
 readers (#9038)

**Related Issue:** #7426

## Summary

- support keyboard sorting in screen readers by setting internal role to
radio
- add e2e test.
-
https://stackoverflow.com/questions/52261977/why-javascript-if-keycode-enter-key-or-spacebar-key-does-not-work-with-nvda
---
 .../src/components/handle/handle.e2e.ts        | 18 ++++++++++++++++++
 .../src/components/handle/handle.tsx           |  5 +++--
 2 files changed, 21 insertions(+), 2 deletions(-)

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(`<calcite-handle lang="en" label="${label}"></calcite-handle>`);
+    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
       <span
+        aria-checked={this.disabled ? null : toAriaBoolean(this.selected)}
         aria-disabled={this.disabled ? toAriaBoolean(this.disabled) : null}
         aria-label={this.disabled ? null : this.getAriaText("label")}
-        aria-pressed={this.disabled ? null : toAriaBoolean(this.selected)}
         class={{ [CSS.handle]: true, [CSS.handleSelected]: !this.disabled && this.selected }}
         onBlur={this.handleBlur}
         onKeyDown={this.handleKeyDown}
-        role="button"
+        // role of radio is being applied to allow space key to select in screen readers
+        role="radio"
         tabIndex={this.disabled ? null : 0}
         title={this.getTooltip()}
         // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)