keyboard navigation for defects 1722611,1722618

less/TableStyles/queryBuilder.less

@@ -485,7 +485,7 @@ input::-webkit-inner-spin-button {
 }
 
 .entity-Add-Cancel {
-    padding: @DefaultSpace @SmallSpace @SmallSpace;
+    // padding: @DefaultSpace @SmallSpace @SmallSpace;
     cursor: pointer;
 }
 

src/Common/TableEntity.tsx

@@ -7,7 +7,7 @@ import {
   IStackTokens,
   Stack,
   TextField,
-  TooltipHost,
+  TooltipHost
 } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
@@ -72,6 +72,26 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
   };
 
   const sectionStackTokens: IStackTokens = { childrenGap: 12 };
+  // const enterkeypress=(event:KeyboardEvent)=>{
+  //   if(event.key==='enter'){
+  //     onEditEntity();
+  //   }
+  // }
+  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;
@@ -126,12 +146,12 @@ 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/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -9,7 +9,7 @@ import {
   MessageBar,
   Stack,
   Text,
-  TextField,
+  TextField
 } from "@fluentui/react";
 import React from "react";
 import * as DataModels from "../../../../../Contracts/DataModels";
@@ -38,7 +38,7 @@ import {
   PriceBreakdown,
   saveThroughputWarningMessage,
   titleAndInputStackProps,
-  transparentDetailsHeaderStyle,
+  transparentDetailsHeaderStyle
 } from "../../SettingsRenderUtils";
 import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
@@ -574,6 +574,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         styles={getTextFieldStyles(this.props.throughput, this.props.throughputBaseline)}
         disabled={this.overrideWithAutoPilotSettings()}
         step={this.step}
+        tabIndex={0}
         value={
           this.overrideWithAutoPilotSettings()
             ? this.props.maxAutoPilotThroughputBaseline?.toString()

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -31,7 +31,7 @@ import {
   getDefaultEntities,
   getEntityValuePlaceholder,
   imageProps,
-  options,
+  options
 } from "./Validators/EntityTableHelper";
 
 interface AddTableEntityPanelProps {
@@ -242,6 +242,13 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
     submitButtonText: getButtonLabel(userContext.apiType),
     onSubmit,
   };
+  const handlekeypressaddentity = (event: React.KeyboardEvent<HTMLElement>)=>{
+    
+    console.log(event.key)
+    if(event.key=='Enter' || event.key=="Space"){
+      addNewEntity()
+    }
+  }
 
   return (
     <RightPaneForm {...props}>
@@ -284,7 +291,7 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
           );
         })}
         {userContext.apiType !== "Cassandra" && (
-          <Stack horizontal onClick={addNewEntity} className="addButtonEntiy">
+          <Stack horizontal onClick={addNewEntity} className="addButtonEntiy" tabIndex={0} onKeyPress={handlekeypressaddentity}>
             <Image {...imageProps} src={AddPropertyIcon} alt="Add Entity" />
             <Text className="addNewParamStyle">{getAddButtonLabel(userContext.apiType)}</Text>
           </Stack>

src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts

@@ -504,6 +504,7 @@ export default class QueryBuilderViewModel {
   // adds a new clause to the end of the array
   public addNewClause = (): void => {
     this.addClauseIndex(this.clauseArray().length);
+    console.log('addnewcause')
   };
 
   public onAddClauseKeyDown = (index: number, event: KeyboardEvent): boolean => {
@@ -516,7 +517,7 @@ export default class QueryBuilderViewModel {
   };
 
   public onAddNewClauseKeyDown = (event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Enter || event.keyCode === KeyCodes.Space) {
+    if (event.key === 'Enter' || event.key === 'Space') {
       this.addClauseIndex(this.clauseArray().length - 1);
       event.stopPropagation();
       return false;

src/Explorer/Tabs/QueryTablesTab.html

@@ -70,11 +70,13 @@
             <tbody data-bind="template: { name: 'queryClause-template', foreach: clauseArray, as: 'clause' }"></tbody>
           </table>
         </div>
+        <button data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }" style="border:none;background:none">
         <div
           class="addClause"
-          role="button"
+          
-          data-bind="click: addNewClause, event: { keydown: onAddNewClauseKeyDown }, attr: { title: addNewClauseLine }"
+          data-bind=" "
-          tabindex="0"
+          
+
         >
           <div class="addClause-heading">
             <span class="clause-table addClause-title">
@@ -82,12 +84,14 @@
                 class="addclauseProperty-Img"
                 style="margin-bottom: 5px"
                 src="/Add-property.svg"
-                alt="Add new clause"
+                
               />
               <span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
             </span>
           </div>
         </div>
+      </button>
+      
       </div>
     </div>
     <!-- Tables Query Tab Query Helper - End-->
@@ -168,22 +172,26 @@
 <script type="text/html" id="queryClause-template">
   <tr class="clause-table-row">
     <td class="clause-table-cell action-column">
+      <button data-bind="click: $parent.addClauseIndex.bind($data, $index()), event: { keydown: $parent.onAddClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.insertNewFilterLine}">
       <span
         class="entity-Add-Cancel"
         role="button"
-        tabindex="0"
+        
-        data-bind="click: $parent.addClauseIndex.bind($data, $index()), event: { keydown: $parent.onAddClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.insertNewFilterLine}"
+        
       >
         <img class="querybuilder-addpropertyImg" src="/Add-property.svg" alt="Add clause" />
       </span>
-      <span
+    </button>
+    <button data-bind="hasFocus: isDeleteButtonFocused, click: $parent.deleteClause.bind($data, $index()), event: { keydown: $parent.onDeleteClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.removeThisFilterLine}">
+      <span 
         class="entity-Add-Cancel"
         role="button"
-        tabindex="0"
+        
-        data-bind="hasFocus: isDeleteButtonFocused, click: $parent.deleteClause.bind($data, $index()), event: { keydown: $parent.onDeleteClauseKeyDown.bind($data, $index()) }, attr:{title: $parent.removeThisFilterLine}"
+       
       >
         <img class="querybuilder-cancelImg" src="/Entity_cancel.svg" alt="Delete clause" />
       </span>
+    </button>
     </td>
     <td class="clause-table-cell group-control-column">
       <input type="checkbox" aria-label="And/Or" data-bind="checked: checkedForGrouping" />