fix(value-list): add back instructions for screen reader when drag ha…

…ndle 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

@@ -0,0 +1,4 @@
+export interface ListItemAndHandle {
+  item: HTMLCalciteValueListItemElement;
+  handle: HTMLSpanElement;
+}

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"
         >

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;
 

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