From 9df6d51f1943a80da34cc048abeaf4c8c1b338cc Mon Sep 17 00:00:00 2001
From: Ramesh <ramesht@lumel.com>
Date: Wed, 25 Feb 2026 17:45:08 +0530
Subject: [PATCH] feat(ally): add accessibility support to FieldskeeperBucket &
 contextMenu

---
 src/Components/ContextMenu/ContextMenu.tsx       | 11 +++++++++++
 src/Components/ContextMenu/ContextMenuOption.tsx | 10 ++++++++++
 src/FieldsKeeper/FieldsKeeperBucket.tsx          | 15 ++++++++++++++-
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/Components/ContextMenu/ContextMenu.tsx b/src/Components/ContextMenu/ContextMenu.tsx
index f402c76..fcda9d6 100644
--- a/src/Components/ContextMenu/ContextMenu.tsx
+++ b/src/Components/ContextMenu/ContextMenu.tsx
@@ -116,9 +116,20 @@ export const ContextMenu = (props: IContextMenuProps) => {
         <>
             {React.cloneElement(children ?? <div></div>, {
                 ref: setReferenceElement,
+                role: 'button',
+                tabIndex: 0,
+                'aria-haspopup': 'menu',
+                'aria-expanded': isContextMenuVisible,
+                'aria-label': 'Open menu',
                 onClick: (e: MouseEvent) => {
                     onContextMenuClick(e);
                 },
+                onKeyDown: (e: React.KeyboardEvent) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setIsContextMenuVisible(true);
+                    }
+                },
             })}
 
             {isContextMenuVisible &&
diff --git a/src/Components/ContextMenu/ContextMenuOption.tsx b/src/Components/ContextMenu/ContextMenuOption.tsx
index dad6ed7..a63402e 100644
--- a/src/Components/ContextMenu/ContextMenuOption.tsx
+++ b/src/Components/ContextMenu/ContextMenuOption.tsx
@@ -45,11 +45,21 @@ export const ContextMenuOption = (props: IContextMenuOptionProps) => {
         <div
             className="react-fields-keeper-context-menu-item"
             ref={setReferenceElement}
+            role="menuitem"
+            tabIndex={0}
+            aria-haspopup={option.subMenuOptions?.length ? 'menu' : undefined}
             title={option.label}
             onClick={(e) => {
                 e.stopPropagation();
                 onOptionClickHandler(option);
             }}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onOptionClickHandler(option);
+                }
+            }}
             onMouseOver={(e) => onMouseOver(e, option, isSubMenu)}
             onMouseLeave={(e) => {
                 if (e?.currentTarget?.style) {
diff --git a/src/FieldsKeeper/FieldsKeeperBucket.tsx b/src/FieldsKeeper/FieldsKeeperBucket.tsx
index 38cb52d..587a282 100644
--- a/src/FieldsKeeper/FieldsKeeperBucket.tsx
+++ b/src/FieldsKeeper/FieldsKeeperBucket.tsx
@@ -839,7 +839,7 @@ const GroupedItemRenderer = (
                                         )}
                                         role="button"
                                         tabIndex={0}
-                                        aria-label="Remove Field"
+                                        aria-label={`Remove ${fieldItem.label} Field`}
                                         onClick={remove}
                                         style={iconColorStyle}
                                         onKeyDown={(
@@ -905,6 +905,11 @@ const GroupedItemRenderer = (
                     }}
                 >
                     <div
+                        role="button"
+                        tabIndex={0}
+                        aria-disabled={fieldItem.disabled?.active}
+                        aria-roledescription="Draggable field"
+                        aria-label={fieldItem.label}
                         className={classNames(
                             'react-fields-keeper-mapping-content-input-filled',
                             fieldItem.activeNodeClassName,
@@ -943,6 +948,14 @@ const GroupedItemRenderer = (
                                 fieldItem._fieldItemIndex,
                             )
                         }
+                        onKeyDown={(e) => {
+                            if (fieldItem.disabled?.active) return;
+
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                handleFieldItemClick(fieldItem, e as any);
+                            }
+                        }}
                     >
                         {customItemRenderer !== undefined
                             ? customItemRenderer({