Defect1711833 (#1370)

* keyboard navigation for defects 1722611,1722618

* Fixes for keyboard navigation of add new clause,edit,remove property,insert filter line, remove filter line

* Revert "keyboard navigation for defects 1722611,1722618"

This reverts commit 9383609a22.

* html,css changes corected after reversion

* Revert "html,css changes corected after reversion"

This reverts commit 712e0e0c1e.

* committing changes for the keyboard navigation

* format fixes

* changes to addcollectionpanel.test.tsx snp file

* changes in infotooltip for defct

* Revert "changes in infotooltip for defct"

This reverts commit ca9833e208.

* commit for tooltip in defect 1704149

* Revert "commit for tooltip in defect 1704149"

This reverts commit 44766e8213.

* InfoTooltip changes

* update snapshot

* defect1722595 Bug 1722595: [Screen readers  Azure Cosmos DB  Scale& Settings: Screen reader (NVDA) is not announcing status message which is displayed on the screen after radio button is selected under scale tab.

* more options in delete entity dialog is not accessible through keyboard

* Revert "more options in delete entity dialog is not accessible through keyboard"

This reverts commit 23a05ef18e.

* more options in delete entity dialog is not accessible throgh keyboard

* remove native html with role='alert' for messagebar

* role added for messagebar fluentui component

src/Common/TableEntity.tsx

@@ -73,6 +73,17 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
 
   const sectionStackTokens: IStackTokens = { childrenGap: 12 };
 
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === "Enter" || event.key === "Space") {
+      onEditEntity();
+    }
+  };
+  const handleKeyPressdelete = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key === "Enter" || event.key === "Space") {
+      onDeleteEntity();
+    }
+  };
+
   const getEntityValueType = (): string => {
     const { Int, Smallint, Tinyint } = CassandraType;
     const { Double, Int32, Int64 } = TableType;
@@ -126,12 +137,28 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
         />
         {!isEntityValueDisable && (
           <TooltipHost content="Edit property" id="editTooltip">
-            <Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} />
+            <Image
+              {...imageProps}
+              src={EditIcon}
+              alt="editEntity"
+              id="editEntity"
+              onClick={onEditEntity}
+              tabIndex={0}
+              onKeyPress={handleKeyPress}
+            />
           </TooltipHost>
         )}
         {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
           <TooltipHost content="Delete property" id="deleteTooltip">
-            <Image {...imageProps} src={DeleteIcon} alt="delete entity" id="deleteEntity" onClick={onDeleteEntity} />
+            <Image
+              {...imageProps}
+              src={DeleteIcon}
+              alt="delete entity"
+              id="deleteEntity"
+              onClick={onDeleteEntity}
+              tabIndex={0}
+              onKeyPress={handleKeyPressdelete}
+            />
           </TooltipHost>
         )}
       </Stack>

src/Common/Tooltip/InfoTooltip.tsx

@@ -9,7 +9,7 @@ export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }:
   return (
     <span>
       <TooltipHost content={children}>
-        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" tabIndex={0} />
+        <Icon iconName="Info" ariaLabel={children} className="panelInfoIcon" tabIndex={0} />
       </TooltipHost>
     </span>
   );