autofocus removed for input element

Commit to my local branch
Merge branch 'master' of https://github.com/MokireddySampath/cosmos-explorer
2025-12-23 02:41:39 +00:00 · 2023-04-16 22:05:10 +05:30 · 2023-04-04 11:11:10 +05:30 · 2023-04-04 11:10:39 +05:30 · 2023-03-13 12:10:26 +05:30 · 2023-03-10 23:22:42 +05:30
8 changed files with 237 additions and 216 deletions
--- a/src/Common/EntityValue.tsx
+++ b/src/Common/EntityValue.tsx
@@ -55,7 +55,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
      label={entityValueLabel && entityValueLabel}
      className="addEntityTextField"
      id="entityValueId"
-      autoFocus
      disabled={isEntityValueDisable}
      type={entityValueType}
      placeholder={entityValuePlaceholder}
--- a/src/Common/TableEntity.tsx
+++ b/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";
@@ -136,6 +136,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
          onEntityTimeValueChange={onEntityTimeValueChange}
        />
        {!isEntityValueDisable && (
+          
          <TooltipHost content="Edit property" id="editTooltip">
            <div tabIndex={0}>
              <Image
@@ -149,6 +150,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
              />
            </div>
          </TooltipHost>
+          
        )}
        {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
          <TooltipHost content="Delete property" id="deleteTooltip">
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -201,20 +201,20 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
            Autoscale
          </label>

-          <input
-            id="Manual-input"
-            className="throughputInputRadioBtn"
-            aria-label="Manual database throughput"
-            checked={!isAutoscaleSelected}
-            type="radio"
-            aria-required={true}
-            role="radio"
-            tabIndex={0}
-            onChange={(e) => handleOnChangeMode(e, "Manual")}
-          />
-          <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
-            Manual
-          </label>
+        <input
+          id="Manual-input"
+          className="throughputInputRadioBtn"
+          aria-label="Manual database throughput"
+          checked={!isAutoscaleSelected}
+          type="radio"
+          aria-required={true}
+          role="radio"
+          tabIndex={0}
+          onChange={(e) => handleOnChangeMode(e, "Manual")}
+        />
+        <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
+          Manual
+        </label>
        </div>
      </Stack>

--- a/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
@@ -347,12 +347,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                    ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                    className="panelInfoIcon"
                    iconName="Info"
+                    role="tooltip"
                    tabIndex={0}
                  >
                    <IconBase
                      ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                      className="panelInfoIcon"
                      iconName="Info"
+                      role="tooltip"
                      styles={[Function]}
                      tabIndex={0}
                      theme={
@@ -633,7 +635,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                        aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                        className="panelInfoIcon root-57"
                        data-icon-name="Info"
-                        role="img"
+                        role="tooltip"
                        tabIndex={0}
                      >
                        
@@ -1339,12 +1341,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                        ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                        className="panelInfoIcon"
                        iconName="Info"
+                        role="tooltip"
                        tabIndex={0}
                      >
                        <IconBase
                          ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                          className="panelInfoIcon"
                          iconName="Info"
+                          role="tooltip"
                          styles={[Function]}
                          tabIndex={0}
                          theme={
@@ -1625,7 +1629,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                            aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                            className="panelInfoIcon root-57"
                            data-icon-name="Info"
-                            role="img"
+                            role="tooltip"
                            tabIndex={0}
                          >
                            
--- a/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
+++ b/src/Explorer/Controls/TreeComponent/TreeComponent.tsx
@@ -10,7 +10,7 @@ import {
  IButtonStyles,
  IconButton,
  IContextualMenuItemProps,
-  IContextualMenuProps,
+  IContextualMenuProps
 } from "@fluentui/react";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
--- a/src/Explorer/Controls/TreeComponent/snapshots/TreeComponent.test.tsx.snap
+++ b/src/Explorer/Controls/TreeComponent/snapshots/TreeComponent.test.tsx.snap
@@ -40,30 +40,32 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
  onKeyPress={[Function]}
  role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 9,
+  <div>
+    <div
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 9,
+        }
      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is collapsed"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
+      tabIndex={-1}
    >
-      label
-    </span>
+      <img
+        alt="label branch is collapsed"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+    </div>
  </div>
  <div
    className="loadingIconContainer"
@@ -143,78 +145,80 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
  onKeyPress={[Function]}
  role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 23,
-      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
-    >
-      label
-    </span>
+  <div>
    <div
-      onContextMenu={[Function]}
-      onKeyPress={[Function]}
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 23,
+        }
+      }
+      tabIndex={-1}
    >
-      <CustomizedIconButton
-        ariaLabel="More"
-        className="treeMenuEllipsis"
-        menuIconProps={
-          Object {
-            "iconName": "More",
-            "styles": Object {
-              "root": Object {
-                "fontSize": "18px",
-                "fontWeight": "bold",
-              },
-            },
-          }
-        }
-        menuProps={
-          Object {
-            "contextualMenuItemAs": [Function],
-            "coverTarget": true,
-            "directionalHint": 3,
-            "isBeakVisible": false,
-            "items": Array [
-              Object {
-                "className": undefined,
-                "disabled": true,
-                "key": "menuLabel",
-                "onClick": [Function],
-                "onRenderIcon": [Function],
-                "text": "menuLabel",
-              },
-            ],
-            "onMenuDismissed": [Function],
-            "onMenuOpened": [Function],
-          }
-        }
-        name="More"
-        styles={
-          Object {
-            "rootFocused": Object {
-              "outline": "1px dashed undefined",
-            },
-          }
-        }
-        title="More"
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+      <div
+        onContextMenu={[Function]}
+        onKeyPress={[Function]}
+      >
+        <CustomizedIconButton
+          ariaLabel="More"
+          className="treeMenuEllipsis"
+          menuIconProps={
+            Object {
+              "iconName": "More",
+              "styles": Object {
+                "root": Object {
+                  "fontSize": "18px",
+                  "fontWeight": "bold",
+                },
+              },
+            }
+          }
+          menuProps={
+            Object {
+              "contextualMenuItemAs": [Function],
+              "coverTarget": true,
+              "directionalHint": 3,
+              "isBeakVisible": false,
+              "items": Array [
+                Object {
+                  "className": undefined,
+                  "disabled": true,
+                  "key": "menuLabel",
+                  "onClick": [Function],
+                  "onRenderIcon": [Function],
+                  "text": "menuLabel",
+                },
+              ],
+              "onMenuDismissed": [Function],
+              "onMenuOpened": [Function],
+            }
+          }
+          name="More"
+          styles={
+            Object {
+              "rootFocused": Object {
+                "outline": "1px dashed undefined",
+              },
+            }
+          }
+          title="More"
+        />
+      </div>
    </div>
  </div>
  <div
@@ -294,30 +298,32 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
  onKeyPress={[Function]}
  role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 9,
+  <div>
+    <div
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 9,
+        }
      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
+      tabIndex={-1}
    >
-      label
-    </span>
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+    </div>
  </div>
  <div
    className="loadingIconContainer"
@@ -368,69 +374,71 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
  onKeyPress={[Function]}
  role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 23,
-      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
-    >
-      label
-    </span>
+  <div>
    <div
-      onContextMenu={[Function]}
-      onKeyPress={[Function]}
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 23,
+        }
+      }
+      tabIndex={-1}
    >
-      <CustomizedIconButton
-        ariaLabel="More"
-        className="treeMenuEllipsis"
-        menuIconProps={
-          Object {
-            "iconName": "More",
-            "styles": Object {
-              "root": Object {
-                "fontSize": "18px",
-                "fontWeight": "bold",
-              },
-            },
-          }
-        }
-        menuProps={
-          Object {
-            "contextualMenuItemAs": [Function],
-            "coverTarget": true,
-            "directionalHint": 3,
-            "isBeakVisible": false,
-            "items": Array [],
-            "onMenuDismissed": [Function],
-            "onMenuOpened": [Function],
-          }
-        }
-        name="More"
-        styles={
-          Object {
-            "rootFocused": Object {
-              "outline": "1px dashed undefined",
-            },
-          }
-        }
-        title="More"
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+      <div
+        onContextMenu={[Function]}
+        onKeyPress={[Function]}
+      >
+        <CustomizedIconButton
+          ariaLabel="More"
+          className="treeMenuEllipsis"
+          menuIconProps={
+            Object {
+              "iconName": "More",
+              "styles": Object {
+                "root": Object {
+                  "fontSize": "18px",
+                  "fontWeight": "bold",
+                },
+              },
+            }
+          }
+          menuProps={
+            Object {
+              "contextualMenuItemAs": [Function],
+              "coverTarget": true,
+              "directionalHint": 3,
+              "isBeakVisible": false,
+              "items": Array [],
+              "onMenuDismissed": [Function],
+              "onMenuOpened": [Function],
+            }
+          }
+          name="More"
+          styles={
+            Object {
+              "rootFocused": Object {
+                "outline": "1px dashed undefined",
+              },
+            }
+          }
+          title="More"
+        />
+      </div>
    </div>
  </div>
  <div
@@ -538,30 +546,32 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
  onKeyPress={[Function]}
  role="treeitem"
 >
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 9,
+  <div>
+    <div
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 9,
+        }
      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
+      tabIndex={-1}
    >
-      label
-    </span>
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+    </div>
  </div>
  <div
    className="loadingIconContainer"
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -13,7 +13,7 @@ import {
  Stack,
  TeachingBubble,
  Text,
-  TooltipHost,
+  TooltipHost
 } from "@fluentui/react";
 import * as Constants from "Common/Constants";
 import { createCollection } from "Common/dataAccess/createCollection";
@@ -100,6 +100,7 @@ export interface AddCollectionPanelState {
  isExecuting: boolean;
  isThroughputCapExceeded: boolean;
  teachingBubbleStep: number;
+  isParentTooltipVisible:boolean;
 }

 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -108,6 +109,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
  private collectionThroughput: number;
  private isCollectionAutoscale: boolean;
  private isCostAcknowledged: boolean;
+  

  constructor(props: AddCollectionPanelProps) {
    super(props);
@@ -134,13 +136,16 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
      isExecuting: false,
      isThroughputCapExceeded: false,
      teachingBubbleStep: 0,
+      isParentTooltipVisible: false,
    };
+    
  }

  componentDidMount(): void {
    if (this.state.teachingBubbleStep === 0 && this.props.isQuickstart) {
      this.setState({ teachingBubbleStep: 1 });
    }
+
  }

  render(): JSX.Element {
@@ -408,6 +413,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                  className="panelInfoIcon"
                  tabIndex={0}
                  ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
+                  
                />
              </TooltipHost>
            </Stack>
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -9,7 +9,7 @@ import {
  Stack,
  TeachingBubble,
  TeachingBubbleContent,
-  Text,
+  Text
 } from "@fluentui/react";
 import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";
Author	SHA1	Message	Date
Sampath	6247d1a97d	autofocus removed for input element	2023-04-16 22:05:10 +05:30
Sampath	4ec6108f41	Commit to my local branch	2023-04-04 11:11:10 +05:30
Sampath	d63f1251dd	Merge branch 'master' of https://github.com/MokireddySampath/cosmos-explorer	2023-04-04 11:10:39 +05:30
Sampath	40755e297d	Merge branch 'master' of https://github.com/MokireddySampath/cosmos-explorer	2023-03-13 12:10:26 +05:30
Sampath	b84d5b572c	sev2 accessibilitydefects in data explorer	2023-03-10 23:22:42 +05:30
Sampath	c711b59f7d	alt text for decorative images	2023-02-25 23:25:12 +05:30
Sampath	e945963cf9	Revert "alt text attribute for images" This reverts commit `5a660551c6`.	2023-02-25 23:11:20 +05:30
Sampath	5a660551c6	alt text attribute for images	2023-02-25 22:53:52 +05:30
Sampath	b2d59f3b3f	autoscale and manual radiobuutton fixes	2023-02-06 23:48:50 +05:30