From b822f25a88519c8a4ddb1311006a88ac1e7b5a1b Mon Sep 17 00:00:00 2001
From: Anveshreddy mekala <anv11827@esri.com>
Date: Fri, 24 Feb 2023 18:05:38 -0600
Subject: [PATCH] fix(value-list): add back instructions for screen reader when
 drag handle is activated (#6402)

**Related Issue:** #6401

## Summary

This PR will add back instructions for screen reader when drag handle is
activated via `Space` key.

Sidebar: This will also cover #5739
---
 src/components/value-list-item/interfaces.ts       |  4 ++++
 src/components/value-list-item/value-list-item.tsx | 12 +++++++++++-
 src/components/value-list/value-list.e2e.ts        |  2 +-
 src/components/value-list/value-list.tsx           | 14 ++++++++++++--
 4 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 src/components/value-list-item/interfaces.ts

diff --git a/src/components/value-list-item/interfaces.ts b/src/components/value-list-item/interfaces.ts
new file mode 100644
index 00000000000..a6a34097b4e
--- /dev/null
+++ b/src/components/value-list-item/interfaces.ts
@@ -0,0 +1,4 @@
+export interface ListItemAndHandle {
+  item: HTMLCalciteValueListItemElement;
+  handle: HTMLSpanElement;
+}
diff --git a/src/components/value-list-item/value-list-item.tsx b/src/components/value-list-item/value-list-item.tsx
index e4a6b1f503d..f8cf8514d46 100644
--- a/src/components/value-list-item/value-list-item.tsx
+++ b/src/components/value-list-item/value-list-item.tsx
@@ -26,6 +26,7 @@ import {
 } from "../../utils/loadable";
 import { CSS, SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources";
 import { ICON_TYPES } from "../pick-list/resources";
+import { ListItemAndHandle } from "./interfaces";
 import { ICONS, SLOTS } from "./resources";
 
 /**
@@ -117,6 +118,8 @@ export class ValueListItem
 
   pickListItem: HTMLCalcitePickListItemElement = null;
 
+  handleEl: HTMLSpanElement;
+
   guid = `calcite-value-list-item-${guid()}`;
 
   // --------------------------------------------------------------------------
@@ -181,6 +184,12 @@ export class ValueListItem
    */
   @Event({ cancelable: true }) calciteListItemRemove: EventEmitter<void>; // wrapped pick-list-item emits this
 
+  /**
+   * @internal
+   */
+  @Event({ cancelable: false })
+  calciteValueListItemDragHandleBlur: EventEmitter<ListItemAndHandle>;
+
   @Listen("calciteListItemChange")
   calciteListItemChangeHandler(event: CustomEvent): void {
     // adjust item payload from wrapped item before bubbling
@@ -198,13 +207,13 @@ export class ValueListItem
 
   handleKeyDown = (event: KeyboardEvent): void => {
     if (event.key === " ") {
-      event.preventDefault();
       this.handleActivated = !this.handleActivated;
     }
   };
 
   handleBlur = (): void => {
     this.handleActivated = false;
+    this.calciteValueListItemDragHandleBlur.emit({ item: this.el, handle: this.handleEl });
   };
 
   handleSelectChange = (event: CustomEvent): void => {
@@ -247,6 +256,7 @@ export class ValueListItem
           data-js-handle
           onBlur={this.handleBlur}
           onKeyDown={this.handleKeyDown}
+          ref={(el) => (this.handleEl = el as HTMLSpanElement)}
           role="button"
           tabindex="0"
         >
diff --git a/src/components/value-list/value-list.e2e.ts b/src/components/value-list/value-list.e2e.ts
index e7f6e9606bc..09968dddd80 100644
--- a/src/components/value-list/value-list.e2e.ts
+++ b/src/components/value-list/value-list.e2e.ts
@@ -248,7 +248,7 @@ describe("calcite-value-list", () => {
       expect(await ninth.getProperty("value")).toBe("f");
     });
 
-    it.skip("is drag and drop list accessible", async () => {
+    it("is drag and drop list accessible", async () => {
       const page = await createSimpleValueList();
       let startIndex = 0;
 
diff --git a/src/components/value-list/value-list.tsx b/src/components/value-list/value-list.tsx
index 04f5e1f8460..898f7d5a9fd 100644
--- a/src/components/value-list/value-list.tsx
+++ b/src/components/value-list/value-list.tsx
@@ -52,6 +52,7 @@ import {
   setUpItems
 } from "../pick-list/shared-list-logic";
 import List from "../pick-list/shared-list-render";
+import { ListItemAndHandle } from "../value-list-item/interfaces";
 import { ValueListMessages } from "./assets/value-list/t9n";
 import { CSS, ICON_TYPES } from "./resources";
 import { getHandleAndItemElement, getScreenReaderText } from "./utils";
@@ -360,6 +361,8 @@ export class ValueList<
       return;
     }
 
+    event.preventDefault();
+
     const { items } = this;
 
     if (event.key === " ") {
@@ -370,8 +373,6 @@ export class ValueList<
       return;
     }
 
-    event.preventDefault();
-
     const { el } = this;
     const nextIndex = moveItemIndex(this, item, event.key === "ArrowUp" ? "up" : "down");
     if (nextIndex === items.length - 1) {
@@ -457,6 +458,15 @@ export class ValueList<
     }
   };
 
+  @Listen("calciteValueListItemDragHandleBlur")
+  handleValueListItemBlur(event: CustomEvent<ListItemAndHandle>): void {
+    const { item, handle } = event.detail;
+    if (!item?.handleActivated && item) {
+      this.updateHandleAriaLabel(handle, getScreenReaderText(item, "idle", this));
+    }
+    event.stopPropagation();
+  }
+
   render(): VNode {
     return (
       <List