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

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");
+  });
 });

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)