From 647cca09b3e96f001e8d92e41deb77ed3a5082bd Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Fri, 9 Aug 2024 21:02:10 +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. (#1923)

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 .../GraphExplorerComponent/NodePropertiesComponent.tsx      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
index f67425696..4bb5681e1 100644
--- a/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
@@ -348,8 +348,9 @@ export class NodePropertiesComponent extends React.Component<
           as="span"
           onActivated={this.setIsDeleteConfirm.bind(this, true)}
           aria-label="Delete this vertex"
+          role="button"
         >
-          <img src={DeleteIcon} alt="Delete" role="button" />
+          <img src={DeleteIcon} alt="Delete" aria-label="hidden" />
         </AccessibleElement>
       );
     } else {
@@ -405,8 +406,9 @@ export class NodePropertiesComponent extends React.Component<
               as="span"
               aria-label="Edit properties"
               onActivated={expandClickHandler}
+              role="button"
             >
-              <img src={EditIcon} alt="Edit" role="button" />
+              <img src={EditIcon} alt="Edit" aria-label="hidden" />
             </AccessibleElement>
           )}