From b94ce28e96edd5b65896dec56a6baf833fba63cd Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Mon, 29 Apr 2024 22:23:49 +0530
Subject: [PATCH] [accessibility-2724013]:[Screen reader - Cosmos DB - Data
 Explorer -> Entities -> Add entity]: Screen reader announces incorrect role
 when focus lands on the "Edit" and "Delete" buttons. (#1822)

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 src/Common/TableEntity.tsx                                | 4 ++--
 .../GraphExplorerComponent/NodePropertiesComponent.tsx    | 4 ++--
 .../Graph/NewVertexComponent/NewVertexComponent.tsx       | 8 +++++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/Common/TableEntity.tsx b/src/Common/TableEntity.tsx
index f3d0b5244..eece32ecb 100644
--- a/src/Common/TableEntity.tsx
+++ b/src/Common/TableEntity.tsx
@@ -142,7 +142,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
               <Image
                 {...imageProps}
                 src={EditIcon}
-                alt="editEntity"
+                alt={`Edit ${entityProperty} entity`}
                 onClick={onEditEntity}
                 tabIndex={0}
                 onKeyPress={handleKeyPress}
@@ -156,7 +156,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
             <Image
               {...imageProps}
               src={DeleteIcon}
-              alt="delete entity"
+              alt={`Delete ${entityProperty} entity`}
               id="deleteEntity"
               onClick={onDeleteEntity}
               tabIndex={0}
diff --git a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
index 6b0472649..f67425696 100644
--- a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
@@ -349,7 +349,7 @@ export class NodePropertiesComponent extends React.Component<
           onActivated={this.setIsDeleteConfirm.bind(this, true)}
           aria-label="Delete this vertex"
         >
-          <img src={DeleteIcon} alt="Delete" />
+          <img src={DeleteIcon} alt="Delete" role="button" />
         </AccessibleElement>
       );
     } else {
@@ -406,7 +406,7 @@ export class NodePropertiesComponent extends React.Component<
               aria-label="Edit properties"
               onActivated={expandClickHandler}
             >
-              <img src={EditIcon} alt="Edit" />
+              <img src={EditIcon} alt="Edit" role="button" />
             </AccessibleElement>
           )}
 
diff --git a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
index de357989a..6b20cfcb0 100644
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
@@ -184,12 +184,18 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                     className="rightPaneTrashIcon rightPaneBtns"
                     tabIndex={0}
                     role="button"
+                    aria-label={`Delete ${data.key}`}
                     onClick={(event: React.MouseEvent<HTMLDivElement>) => removeNewVertexProperty(event, index)}
                     onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) =>
                       removeNewVertexPropertyKeyPress(event, index)
                     }
                   >
-                    <img className="refreshcol rightPaneTrashIconImg" src={DeleteIcon} alt="Remove property" />
+                    <img
+                      aria-label="hidden"
+                      className="refreshcol rightPaneTrashIconImg"
+                      src={DeleteIcon}
+                      alt="Remove property"
+                    />
                   </div>
                 </div>
               </div>