fixed logger.test.ts GraphData.test.ts securityWarningBar.tsx typescript in strict mode

.eslintrc.js

@@ -3,8 +3,8 @@ module.exports = {
     browser: true,
     es6: true,
   },
-  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks", "jsx-a11y"],
-  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:jsx-a11y/recommended"],
+  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks"],
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
   globals: {
     Atomics: "readonly",
     SharedArrayBuffer: "readonly",

images/close-black.svg

@@ -1,8 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+<svg
+    width="16" 
+    height="16"
+     version="1.1" 
+    viewBox="0 0 16 16" 
+    xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
     <path 
         d="M14,2.691l-5.301,5.309l5.301,5.309l-0.691,0.691l-5.309,-5.301l-5.309,5.301l-0.691,-0.691l5.301,-5.309l-5.301,-5.309l0.691,-0.691l5.309,5.301l5.309,-5.301l0.691,0.691Z" 
-        transform="scale(0.5)" fill="#000" stroke="#000">
+        transform="scale(0.5)" 
+        fill="#000"
+        stroke="#CCC" 
+        >
     </path>
 </svg>

jest.config.js

@@ -37,8 +37,8 @@ module.exports = {
     global: {
       branches: 25,
       functions: 25,
-      lines: 29.5,
-      statements: 29.5,
+      lines: 30,
+      statements: 30,
     },
   },
 

less/documentDB.less

@@ -2357,8 +2357,6 @@ a:link {
   height: 100%;
   flex-grow: 1;
   overflow: hidden;
-  min-height: 300px;
-  overflow-y: scroll;
 }
 
 .tabs {
@@ -2834,8 +2832,6 @@ a:link {
 
 #explorerNotificationConsole {
   z-index: 1000;
-  overflow-y: auto;
-  overflow-x: clip;
 }
 
 .uniqueIndexesContainer {
@@ -3079,6 +3075,3 @@ settings-pane {
   background: white;
   height: 100%;
 }
-.moreOption {
-  color: #337ab7;
-}

package-lock.json

@@ -6809,11 +6809,6 @@
       "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk=",
       "dev": true
     },
-    "ast-types-flow": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
-      "integrity": "sha1-9wtzXGvKGlycItmCw+Oef+ujva0="
-    },
     "astral-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-1.0.0.tgz",
@@ -6881,11 +6876,6 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
-    "axe-core": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.3.3.tgz",
-      "integrity": "sha512-/lqqLAmuIPi79WYfRpy2i8z+x+vxU3zX2uAm0gs1q52qTuKwolOj1P8XbufpXcsydrpKx2yGn2wzAnxCMV86QA=="
-    },
     "axios": {
       "version": "0.21.1",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
@@ -6901,11 +6891,6 @@
         }
       }
     },
-    "axobject-query": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
-      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
-    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -8893,11 +8878,6 @@
         "d3-transition": "2"
       }
     },
-    "damerau-levenshtein": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz",
-      "integrity": "sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw=="
-    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -10191,64 +10171,6 @@
         "@typescript-eslint/experimental-utils": "^2.5.0"
       }
     },
-    "eslint-plugin-jsx-a11y": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz",
-      "integrity": "sha512-0rGPJBbwHoGNPU73/QCLP/vveMlM1b1Z9PponxO87jfr6tuH5ligXbDT6nHSSzBC8ovX2Z+BQu7Bk5D/Xgq9zg==",
-      "requires": {
-        "@babel/runtime": "^7.11.2",
-        "aria-query": "^4.2.2",
-        "array-includes": "^3.1.1",
-        "ast-types-flow": "^0.0.7",
-        "axe-core": "^4.0.2",
-        "axobject-query": "^2.2.0",
-        "damerau-levenshtein": "^1.0.6",
-        "emoji-regex": "^9.0.0",
-        "has": "^1.0.3",
-        "jsx-ast-utils": "^3.1.0",
-        "language-tags": "^1.0.5"
-      },
-      "dependencies": {
-        "emoji-regex": {
-          "version": "9.2.2",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
-        },
-        "get-intrinsic": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-          "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
-          "requires": {
-            "function-bind": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.1"
-          }
-        },
-        "jsx-ast-utils": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.1.tgz",
-          "integrity": "sha512-uP5vu8xfy2F9A6LGC22KO7e2/vGTS1MhP+18f++ZNlf0Ohaxbc9nIEwHAsejlJKyzfZzU5UIhe5ItYkitcZnZA==",
-          "requires": {
-            "array-includes": "^3.1.3",
-            "object.assign": "^4.1.2"
-          },
-          "dependencies": {
-            "array-includes": {
-              "version": "3.1.3",
-              "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.3.tgz",
-              "integrity": "sha512-gcem1KlBU7c9rB+Rq8/3PPKsK2kjqeEBa3bD5kkQo4nYlOHQCJqIJFqBXDEfwaRuYTT4E+FxA9xez7Gf/e3Q7A==",
-              "requires": {
-                "call-bind": "^1.0.2",
-                "define-properties": "^1.1.3",
-                "es-abstract": "^1.18.0-next.2",
-                "get-intrinsic": "^1.1.1",
-                "is-string": "^1.0.5"
-              }
-            }
-          }
-        }
-      }
-    },
     "eslint-plugin-no-null": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/eslint-plugin-no-null/-/eslint-plugin-no-null-1.0.2.tgz",
@@ -18143,19 +18065,6 @@
       "resolved": "https://registry.npmjs.org/labella/-/labella-1.1.4.tgz",
       "integrity": "sha1-xsxaNA6N80DrM1YzaD6lm4KMMi0="
     },
-    "language-subtag-registry": {
-      "version": "0.3.21",
-      "resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
-      "integrity": "sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg=="
-    },
-    "language-tags": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz",
-      "integrity": "sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=",
-      "requires": {
-        "language-subtag-registry": "~0.3.2"
-      }
-    },
     "lcid": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",

package.json

@@ -61,7 +61,6 @@
     "dom-to-image": "2.6.0",
     "dotenv": "8.2.0",
     "eslint-plugin-jest": "23.13.2",
-    "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
     "html2canvas": "1.0.0-rc.5",

src/Common/CollapsedResourceTree.tsx

@@ -1,7 +1,6 @@
-import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
+import React, { FunctionComponent } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import { userContext } from "../UserContext";
-import { NormalizedEventKey } from "./Constants";
 
 export interface CollapsedResourceTreeProps {
   toggleLeftPaneExpanded: () => void;
@@ -12,37 +11,21 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
   toggleLeftPaneExpanded,
   isLeftPaneExpanded,
 }: CollapsedResourceTreeProps): JSX.Element => {
-  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
-
-  useEffect(() => {
-    if (focusButton.current) {
-      focusButton.current.focus();
-    }
-  });
-
-  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      toggleLeftPaneExpanded();
-      event.stopPropagation();
-    }
-  };
-
   return (
     <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
       <div className="main-nav nav">
         <ul className="nav">
-          <li className="resourceTreeCollapse" id="collapseToggleLeftPaneButton" aria-label="Expand Tree">
-            <span
-              className="leftarrowCollapsed"
+          <li
+            className="resourceTreeCollapse"
+            id="collapseToggleLeftPaneButton"
             role="button"
             tabIndex={0}
-              onClick={toggleLeftPaneExpanded}
-              onKeyPress={onKeyPressToggleLeftPaneExpanded}
-              ref={focusButton}
+            aria-label="Expand Tree"
           >
+            <span className="leftarrowCollapsed" onClick={toggleLeftPaneExpanded}>
               <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
             </span>
-            <span className="collectionCollapsed">
+            <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
               <span>{userContext.apiType} API</span>
             </span>
           </li>

src/Common/Constants.ts

@@ -96,7 +96,6 @@ export class Flights {
   public static readonly AutoscaleTest = "autoscaletest";
   public static readonly PartitionKeyTest = "partitionkeytest";
   public static readonly PKPartitionKeyTest = "pkpartitionkeytest";
-  public static readonly Phoenix = "phoenix";
 }
 
 export class AfecFeatures {
@@ -338,12 +337,6 @@ export enum ConflictOperationType {
   Delete = "delete",
 }
 
-export enum ConnectionStatusType {
-  Connecting = "Connecting",
-  Connected = "Connected",
-  Failed = "Connection Failed",
-}
-
 export const EmulatorMasterKey =
   //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
   "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";

src/Common/EntityValue.tsx

@@ -40,6 +40,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
         <TextField
           label={entityValueLabel && entityValueLabel}
           id="entityTimeId"
+          autoFocus
           type="time"
           value={entityTimeValue}
           onChange={onEntityTimeValueChange}
@@ -54,6 +55,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
       label={entityValueLabel && entityValueLabel}
       className="addEntityTextField"
       id="entityValueId"
+      autoFocus
       disabled={isEntityValueDisable}
       type={entityValueType}
       placeholder={entityValuePlaceholder}

src/Common/Logger.test.ts

@@ -1,7 +1,5 @@
 jest.mock("./MessageHandler");
-import { LogEntryLevel } from "../Contracts/Diagnostics";
 import * as Logger from "./Logger";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { sendMessage } from "./MessageHandler";
 
 describe("Logger", () => {

src/Common/MongoProxyClient.test.ts

@@ -3,16 +3,8 @@ import { resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { DatabaseAccount } from "../Contracts/DataModels";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import { extractFeatures } from "../Platform/Hosted/extractFeatures";
 import { updateUserContext } from "../UserContext";
-import {
-  deleteDocument,
-  getEndpoint,
-  getFeatureEndpointOrDefault,
-  queryDocuments,
-  readDocument,
-  updateDocument,
-} from "./MongoProxyClient";
+import { deleteDocument, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
 
 const databaseId = "testDB";
 
@@ -254,31 +246,4 @@ describe("MongoProxyClient", () => {
       expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/guest/mongo/explorer");
     });
   });
-  describe("getFeatureEndpointOrDefault", () => {
-    beforeEach(() => {
-      resetConfigContext();
-      updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
-      });
-      const params = new URLSearchParams({
-        "feature.mongoProxyEndpoint": "https://localhost:12901",
-        "feature.mongoProxyAPIs": "readDocument|createDocument",
-      });
-      const features = extractFeatures(params);
-      updateUserContext({
-        authType: AuthType.AAD,
-        features: features,
-      });
-    });
-
-    it("returns a local endpoint", () => {
-      const endpoint = getFeatureEndpointOrDefault("readDocument");
-      expect(endpoint).toEqual("https://localhost:12901/api/mongo/explorer");
-    });
-
-    it("returns a production endpoint", () => {
-      const endpoint = getFeatureEndpointOrDefault("deleteDocument");
-      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
-    });
-  });
 });

src/Common/MongoProxyClient.ts

@@ -6,7 +6,6 @@ import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import { hasFlag } from "../Platform/Hosted/extractFeatures";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
@@ -79,7 +78,7 @@ export function queryDocuments(
         : "",
   };
 
-  const endpoint = getFeatureEndpointOrDefault("resourcelist") || "";
+  const endpoint = getEndpoint() || "";
 
   const headers = {
     ...defaultHeaders,
@@ -142,8 +141,7 @@ export function readDocument(
         : "",
   };
 
-  const endpoint = getFeatureEndpointOrDefault("readDocument");
-
+  const endpoint = getEndpoint();
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
       method: "GET",
@@ -183,7 +181,7 @@ export function createDocument(
     pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
   };
 
-  const endpoint = getFeatureEndpointOrDefault("createDocument");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}/resourcelist?${queryString.stringify(params)}`, {
@@ -227,7 +225,7 @@ export function updateDocument(
         ? documentId.partitionKeyProperty
         : "",
   };
-  const endpoint = getFeatureEndpointOrDefault("updateDocument");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -268,7 +266,7 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
         ? documentId.partitionKeyProperty
         : "",
   };
-  const endpoint = getFeatureEndpointOrDefault("deleteDocument");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -311,7 +309,7 @@ export function createMongoCollectionWithProxy(
     autoPilotThroughput: params.autoPilotMaxThroughput?.toString(),
   };
 
-  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
+  const endpoint = getEndpoint();
 
   return window
     .fetch(
@@ -335,15 +333,8 @@ export function createMongoCollectionWithProxy(
     });
 }
 
-export function getFeatureEndpointOrDefault(feature: string): string {
-  return hasFlag(userContext.features.mongoProxyAPIs, feature)
-    ? getEndpoint(userContext.features.mongoProxyEndpoint)
-    : getEndpoint();
-}
-
-export function getEndpoint(customEndpoint?: string): string {
-  let url = customEndpoint ? customEndpoint : configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT;
-  url += "/api/mongo/explorer";
+export function getEndpoint(): string {
+  let url = (configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT) + "/api/mongo/explorer";
 
   if (userContext.authType === AuthType.EncryptedToken) {
     url = url.replace("api/mongo", "api/guest/mongo");

src/Common/ResourceTreeContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
+import React, { FunctionComponent } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import refreshImg from "../../images/refresh-cosmos.svg";
 import { AuthType } from "../AuthType";
@@ -6,7 +6,6 @@ import Explorer from "../Explorer/Explorer";
 import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
 import { ResourceTree } from "../Explorer/Tree/ResourceTree";
 import { userContext } from "../UserContext";
-import { NormalizedEventKey } from "./Constants";
 
 export interface ResourceTreeContainerProps {
   toggleLeftPaneExpanded: () => void;
@@ -19,22 +18,6 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
   isLeftPaneExpanded,
   container,
 }: ResourceTreeContainerProps): JSX.Element => {
-  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
-
-  useEffect(() => {
-    if (isLeftPaneExpanded) {
-      if (focusButton.current) {
-        focusButton.current.focus();
-      }
-    }
-  });
-
-  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      toggleLeftPaneExpanded();
-      event.stopPropagation();
-    }
-  };
   return (
     <div id="main" className={isLeftPaneExpanded ? "main" : "hiddenMain"}>
       {/* Collections Window - - Start */}
@@ -60,11 +43,9 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                 id="expandToggleLeftPaneButton"
                 role="button"
                 onClick={toggleLeftPaneExpanded}
-                onKeyPress={onKeyPressToggleLeftPaneExpanded}
                 tabIndex={0}
                 aria-label="Collapse Tree"
                 title="Collapse Tree"
-                ref={focusButton}
               >
                 <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
               </span>

src/Common/TableEntity.tsx

@@ -96,6 +96,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
         <TextField
           label={entityPropertyLabel && entityPropertyLabel}
           id="entityPropertyId"
+          autoFocus
           disabled={isPropertyTypeDisable}
           placeholder={entityPropertyPlaceHolder}
           value={entityProperty}

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="Info" className="panelInfoIcon" />
       </TooltipHost>
     </span>
   );

src/Common/Upload/Upload.tsx

@@ -66,15 +66,9 @@ export const Upload: FunctionComponent<UploadProps> = ({
           onChange={onUpload}
           role="button"
         />
-        <span
-          id="fileImportLinkNotebook"
-          role="button"
-          tabIndex={0}
-          onClick={onImportLinkClick}
-          onKeyPress={onImportLinkKeyPress}
-        >
+        <a href="#" id="fileImportLinkNotebook" onClick={onImportLinkClick} onKeyPress={onImportLinkKeyPress}>
           <Image className="fileImportImg" src={FolderIcon} alt={title} title={title} />
-        </span>
+        </a>
       </Stack>
     </div>
   );

src/Contracts/DataModels.ts

@@ -1,5 +1,3 @@
-import { ConnectionStatusType } from "../Common/Constants";
-
 export interface DatabaseAccount {
   id: string;
   name: string;
@@ -498,8 +496,3 @@ export interface MemoryUsageInfo {
   freeKB: number;
   totalKB: number;
 }
-
-export interface ContainerConnectionInfo {
-  status: ConnectionStatusType;
-  //need to add ram and rom info
-}

src/Explorer/Controls/Accordion/AccordionComponent.tsx

@@ -55,13 +55,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
   public render(): JSX.Element {
     return (
       <div className="accordionItemContainer">
-        <div
-          className="accordionItemHeader"
-          onClick={this.onHeaderClick}
-          onKeyPress={this.onHeaderKeyPress}
-          role="button"
-          tabIndex={0}
-        >
+        <div className="accordionItemHeader" onClick={this.onHeaderClick} onKeyPress={this.onHeaderKeyPress}>
           {this.renderCollapseExpandIcon()}
           {this.props.title}
         </div>
@@ -80,6 +74,8 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
         className="expandCollapseIcon"
         src={this.state.isExpanded ? TriangleDownIcon : TriangleRightIcon}
         alt="Hide"
+        tabIndex={0}
+        role="button"
       />
     );
   }

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,6 +1,5 @@
 import { Icon, Label, Stack } from "@fluentui/react";
 import * as React from "react";
-import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
 
 export interface CollapsibleSectionProps {
@@ -31,13 +30,6 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
     }
   }
 
-  private onKeyPress = (event: React.KeyboardEvent) => {
-    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
-      this.toggleCollapsed();
-      event.stopPropagation();
-    }
-  };
-
   public render(): JSX.Element {
     return (
       <>
@@ -47,11 +39,6 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
           verticalAlign="center"
           tokens={accordionStackTokens}
           onClick={this.toggleCollapsed}
-          onKeyPress={this.onKeyPress}
-          tabIndex={0}
-          aria-label="Advanced"
-          role="button"
-          aria-expanded={this.state.isExpanded}
         >
           <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
           <Label>{this.props.title}</Label>

src/Explorer/Controls/CollapsiblePanel/__snapshots__/CollapsibleSectionComponent.test.tsx.snap

@@ -3,14 +3,9 @@
 exports[`CollapsibleSectionComponent renders 1`] = `
 <Fragment>
   <Stack
-    aria-expanded={true}
-    aria-label="Advanced"
     className="collapsibleSection"
     horizontal={true}
     onClick={[Function]}
-    onKeyPress={[Function]}
-    role="button"
-    tabIndex={0}
     tokens={
       Object {
         "childrenGap": 10,

src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx

@@ -188,13 +188,12 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
         ref={(ref: HTMLElement) => {
           this.expandButtonElt = ref;
         }}
-        role="button"
         onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => this.onLauncherKeyDown(e)}
       >
         <div className="commandDropdownLauncher">
           <span className="partialSplitter" />
           <span className="expandDropdown">
-            <img src={CollapseChevronDownIcon} alt="Collapse down icon" />
+            <img src={CollapseChevronDownIcon} />
           </span>
         </div>
         <div

src/Explorer/Controls/Dialog.tsx

@@ -181,7 +181,8 @@ export const Dialog: FC = () => {
           text: secondaryButtonText,
           onClick: onSecondaryButtonClick,
         }
-      : undefined;
+      : {};
+
   return visible ? (
     <FluentDialog {...dialogProps}>
       {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}

src/Explorer/Controls/InputTypeahead/InputTypeahead.less

@@ -8,9 +8,6 @@
     .input-type-head-text-field {
         width: 100%;
     }
-    .input-query-form {
-        width: 100%;
-    }
     textarea {
         width: 100%;
         line-height: 1;

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx

@@ -160,11 +160,9 @@ export class InputTypeaheadComponent extends React.Component<
     return (
       <div className="input-typeahead-container">
         <Stack horizontal>
-          <form aria-labelledby="input" className="input-query-form">
           <TextField
             multiline={useTextarea}
             rows={1}
-              id="input"
             defaultValue={defaultValue}
             ariaLabel="Input query"
             placeholder={placeholder}
@@ -174,7 +172,6 @@ export class InputTypeaheadComponent extends React.Component<
             onFocus={() => this.setState({ isSuggestionVisible: true })}
             onChange={(_event, newValue?: string) => this.handleChange(newValue)}
           />
-          </form>
           {this.props.showCancelButton && (
             <IconButton
               styles={iconButtonStyles}

src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap

@@ -6,15 +6,10 @@ exports[`inputTypeahead renders <input /> 1`] = `
 >
   <Stack
     horizontal={true}
-  >
-    <form
-      aria-labelledby="input"
-      className="input-query-form"
   >
     <StyledTextFieldBase
       ariaLabel="Input query"
       className="input-type-head-text-field"
-        id="input"
       multiline={false}
       onChange={[Function]}
       onFocus={[Function]}
@@ -22,7 +17,6 @@ exports[`inputTypeahead renders <input /> 1`] = `
       placeholder="placeholder"
       rows={1}
     />
-    </form>
   </Stack>
 </div>
 `;
@@ -33,15 +27,10 @@ exports[`inputTypeahead renders <textarea /> 1`] = `
 >
   <Stack
     horizontal={true}
-  >
-    <form
-      aria-labelledby="input"
-      className="input-query-form"
   >
     <StyledTextFieldBase
       ariaLabel="Input query"
       className="input-type-head-text-field"
-        id="input"
       multiline={true}
       onChange={[Function]}
       onFocus={[Function]}
@@ -49,7 +38,6 @@ exports[`inputTypeahead renders <textarea /> 1`] = `
       placeholder="placeholder"
       rows={1}
     />
-    </form>
   </Stack>
 </div>
 `;

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -150,7 +150,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
           To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save
           Query and follow the prompt in order to save the query.
         </div>
-        <img {...bannerProps} alt="Save query helper banner" />
+        <img {...bannerProps} />
       </div>
     );
   }

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -1,45 +1,45 @@
+import * as React from "react";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
+import { Urls, StyleConstants } from "../../../Common/Constants";
+import {
+  getPriceCurrency,
+  getCurrencySign,
+  getAutoscalePricePerRu,
+  getMultimasterMultiplier,
+  computeRUUsagePriceHourly,
+  getPricePerRu,
+  estimatedCostDisclaimer,
+} from "../../../Utils/PricingUtils";
 import {
-  DetailsList,
-  DetailsListLayoutMode,
-  DetailsRow,
-  ICheckboxStyles,
-  IChoiceGroupStyles,
-  IColumn,
-  IDetailsColumnStyles,
-  IDetailsListStyles,
-  IDetailsRowProps,
-  IDetailsRowStyles,
-  IDropdownStyles,
-  IMessageBarStyles,
-  ISeparatorStyles,
-  IStackProps,
-  IStackStyles,
-  IStackTokens,
   ITextFieldStyles,
-  ITextStyles,
+  ICheckboxStyles,
+  IStackProps,
+  IStackTokens,
+  IChoiceGroupStyles,
   Link,
+  Text,
+  IMessageBarStyles,
+  ITextStyles,
+  IDetailsRowStyles,
+  IStackStyles,
+  IDetailsListStyles,
+  IDropdownStyles,
+  ISeparatorStyles,
   MessageBar,
   MessageBarType,
-  SelectionMode,
+  Stack,
   Spinner,
   SpinnerSize,
-  Stack,
-  Text,
+  DetailsList,
+  IColumn,
+  SelectionMode,
+  DetailsListLayoutMode,
+  IDetailsRowProps,
+  DetailsRow,
+  IDetailsColumnStyles,
 } from "@fluentui/react";
-import * as React from "react";
-import { StyleConstants, Urls } from "../../../Common/Constants";
-import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import {
-  computeRUUsagePriceHourly,
-  estimatedCostDisclaimer,
-  getAutoscalePricePerRu,
-  getCurrencySign,
-  getMultimasterMultiplier,
-  getPriceCurrency,
-  getPricePerRu,
-} from "../../../Utils/PricingUtils";
-import { isDirty, isDirtyTypes } from "./SettingsUtils";
+import { isDirtyTypes, isDirty } from "./SettingsUtils";
 
 export interface EstimatedSpendingDisplayProps {
   costType: JSX.Element;
@@ -65,7 +65,7 @@ export interface PriceBreakdown {
   currencySign: string;
 }
 
-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14 } };
 
 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
   label: {
@@ -223,15 +223,14 @@ export const getRuPriceBreakdown = (
     multimasterEnabled: isMultimaster,
     isAutoscale: isAutoscale,
   });
-  const multimasterMultiplier = getMultimasterMultiplier(numberOfRegions, isMultimaster);
-  const pricePerRu: number = isAutoscale
-    ? getAutoscalePricePerRu(serverId, multimasterMultiplier)
-    : getPricePerRu(serverId, multimasterMultiplier);
+  const basePricePerRu: number = isAutoscale
+    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
+    : getPricePerRu(serverId);
   return {
-    hourlyPrice,
+    hourlyPrice: hourlyPrice,
     dailyPrice: hourlyPrice * 24,
     monthlyPrice: hourlyPrice * hoursInAMonth,
-    pricePerRu,
+    pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
     currency: getPriceCurrency(serverId),
     currencySign: getCurrencySign(serverId),
   };
@@ -272,7 +271,7 @@ export const manualToAutoscaleDisclaimerElement: JSX.Element = (
   <Text styles={infoAndToolTipTextStyle} id="manualToAutoscaleDisclaimerElement">
     The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings
     and storage of your resource. After autoscale has been enabled, you can change the max RU/s.{" "}
-    <Link href={Urls.autoscaleMigration}>Learn more</Link>
+    <a href={Urls.autoscaleMigration}>Learn more</a>
   </Text>
 );
 

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx

@@ -122,7 +122,7 @@ export class IndexingPolicyComponent extends React.Component<
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
           <MessageBar messageBarType={MessageBarType.warning}>{indexingPolicynUnsavedWarningMessage}</MessageBar>
         )}
-        <div className="settingsV2IndexingPolicyEditor" ref={this.indexingPolicyDiv}></div>
+        <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
       </Stack>
     );
   }

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap

@@ -8,7 +8,6 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/__snapshots__/ThroughputInputAutoPilotV3Component.test.tsx.snap

@@ -20,7 +20,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       styles={
         Object {
           "root": Object {
-            "color": "windowtext",
             "fontSize": 14,
           },
         }
@@ -40,7 +39,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -75,7 +73,6 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
         styles={
           Object {
             "root": Object {
-              "color": "windowtext",
               "fontSize": 14,
             },
           }
@@ -83,11 +80,11 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
       >
         The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
          
-        <StyledLinkBase
+        <a
           href="https://aka.ms/cosmos-autoscale-migration"
         >
           Learn more
-        </StyledLinkBase>
+        </a>
       </Text>
     </StyledMessageBar>
     <StyledChoiceGroup
@@ -189,7 +186,6 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -464,7 +460,6 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`IndexingPolicyComponent renders 1`] = `
   />
   <div
     className="settingsV2IndexingPolicyEditor"
+    tabIndex={0}
   />
 </Stack>
 `;

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ScaleComponent.test.tsx.snap

@@ -16,7 +16,6 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
       styles={
         Object {
           "root": Object {
-            "color": "windowtext",
             "fontSize": 14,
           },
         }

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap

@@ -136,7 +136,6 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -413,7 +412,6 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -954,7 +952,6 @@ exports[`SubSettingsComponent renders 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }
@@ -1231,7 +1228,6 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
             styles={
               Object {
                 "root": Object {
-                  "color": "windowtext",
                   "fontSize": 14,
                 },
               }

src/Explorer/Controls/Settings/__snapshots__/SettingsComponent.test.tsx.snap

@@ -34,7 +34,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {},
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -102,7 +101,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
-                "phoenixClient": PhoenixClient {},
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],

src/Explorer/Controls/Settings/__snapshots__/SettingsRenderUtils.test.tsx.snap

@@ -159,7 +159,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -167,17 +166,16 @@ exports[`SettingsUtils functions render 1`] = `
   >
     The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
      
-    <StyledLinkBase
+    <a
       href="https://aka.ms/cosmos-autoscale-migration"
     >
       Learn more
-    </StyledLinkBase>
+    </a>
   </Text>
   <Text
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -197,7 +195,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -210,7 +207,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -223,7 +219,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -235,7 +230,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -255,7 +249,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -271,7 +264,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -286,7 +278,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -300,7 +291,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -312,7 +302,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -332,7 +321,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -375,7 +363,6 @@ exports[`SettingsUtils functions render 1`] = `
       styles={
         Object {
           "root": Object {
-            "color": "windowtext",
             "fontSize": 14,
           },
         }
@@ -391,7 +378,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }
@@ -408,7 +394,6 @@ exports[`SettingsUtils functions render 1`] = `
     styles={
       Object {
         "root": Object {
-          "color": "windowtext",
           "fontSize": 14,
         },
       }

src/Explorer/Controls/Tabs/TabComponent.less

@@ -1,6 +1,7 @@
 @import "../../../../less/Common/Constants";
 
 .tabComponentContainer {
+    overflow: hidden;
     height: 100%;
     .flex-display();
     .flex-direction();

src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx

@@ -6,7 +6,6 @@ import { userContext } from "../../../../UserContext";
 import {
   calculateEstimateNumber,
   computeRUUsagePriceHourly,
-  estimatedCostDisclaimer,
   getAutoscalePricePerRu,
   getCurrencySign,
   getMultimasterMultiplier,
@@ -43,9 +42,11 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
   const currency: string = getPriceCurrency(serverId);
   const currencySign: string = getCurrencySign(serverId);
   const multiplier = getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
-  const pricePerRu = isAutoscale ? getAutoscalePricePerRu(serverId, multiplier) : getPricePerRu(serverId, multiplier);
+  const pricePerRu = isAutoscale
+    ? getAutoscalePricePerRu(serverId, multiplier) * multiplier
+    : getPricePerRu(serverId) * multiplier;
 
-  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>{estimatedCostDisclaimer}</InfoTooltip>;
+  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>PricingUtils.estimatedCostDisclaimer</InfoTooltip>;
 
   if (isAutoscale) {
     return (

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -120,6 +120,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           aria-label="Autoscale mode"
           checked={isAutoscaleSelected}
           type="radio"
+          role="radio"
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Autoscale")}
         />
@@ -130,6 +131,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           aria-label="Manual mode"
           checked={!isAutoscaleSelected}
           type="radio"
+          role="radio"
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Manual")}
         />

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -345,14 +345,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     ariaLabel="Info"
                     className="panelInfoIcon"
                     iconName="Info"
-                    tabIndex={0}
                   >
                     <IconBase
                       ariaLabel="Info"
                       className="panelInfoIcon"
                       iconName="Info"
                       styles={[Function]}
-                      tabIndex={0}
                       theme={
                         Object {
                           "disableGlobalClassNames": false,
@@ -632,7 +630,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         className="panelInfoIcon root-57"
                         data-icon-name="Info"
                         role="img"
-                        tabIndex={0}
                       >
                         
                       </i>
@@ -658,6 +655,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           className="throughputInputRadioBtn"
           key=".0:$.0"
           onChange={[Function]}
+          role="radio"
           tabIndex={0}
           type="radio"
         />
@@ -673,6 +671,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           className="throughputInputRadioBtn"
           key=".0:$.2"
           onChange={[Function]}
+          role="radio"
           tabIndex={0}
           type="radio"
         />
@@ -1328,14 +1327,12 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         ariaLabel="Info"
                         className="panelInfoIcon"
                         iconName="Info"
-                        tabIndex={0}
                       >
                         <IconBase
                           ariaLabel="Info"
                           className="panelInfoIcon"
                           iconName="Info"
                           styles={[Function]}
-                          tabIndex={0}
                           theme={
                             Object {
                               "disableGlobalClassNames": false,
@@ -1615,7 +1612,6 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             className="panelInfoIcon root-57"
                             data-icon-name="Info"
                             role="img"
-                            tabIndex={0}
                           >
                             
                           </i>

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -243,7 +243,6 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
       <div ref={this.contextMenuRef} onContextMenu={this.onRightClick} onKeyPress={this.onMoreButtonKeyPress}>
         <IconButton
           name="More"
-          title="More"
           className="treeMenuEllipsis"
           ariaLabel={menuItemLabel}
           menuIconProps={{

src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap

@@ -211,7 +211,6 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
             },
           }
         }
-        title="More"
       />
     </div>
   </div>
@@ -424,7 +423,6 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
             },
           }
         }
-        title="More"
       />
     </div>
   </div>

src/Explorer/Explorer.tsx

@@ -16,7 +16,6 @@ import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useTabs } from "../hooks/useTabs";
 import { IGalleryItem } from "../Juno/JunoClient";
-import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
@@ -88,13 +87,12 @@ export default class Explorer {
   };
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
-  private phoenixClient: PhoenixClient;
+
   constructor() {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
     this._isInitializingNotebooks = false;
-    this.phoenixClient = new PhoenixClient();
     useNotebook.subscribe(
       () => this.refreshCommandBarButtons(),
       (state) => state.isNotebooksEnabledForAccount
@@ -345,23 +343,7 @@ export default class Explorer {
       return;
     }
     this._isInitializingNotebooks = true;
-    if (userContext.features.phoenix) {
-      const provisionData = {
-        cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
-        resourceId: userContext.databaseAccount.id,
-        dbAccountName: userContext.databaseAccount.name,
-        aadToken: userContext.authorizationToken,
-        resourceGroup: userContext.resourceGroup,
-        subscriptionId: userContext.subscriptionId,
-      };
-      const connectionInfo = await this.phoenixClient.containerConnectionInfo(provisionData);
-      if (connectionInfo.data && connectionInfo.data.notebookServerUrl) {
-        useNotebook.getState().setNotebookServerInfo({
-          notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.data.notebookServerUrl,
-          authToken: userContext.features.notebookServerToken || connectionInfo.data.notebookAuthToken,
-        });
-      }
-    } else {
+
     await this.ensureNotebookWorkspaceRunning();
     const connectionInfo = await listConnectionInfo(
       userContext.subscriptionId,
@@ -374,7 +356,6 @@ export default class Explorer {
       notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
       authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
     });
-    }
 
     useNotebook.getState().initializeNotebooksTree(this.notebookManager);
 
@@ -383,7 +364,7 @@ export default class Explorer {
     this._isInitializingNotebooks = false;
   }
 
-  public resetNotebookWorkspace(): void {
+  public resetNotebookWorkspace() {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
       handleError(
         "Attempt to reset notebook workspace, but notebook is not enabled",
@@ -408,6 +389,7 @@ export default class Explorer {
     if (!databaseAccount) {
       return false;
     }
+
     try {
       const { value: workspaces } = await listByDatabaseAccount(
         userContext.subscriptionId,
@@ -924,7 +906,7 @@ export default class Explorer {
     await this.notebookManager?.notebookContentClient.updateItemChildrenInPlace(item);
   }
 
-  public openNotebookTerminal(kind: ViewModels.TerminalKind): void {
+  public openNotebookTerminal(kind: ViewModels.TerminalKind) {
     let title: string;
 
     switch (kind) {
@@ -1044,10 +1026,7 @@ export default class Explorer {
   }
 
   public async handleOpenFileAction(path: string): Promise<void> {
-    if (
-      userContext.features.phoenix === false &&
-      !(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))
-    ) {
+    if (!(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))) {
       this._openSetupNotebooksPaneForQuickstart();
     }
 
@@ -1093,13 +1072,10 @@ export default class Explorer {
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
     await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
-    let isNotebookEnabled = true;
-    if (!userContext.features.phoenix) {
-      isNotebookEnabled =
+    const isNotebookEnabled: boolean =
       userContext.authType !== AuthType.ResourceToken &&
       ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
         userContext.features.enableNotebooks);
-    }
     useNotebook.getState().setIsNotebookEnabled(isNotebookEnabled);
     useNotebook.getState().setIsShellEnabled(isNotebookEnabled && isPublicInternetAccessAllowed());
 

src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx

@@ -214,14 +214,8 @@ export class EditorNeighborsComponent extends React.Component<EditorNeighborsCom
               />
             </td>
             <td className="actionCol">
-              <span
-                className="rightPaneTrashIcon rightPaneBtns"
-                role="button"
-                onKeyPress={() => this.removeAddedEdgeToNeighbor(index)}
-                onClick={() => this.removeAddedEdgeToNeighbor(index)}
-                tabIndex={0}
-              >
-                <img src={DeleteIcon} alt="Delete" />
+              <span className="rightPaneTrashIcon rightPaneBtns">
+                <img src={DeleteIcon} alt="Delete" onClick={() => this.removeAddedEdgeToNeighbor(index)} />
               </span>
             </td>
           </tr>

src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx

@@ -123,7 +123,7 @@ export class EditorNodePropertiesComponent extends React.Component<EditorNodePro
           <select
             className="typeSelect"
             value={singleValue.type}
-            onBlur={(e) => {
+            onChange={(e) => {
               singleValue.type = e.target.value as ViewModels.InputPropertyValueTypeString;
               if (singleValue.type === "null") {
                 singleValue.value = undefined;
@@ -217,7 +217,7 @@ export class EditorNodePropertiesComponent extends React.Component<EditorNodePro
                 <select
                   className="typeSelect"
                   value={firstValue.type}
-                  onBlur={(e) => {
+                  onChange={(e) => {
                     firstValue.type = e.target.value as ViewModels.InputPropertyValueTypeString;
                     this.props.onUpdateProperties(this.props.editedProperties);
                   }}

src/Explorer/Graph/GraphExplorerComponent/GraphData.test.ts

@@ -1,11 +1,11 @@
-import { GraphData, GremlinVertex, GremlinEdge } from "./GraphData";
+import { GraphData, GremlinEdge, GremlinVertex } from "./GraphData";
 
 describe("Graph Data", () => {
   it("should set only one node as root", () => {
     const graphData = new GraphData<GremlinVertex, GremlinEdge>();
-    const v1: GremlinVertex = { id: "1", label: null };
-    const v2: GremlinVertex = { id: "2", label: null };
-    const v3: GremlinVertex = { id: "3", label: null };
+    const v1: GremlinVertex = { id: "1", label: undefined };
+    const v2: GremlinVertex = { id: "2", label: undefined };
+    const v3: GremlinVertex = { id: "3", label: undefined };
     v3._isRoot = true;
 
     graphData.addVertex(v1);
@@ -28,9 +28,9 @@ describe("Graph Data", () => {
 
   it("should properly find root id", () => {
     const graphData = new GraphData();
-    const v1: GremlinVertex = { id: "1", label: null };
-    const v2: GremlinVertex = { id: "2", label: null };
-    const v3: GremlinVertex = { id: "3", label: null };
+    const v1: GremlinVertex = { id: "1", label: undefined };
+    const v2: GremlinVertex = { id: "2", label: undefined };
+    const v3: GremlinVertex = { id: "3", label: undefined };
 
     graphData.addVertex(v1);
     graphData.addVertex(v2);
@@ -44,12 +44,12 @@ describe("Graph Data", () => {
   it("should remove edge from graph", () => {
     const graphData = new GraphData();
 
-    graphData.addVertex({ id: "v1", label: null });
-    graphData.addVertex({ id: "v2", label: null });
-    graphData.addVertex({ id: "v3", label: null });
+    graphData.addVertex({ id: "v1", label: undefined });
+    graphData.addVertex({ id: "v2", label: undefined });
+    graphData.addVertex({ id: "v3", label: undefined });
 
-    graphData.addEdge({ id: "e1", inV: "v1", outV: "v2", label: null });
-    graphData.addEdge({ id: "e2", inV: "v1", outV: "v3", label: null });
+    graphData.addEdge({ id: "e1", inV: "v1", outV: "v2", label: "" });
+    graphData.addEdge({ id: "e2", inV: "v1", outV: "v3", label: "" });
 
     // in edge
     graphData.removeEdge("e1", false);

src/Explorer/Graph/GraphExplorerComponent/GraphData.ts

@@ -1,5 +1,5 @@
+import { SimulationLinkDatum, SimulationNodeDatum } from "d3";
 import _ from "underscore";
-import { SimulationNodeDatum, SimulationLinkDatum } from "d3";
 
 export interface PaginationInfo {
   total: number;
@@ -10,7 +10,7 @@ export interface PaginationInfo {
 
 export interface GremlinVertex {
   id: string;
-  label: string;
+  label?: string;
   inE?: { [label: string]: GremlinShortInEdge[] };
   outE?: { [label: string]: GremlinShortOutEdge[] };
   properties?: { [propName: string]: GremlinProperty[] };

src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
+import { GraphVizComponent, GraphVizComponentProps } from "./GraphVizComponent";
 import CollapseArrowIcon from "../../../../images/Collapse_arrow_14x14.svg";
 import ExpandIcon from "../../../../images/Expand_14x14.svg";
 import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
-import { GraphVizComponent, GraphVizComponentProps } from "./GraphVizComponent";
 
 interface MiddlePaneComponentProps {
   isTabsContentExpanded: boolean;
@@ -17,14 +17,7 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
       <div className="middlePane">
         <div className="graphTitle">
           <span className="paneTitle">Graph</span>
-          <span
-            className="graphExpandCollapseBtn pull-right"
-            onClick={this.props.toggleExpandGraph}
-            role="button"
-            aria-expanded={this.props.isTabsContentExpanded}
-            aria-name="View graph in full screen"
-            tabIndex={0}
-          >
+          <span className="graphExpandCollapseBtn pull-right" onClick={this.props.toggleExpandGraph}>
             <img
               src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
               alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"}

src/Explorer/Graph/GraphExplorerComponent/__snapshots__/EditorNodePropertiesComponent.test.tsx.snap

@@ -93,7 +93,7 @@ exports[`<EditorNodePropertiesComponent /> renders component 1`] = `
       <td>
         <select
           className="typeSelect"
-          onBlur={[Function]}
+          onChange={[Function]}
           required={true}
           value="string"
         >
@@ -282,7 +282,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
       <td>
         <select
           className="typeSelect"
-          onBlur={[Function]}
+          onChange={[Function]}
           required={true}
           value="string"
         >
@@ -344,7 +344,7 @@ exports[`<EditorNodePropertiesComponent /> renders proper unicode 1`] = `
       <td>
         <select
           className="typeSelect"
-          onBlur={[Function]}
+          onChange={[Function]}
           required={true}
           value="string"
         >

src/Explorer/Graph/GraphExplorerComponent/graphExplorer.less

@@ -15,8 +15,7 @@
 
 .graphExplorerContainer {
     margin-left: @SmallSpace;
-  overflow-y: auto;
-  overflow-x: clip;
+    overflow: hidden;
     height:100%;
     .flex-display();
     .flex-direction();
@@ -115,16 +114,16 @@
 
     .typeahead__cancel-button {
         top: 5px !important;
-    right: 0.4em !important;
+        right: .4em !important;
     }
 
+
     .queryMetricsSummary {
         margin: @LargeSpace @LargeSpace 0px @DefaultSpace;
         table-layout: fixed;
         display: block;
         overflow-y: auto;
         overflow-x: hidden;
-    min-height: 100px;
 
         .queryMetricsSummaryHead {
             .flex-display();
@@ -145,8 +144,7 @@
             font-size: 12px;
             width: 100%;
             .flex-display();
-      th,
-      td {
+            th, td {
                 padding: @DefaultSpace;
 
                 &:nth-child(1) {
@@ -170,6 +168,7 @@
         }
     }
 
+
     .graphContainer {
         overflow: hidden;
         height: 100%;
@@ -177,6 +176,7 @@
         padding-top: (2 * @MediumSpace);
         .flex-display();
 
+
         .leftPane {
             width: 200px;
                 padding: 0px 0px 0px @DefaultSpace;
@@ -249,7 +249,7 @@
                 height: 100%;
 
                 .graphModal {
-          background-color: rgba(255, 255, 255, 0.7);
+                    background-color: rgba(255, 255, 255, .7);
                     position: absolute;
                     top: 0px;
                     left: 0px;
@@ -282,6 +282,7 @@
                     min-height: 0px;
                     margin-top: 0px;
 
+
             .rightPaneHeader {
                 /* TODO: Hack to align the trashbox with the header for now. */
                 margin-top: -28px;
@@ -411,10 +412,10 @@
 
                             /* Override autocomplete stuff */
                             .typeahead__container {
-                font: @mediumFontSize "Segoe UI" !important;
+                                                    font: @mediumFontSize 'Segoe UI' !important;
 
                                 input {
-                  font: @mediumFontSize "Segoe UI" !important;
+                                                        font: @mediumFontSize 'Segoe UI' !important;
                                                         padding: 0px @SmallSpace !important;
                                 }
                             }
@@ -425,7 +426,7 @@
 
                             .typeahead__cancel-button {
                                 top: 5px !important;
-                right: 0.4em !important;
+                                right: .4em !important;
                             }
 
                             .rightPaneAddPropertyBtn {
@@ -449,8 +450,6 @@
         .flex-direction();
         overflow: hidden;
         width: 100%;
-    min-height: 200px;
-    overflow: auto;
     }
 
     .paneTitle {
@@ -609,6 +608,8 @@
                 opacity: 0;
             }
         }
+
+
     }
 
     /* scroll for leftpane, rightpane and newvertex pane*/

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -132,6 +132,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                 onLabelChange(event);
               }}
+              autoFocus
             />
             <div className="actionCol"></div>
           </div>

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -9,7 +9,6 @@ import create, { UseStore } from "zustand";
 import { StyleConstants } from "../../../Common/Constants";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { useTabs } from "../../../hooks/useTabs";
-import { userContext } from "../../../UserContext";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
 import { useSelectedNode } from "../../useSelectedNode";
@@ -55,14 +54,6 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
-  if (
-    userContext.features.notebooksTemporarilyDown === false &&
-    userContext.features.phoenix === true &&
-    useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2
-  ) {
-    uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus("connectionStatus"));
-  }
-
   if (useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
     uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker"));
   }

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -80,9 +80,8 @@ export function createStaticCommandBarButtons(
     }
 
     notebookButtons.push(createOpenTerminalButton(container));
-    if (userContext.features.phoenix === false) {
+
     notebookButtons.push(createNotebookWorkspaceResetButton(container));
-    }
     if (
       (userContext.apiType === "Mongo" &&
         useNotebook.getState().isShellEnabled &&

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -13,7 +13,6 @@ import { StyleConstants } from "../../../Common/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import { ConnectionStatus } from "./ConnectionStatusComponent";
 import { MemoryTracker } from "./MemoryTrackerComponent";
 
 /**
@@ -202,10 +201,3 @@ export const createMemoryTracker = (key: string): ICommandBarItemProps => {
     onRender: () => <MemoryTracker />,
   };
 };
-
-export const createConnectionStatus = (key: string): ICommandBarItemProps => {
-  return {
-    key,
-    onRender: () => <ConnectionStatus />,
-  };
-};

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.less

@@ -1,79 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.connectionStatusContainer {
-    cursor: default;
-    align-items: center;
-    margin: 0 9px;
-    border: 1px;
-    min-height: 44px;
-
-    > span {
-        padding-right: 12px;
-        font-size: 13px;
-        font-family: @DataExplorerFont;
-        color: @DefaultFontColor;
-    }
-}
-.connectionStatusFailed{
-    color: #bd1919;
-}
-.ring-container {
-    position: relative;
-}
-
-.ringringGreen {
-    border: 3px solid green;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
-    position: absolute;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-.ringringYellow{
-    border: 3px solid #ffbf00;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
-    position: absolute;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-.ringringRed{
-    border: 3px solid #bd1919;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
-    position: absolute;
-    margin: .4285em 0em 0em 0.07477em;
-    animation: pulsate 3s ease-out;
-    animation-iteration-count: infinite; 
-    opacity: 0.0
-}
-@keyframes pulsate {
-    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
-    15% {opacity: 0.8;}
-    25% {opacity: 0.6;}
-    45% {opacity: 0.4;}
-    70% {opacity: 0.3;}
-    100% {-webkit-transform: scale(.7, .7); opacity: 0.1;}
-}
-.locationGreenDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: green;
-}
-.locationYellowDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: #ffbf00;
-}
-.locationRedDot{
-    font-size: 20px;
-    margin-right: 0.07em;
-    color: #bd1919;
-}

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.tsx

@@ -1,72 +0,0 @@
-import { Icon, ProgressIndicator, Stack, TooltipHost } from "@fluentui/react";
-import * as React from "react";
-import { ConnectionStatusType } from "../../../Common/Constants";
-import { useNotebook } from "../../Notebook/useNotebook";
-import "../CommandBar/ConnectionStatusComponent.less";
-
-export const ConnectionStatus: React.FC = (): JSX.Element => {
-  const [second, setSecond] = React.useState("00");
-  const [minute, setMinute] = React.useState("00");
-  const [isActive, setIsActive] = React.useState(false);
-  const [counter, setCounter] = React.useState(0);
-  const [statusColor, setStatusColor] = React.useState("locationYellowDot");
-  const [statusColorAnimation, setStatusColorAnimation] = React.useState("ringringYellow");
-  const toolTipContent = "Hosted runtime status.";
-  React.useEffect(() => {
-    let intervalId: NodeJS.Timeout;
-
-    if (isActive) {
-      intervalId = setInterval(() => {
-        const secondCounter = counter % 60;
-        const minuteCounter = Math.floor(counter / 60);
-        const computedSecond: string = String(secondCounter).length === 1 ? `0${secondCounter}` : `${secondCounter}`;
-        const computedMinute: string = String(minuteCounter).length === 1 ? `0${minuteCounter}` : `${minuteCounter}`;
-
-        setSecond(computedSecond);
-        setMinute(computedMinute);
-
-        setCounter((counter) => counter + 1);
-      }, 1000);
-    }
-    return () => clearInterval(intervalId);
-  }, [isActive, counter]);
-
-  const stopTimer = () => {
-    setIsActive(false);
-    setCounter(0);
-    setSecond("00");
-    setMinute("00");
-  };
-
-  const connectionInfo = useNotebook((state) => state.connectionInfo);
-  if (!connectionInfo) {
-    return <></>;
-  }
-  if (connectionInfo && connectionInfo.status === ConnectionStatusType.Connecting && isActive === false) {
-    setIsActive(true);
-  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Connected && isActive === true) {
-    stopTimer();
-    setStatusColor("locationGreenDot");
-    setStatusColorAnimation("ringringGreen");
-  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Failed && isActive === true) {
-    stopTimer();
-    setStatusColor("locationRedDot");
-    setStatusColorAnimation("ringringRed");
-  }
-  return (
-    <TooltipHost content={toolTipContent}>
-      <Stack className="connectionStatusContainer" horizontal>
-        <div className="ring-container">
-          <div className={statusColorAnimation}></div>
-          <Icon iconName="LocationDot" className={statusColor} />
-        </div>
-        <span className={connectionInfo.status === ConnectionStatusType.Failed ? "connectionStatusFailed" : ""}>
-          {connectionInfo.status}
-        </span>
-        {connectionInfo.status === ConnectionStatusType.Connecting && isActive && (
-          <ProgressIndicator description={minute + ":" + second} />
-        )}
-      </Stack>
-    </TooltipHost>
-  );
-};

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -103,7 +103,6 @@ export class NotificationConsoleComponent extends React.Component<
           onClick={() => this.expandCollapseConsole()}
           onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           tabIndex={0}
-          role="button"
         >
           <div className="statusBar">
             <span className="dataTypeIcons">
@@ -130,7 +129,7 @@ export class NotificationConsoleComponent extends React.Component<
             className="expandCollapseButton"
             role="button"
             tabIndex={0}
-            aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
+            aria-label={"console button" + (this.props.isConsoleExpanded ? " collapsed" : " expanded")}
             aria-expanded={!this.props.isConsoleExpanded}
           >
             <img
@@ -163,7 +162,7 @@ export class NotificationConsoleComponent extends React.Component<
                 onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => this.onClearNotificationsKeyPress(event)}
                 tabIndex={0}
               >
-                <img src={ClearIcon} alt="clear notifications icon" />
+                <img src={ClearIcon} alt="clear notifications image" />
                 Clear Notifications
               </span>
             </div>
@@ -206,9 +205,7 @@ export class NotificationConsoleComponent extends React.Component<
         {item.type === ConsoleDataType.Error && <img className="errorIcon" src={ErrorRedIcon} alt="error" />}
         {item.type === ConsoleDataType.InProgress && <img className="loaderIcon" src={LoaderIcon} alt="in progress" />}
         <span className="date">{item.date}</span>
-        <span className="message" role="alert" aria-live="assertive">
-          {item.message}
-        </span>
+        <span className="message">{item.message}</span>
       </div>
     ));
   }

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -9,7 +9,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
-    role="button"
     tabIndex={0}
   >
     <div
@@ -71,7 +70,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
     </div>
     <div
       aria-expanded={true}
-      aria-label="console button collapsed"
+      aria-label="console button expanded"
       className="expandCollapseButton"
       role="button"
       tabIndex={0}
@@ -151,7 +150,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
           tabIndex={0}
         >
           <img
-            alt="clear notifications icon"
+            alt="clear notifications image"
             src=""
           />
           Clear Notifications
@@ -174,7 +173,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
     id="notificationConsoleHeader"
     onClick={[Function]}
     onKeyDown={[Function]}
-    role="button"
     tabIndex={0}
   >
     <div
@@ -238,7 +236,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
     </div>
     <div
       aria-expanded={true}
-      aria-label="console button collapsed"
+      aria-label="console button expanded"
       className="expandCollapseButton"
       role="button"
       tabIndex={0}
@@ -318,7 +316,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
           tabIndex={0}
         >
           <img
-            alt="clear notifications icon"
+            alt="clear notifications image"
             src=""
           />
           Clear Notifications
@@ -342,9 +340,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
             date
           </span>
           <span
-            aria-live="assertive"
             className="message"
-            role="alert"
           >
             message
           </span>

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -109,7 +109,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
   const q = params.toString();
   const suffix = q !== "" ? `?${q}` : "";
 
-  const url = (serverConfig.endpoint.slice(0, -1) || "") + `api/kernels/${kernelId}/channels${suffix}`;
+  const url = (serverConfig.endpoint || "") + `api/kernels/${kernelId}/channels${suffix}`;
 
   return url.replace(/^http(s)?/, "ws$1");
 };

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -56,7 +56,7 @@ export class NotebookContainerClient {
 
     const { notebookServerEndpoint, authToken } = this.getNotebookServerConfig();
     try {
-      const response = await fetch(`${notebookServerEndpoint}api/metrics/memory`, {
+      const response = await fetch(`${notebookServerEndpoint}/api/metrics/memory`, {
         method: "GET",
         headers: {
           Authorization: authToken,

src/Explorer/Notebook/NotebookContentClient.ts

@@ -36,10 +36,7 @@ export class NotebookContentClient {
    *
    * @param parent parent folder
    */
-  public async createNewNotebookFile(
-    parent: NotebookContentItem,
-    isGithubTree?: boolean
-  ): Promise<NotebookContentItem> {
+  public createNewNotebookFile(parent: NotebookContentItem, isGithubTree?: boolean): Promise<NotebookContentItem> {
     if (!parent || parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent must be a directory: ${parent}`);
     }
@@ -102,6 +99,7 @@ export class NotebookContentClient {
     if (!parent || parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent must be a directory: ${parent}`);
     }
+
     const filepath = NotebookUtil.getFilePath(parent.path, name);
     if (await this.checkIfFilepathExists(filepath)) {
       throw new Error(`File already exists: ${filepath}`);

src/Explorer/Notebook/SecurityWarningBar/SecurityWarningBar.tsx

@@ -66,7 +66,7 @@ interface InitialProps {
 }
 
 // Redux
-const makeMapStateToProps = (state: AppState, initialProps: InitialProps) => {
+const makeMapStateToProps = (_state: AppState, initialProps: InitialProps) => {
   const mapStateToProps = (state: AppState): StateProps => ({
     isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, initialProps.contentRef),
   });

src/Explorer/Notebook/useNotebook.ts

@@ -28,8 +28,6 @@ interface NotebookState {
   myNotebooksContentRoot: NotebookContentItem;
   gitHubNotebooksContentRoot: NotebookContentItem;
   galleryContentRoot: NotebookContentItem;
-  connectionInfo: DataModels.ContainerConnectionInfo;
-  notebookFolderName: string;
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => void;
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => void;
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void;
@@ -38,7 +36,6 @@ interface NotebookState {
   setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => void;
   setIsShellEnabled: (isShellEnabled: boolean) => void;
   setNotebookBasePath: (notebookBasePath: string) => void;
-  setNotebookFolderName: (notebookFolderName: string) => void;
   refreshNotebooksEnabledStateForAccount: () => Promise<void>;
   findItem: (root: NotebookContentItem, item: NotebookContentItem) => NotebookContentItem;
   insertNotebookItem: (parent: NotebookContentItem, item: NotebookContentItem, isGithubTree?: boolean) => void;
@@ -46,7 +43,6 @@ interface NotebookState {
   deleteNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean) => void;
   initializeNotebooksTree: (notebookManager: NotebookManager) => Promise<void>;
   initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
-  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => void;
 }
 
 export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
@@ -69,8 +65,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   myNotebooksContentRoot: undefined,
   gitHubNotebooksContentRoot: undefined,
   galleryContentRoot: undefined,
-  connectionInfo: undefined,
-  notebookFolderName: undefined,
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => set({ isNotebookEnabled }),
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => set({ isNotebooksEnabledForAccount }),
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) =>
@@ -81,7 +75,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   setMemoryUsageInfo: (memoryUsageInfo: DataModels.MemoryUsageInfo) => set({ memoryUsageInfo }),
   setIsShellEnabled: (isShellEnabled: boolean) => set({ isShellEnabled }),
   setNotebookBasePath: (notebookBasePath: string) => set({ notebookBasePath }),
-  setNotebookFolderName: (notebookFolderName: string) => set({ notebookFolderName }),
   refreshNotebooksEnabledStateForAccount: async (): Promise<void> => {
     const { databaseAccount, authType } = userContext;
     if (
@@ -175,10 +168,8 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
     isGithubTree ? set({ gitHubNotebooksContentRoot: root }) : set({ myNotebooksContentRoot: root });
   },
   initializeNotebooksTree: async (notebookManager: NotebookManager): Promise<void> => {
-    const notebookFolderName = userContext.features.phoenix === true ? "Temporary Notebooks" : "My Notebooks";
-    set({ notebookFolderName });
     const myNotebooksContentRoot = {
-      name: get().notebookFolderName,
+      name: "My Notebooks",
       path: get().notebookBasePath,
       type: NotebookContentItemType.Directory,
     };
@@ -194,7 +185,6 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
           type: NotebookContentItemType.Directory,
         }
       : undefined;
-
     set({
       myNotebooksContentRoot,
       galleryContentRoot,
@@ -256,5 +246,4 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       set({ gitHubNotebooksContentRoot });
     }
   },
-  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => set({ connectionInfo }),
 }));

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -161,7 +161,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   true
                 ).toLocaleLowerCase()}.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon iconName="Info" className="panelInfoIcon" />
               </TooltipHost>
             </Stack>
 
@@ -173,6 +173,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 aria-checked={this.state.createNewDatabase}
                 name="databaseType"
                 type="radio"
+                role="radio"
                 id="databaseCreateNew"
                 tabIndex={0}
                 onChange={this.onCreateNewDatabaseRadioBtnChange.bind(this)}
@@ -186,6 +187,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 aria-checked={!this.state.createNewDatabase}
                 name="databaseType"
                 type="radio"
+                role="radio"
                 tabIndex={0}
                 onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
               />
@@ -207,7 +209,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   size={40}
                   className="panelTextField"
                   aria-label="New database id"
-                  tabIndex={0}
+                  autoFocus
                   value={this.state.newDatabaseId}
                   onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                     this.setState({ newDatabaseId: event.target.value })
@@ -234,7 +236,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         true
                       ).toLocaleLowerCase()} within the database.`}
                     >
-                      <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                      <Icon iconName="Info" className="panelInfoIcon" />
                     </TooltipHost>
                   </Stack>
                 )}
@@ -277,7 +279,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 directionalHint={DirectionalHint.bottomLeftEdge}
                 content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon iconName="Info" className="panelInfoIcon" />
               </TooltipHost>
             </Stack>
 
@@ -317,6 +319,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   aria-label="Turn on indexing"
                   aria-checked={this.state.enableIndexing}
                   type="radio"
+                  role="radio"
                   tabIndex={0}
                   onChange={this.onTurnOnIndexing.bind(this)}
                 />
@@ -328,6 +331,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   aria-label="Turn off indexing"
                   aria-checked={!this.state.enableIndexing}
                   type="radio"
+                  role="radio"
                   tabIndex={0}
                   onChange={this.onTurnOffIndexing.bind(this)}
                 />
@@ -358,7 +362,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       "Sharded collections split your data across many replica sets (shards) to achieve unlimited scalability. Sharded collections require choosing a shard key (field) to evenly distribute your data."
                     }
                   >
-                    <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                    <Icon iconName="Info" className="panelInfoIcon" />
                   </TooltipHost>
                 </Stack>
 
@@ -370,6 +374,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     aria-checked={!this.state.isSharded}
                     name="unsharded"
                     type="radio"
+                    role="radio"
                     id="unshardedOption"
                     tabIndex={0}
                     onChange={this.onUnshardedRadioBtnChange.bind(this)}
@@ -383,6 +388,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     aria-checked={this.state.isSharded}
                     name="sharded"
                     type="radio"
+                    role="radio"
                     id="shardedOption"
                     tabIndex={0}
                     onChange={this.onShardedRadioBtnChange.bind(this)}
@@ -403,7 +409,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   directionalHint={DirectionalHint.bottomLeftEdge}
                   content={this.getPartitionKeyTooltipText()}
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon iconName="Info" className="panelInfoIcon" />
                 </TooltipHost>
               </Stack>
 
@@ -461,7 +467,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   does not count towards the throughput you provisioned for the database. This throughput amount will be
                   billed in addition to the throughput amount you provisioned at the database level.`}
               >
-                <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                <Icon iconName="Info" className="panelInfoIcon" />
               </TooltipHost>
             </Stack>
           )}
@@ -491,7 +497,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                       creating a unique key policy when a container is created, you ensure the uniqueness of one or more values
                       per partition key."
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon iconName="Info" className="panelInfoIcon" />
                 </TooltipHost>
               </Stack>
 
@@ -508,6 +514,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                             : "Comma separated paths e.g. /firstName,/address/zipCode"
                         }
                         className="panelTextField"
+                        autoFocus
                         value={uniqueKey}
                         onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                           const uniqueKeys = this.state.uniqueKeys.map((uniqueKey: string, j: number) => {
@@ -553,7 +560,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   directionalHint={DirectionalHint.bottomLeftEdge}
                   content={this.getAnalyticalStorageTooltipContent()}
                 >
-                  <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                  <Icon iconName="Info" className="panelInfoIcon" />
                 </TooltipHost>
               </Stack>
 
@@ -566,6 +573,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   aria-checked={this.state.enableAnalyticalStore}
                   name="analyticalStore"
                   type="radio"
+                  role="radio"
                   id="enableAnalyticalStoreBtn"
                   tabIndex={0}
                   onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
@@ -580,6 +588,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   aria-checked={!this.state.enableAnalyticalStore}
                   name="analyticalStore"
                   type="radio"
+                  role="radio"
                   id="disableAnalyticalStoreBtn"
                   tabIndex={0}
                   onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
@@ -628,7 +637,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                         directionalHint={DirectionalHint.bottomLeftEdge}
                         content="The _id field is indexed by default. Creating a wildcard index for all fields will optimize queries and is recommended for development."
                       >
-                        <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+                        <Icon iconName="Info" className="panelInfoIcon" />
                       </TooltipHost>
                     </Stack>
 

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -23,12 +23,10 @@ import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneFor
 
 export interface AddDatabasePaneProps {
   explorer: Explorer;
-  buttonElement?: HTMLElement;
 }
 
 export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
   explorer: container,
-  buttonElement,
 }: AddDatabasePaneProps) => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   let throughput: number;
@@ -79,7 +77,6 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
     TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage);
-    buttonElement.focus();
   }, []);
 
   const onSubmit = () => {
@@ -210,6 +207,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
             placeholder={databaseIdPlaceHolder}
             value={databaseId}
             onChange={handleonChangeDBId}
+            autoFocus
             styles={getTextFieldStyles()}
           />
 

src/Explorer/Panes/AddDatabasePanel/__snapshots__/AddDatabasePanel.test.tsx.snap

@@ -33,6 +33,7 @@ exports[`AddDatabasePane Pane should render Default properly 1`] = `
         aria-label="Database id"
         aria-required="true"
         autoComplete="off"
+        autoFocus={true}
         id="database-id"
         onChange={[Function]}
         pattern="[^/?#\\\\\\\\]*[^/?# \\\\\\\\]"

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -169,6 +169,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               aria-label="Create new keyspace"
               checked={keyspaceCreateNew}
               type="radio"
+              role="radio"
               tabIndex={0}
               onChange={() => {
                 setKeyspaceCreateNew(true);
@@ -183,6 +184,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               aria-label="Use existing keyspace"
               checked={!keyspaceCreateNew}
               type="radio"
+              role="radio"
               tabIndex={0}
               onChange={() => {
                 setKeyspaceCreateNew(false);
@@ -196,7 +198,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
             <Stack className="panelGroupSpacing">
               <TextField
                 aria-required="true"
-                required={true}
                 autoComplete="off"
                 styles={getTextFieldStyles()}
                 pattern="[^/?#\\]*[^/?# \\]"
@@ -206,6 +207,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
                 value={newKeyspaceId}
                 onChange={(e, newValue) => setNewKeyspaceId(newValue)}
                 ariaLabel="Keyspace id"
+                autoFocus
               />
 
               {!isServerlessAccount() && (
@@ -283,7 +285,6 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
               underlined
               styles={getTextFieldStyles({ fontSize: 12, width: 150 })}
               aria-required="true"
-              required={true}
               ariaLabel="addCollection-tableId"
               autoComplete="off"
               pattern="[^/?#\\]*[^/?# \\]"

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -5,7 +5,6 @@ import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { IPinnedRepo, JunoClient } from "../../../Juno/JunoClient";
-import { userContext } from "../../../UserContext";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
@@ -76,8 +75,6 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
           selectedLocation.owner,
           selectedLocation.repo
         )} - ${selectedLocation.branch}`;
-      } else if (selectedLocation.type === "MyNotebooks" && userContext.features.phoenix) {
-        destination = "My Notebooks Scratch";
       }
 
       clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

@@ -12,7 +12,6 @@ import {
 import React, { FormEvent, FunctionComponent } from "react";
 import { IPinnedRepo } from "../../../Juno/JunoClient";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
-import { useNotebook } from "../../Notebook/useNotebook";
 import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
 
 interface Location {
@@ -47,10 +46,11 @@ export const CopyNotebookPaneComponent: FunctionComponent<CopyNotebookPaneProps>
 
   const getDropDownOptions = (): IDropdownOption[] => {
     const options: IDropdownOption[] = [];
+
     options.push({
       key: "MyNotebooks-Item",
-      text: useNotebook.getState().notebookFolderName,
-      title: useNotebook.getState().notebookFolderName,
+      text: ResourceTreeAdapter.MyNotebooksTitle,
+      title: ResourceTreeAdapter.MyNotebooksTitle,
       data: {
         type: "MyNotebooks",
       } as Location,

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -108,8 +108,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
     submitButtonText: "OK",
     onSubmit,
   };
-  const confirmContainer = `Confirm by typing the ${collectionName.toLowerCase()} id`;
-  const reasonInfo = `Help us improve Azure Cosmos DB! What is the reason why you are deleting this ${collectionName}?`;
   return (
     <RightPaneForm {...props}>
       <div className="panelFormWrapper">
@@ -119,12 +117,12 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
             <Text variant="small">Confirm by typing the {collectionName.toLowerCase()} id</Text>
             <TextField
               id="confirmCollectionId"
+              autoFocus
               value={inputCollectionName}
               styles={{ fieldGroup: { width: 300 } }}
               onChange={(event, newInput?: string) => {
                 setInputCollectionName(newInput);
               }}
-              ariaLabel={confirmContainer}
             />
           </div>
           {shouldRecordFeedback() && (
@@ -144,7 +142,6 @@ export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectio
                 onChange={(event, newInput?: string) => {
                   setDeleteCollectionFeedback(newInput);
                 }}
-                ariaLabel={reasonInfo}
               />
             </div>
           )}

src/Explorer/Panes/DeleteCollectionConfirmationPane/__snapshots__/DeleteCollectionConfirmationPane.test.tsx.snap

@@ -40,7 +40,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               </span>
             </Text>
             <StyledTextFieldBase
-              ariaLabel="Confirm by typing the container id"
+              autoFocus={true}
               id="confirmCollectionId"
               onChange={[Function]}
               styles={
@@ -53,7 +53,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               value=""
             >
               <TextFieldBase
-                ariaLabel="Confirm by typing the container id"
+                autoFocus={true}
                 deferredValidationTime={200}
                 id="confirmCollectionId"
                 onChange={[Function]}
@@ -346,7 +346,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     >
                       <input
                         aria-invalid={false}
-                        aria-label="Confirm by typing the container id"
+                        autoFocus={true}
                         className="ms-TextField-field field-57"
                         id="confirmCollectionId"
                         onBlur={[Function]}

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -118,8 +118,7 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
     message:
       "Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.",
   };
-  const confirmDatabase = "Confirm by typing the database id";
-  const reasonInfo = "Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?";
+
   return (
     <RightPaneForm {...props}>
       {!formError && <PanelInfoErrorComponent {...errorProps} />}
@@ -129,11 +128,11 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
           <Text variant="small">Confirm by typing the database id</Text>
           <TextField
             id="confirmDatabaseId"
+            autoFocus
             styles={{ fieldGroup: { width: 300 } }}
             onChange={(event, newInput?: string) => {
               setDatabaseInput(newInput);
             }}
-            ariaLabel={confirmDatabase}
           />
         </div>
         {isLastNonEmptyDatabase() && (
@@ -152,7 +151,6 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
               onChange={(event, newInput?: string) => {
                 setDatabaseFeedbackInput(newInput);
               }}
-              ariaLabel={reasonInfo}
             />
           </div>
         )}

src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx

@@ -153,7 +153,7 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
               selectedKey={paramKeyValue && paramKeyValue.key}
             />
           ))}
-          <Stack horizontal onClick={addNewParamAtLastIndex} tabIndex={0}>
+          <Stack horizontal onClick={addNewParamAtLastIndex}>
             <Image {...imageProps} src={AddPropertyIcon} alt="Add param" />
             <Text className="addNewParamStyle">Add New Param</Text>
           </Stack>

src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx

@@ -59,22 +59,30 @@ export const InputParameter: FunctionComponent<InputParameterProps> = ({
           onChange={onParamKeyChange}
           options={options}
           styles={dropdownStyles}
-          tabIndex={0}
         />
         <TextField
           label={inputLabel && inputLabel}
           id="confirmCollectionId"
+          autoFocus
           value={paramValue}
           onChange={onParamValueChange}
         />
         {isAddRemoveVisible && (
           <>
-            <div tabIndex={0} onClick={onDeleteParamKeyPress} role="button" onKeyPress={onDeleteParamKeyPress}>
-              <Image {...imageProps} src={EntityCancelIcon} alt="Delete param" id="deleteparam" />
-            </div>
-            <div tabIndex={0} onClick={onAddNewParamKeyPress} role="button" onKeyPress={onAddNewParamKeyPress}>
-              <Image {...imageProps} src={AddPropertyIcon} alt="Add param" id="addparam" />
-            </div>
+            <Image
+              {...imageProps}
+              src={EntityCancelIcon}
+              alt="Delete param"
+              id="deleteparam"
+              onClick={onDeleteParamKeyPress}
+            />
+            <Image
+              {...imageProps}
+              src={AddPropertyIcon}
+              alt="Add param"
+              id="addparam"
+              onClick={onAddNewParamKeyPress}
+            />
           </>
         )}
       </Stack>

src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap

@@ -345,7 +345,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       },
                     }
                   }
-                  tabIndex={0}
                 >
                   <DropdownBase
                     label="Key"
@@ -364,7 +363,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     }
                     selectedKey="string"
                     styles={[Function]}
-                    tabIndex={0}
                     theme={
                       Object {
                         "disableGlobalClassNames": false,
@@ -666,7 +664,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       responsiveMode={3}
                       selectedKey="string"
                       styles={[Function]}
-                      tabIndex={0}
                       theme={
                         Object {
                           "disableGlobalClassNames": false,
@@ -1565,12 +1562,14 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   </DropdownBase>
                 </Dropdown>
                 <StyledTextFieldBase
+                  autoFocus={true}
                   id="confirmCollectionId"
                   key=".0:$.1"
                   label="Value"
                   onChange={[Function]}
                 >
                   <TextFieldBase
+                    autoFocus={true}
                     deferredValidationTime={200}
                     id="confirmCollectionId"
                     label="Value"
@@ -2156,6 +2155,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           <input
                             aria-invalid={false}
                             aria-labelledby="TextFieldLabel3"
+                            autoFocus={true}
                             className="ms-TextField-field field-77"
                             id="confirmCollectionId"
                             onBlur={[Function]}
@@ -2500,7 +2500,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       },
                     }
                   }
-                  tabIndex={0}
                 >
                   <DropdownBase
                     label="Key"
@@ -2519,7 +2518,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     }
                     selectedKey="string"
                     styles={[Function]}
-                    tabIndex={0}
                     theme={
                       Object {
                         "disableGlobalClassNames": false,
@@ -2821,7 +2819,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                       responsiveMode={3}
                       selectedKey="string"
                       styles={[Function]}
-                      tabIndex={0}
                       theme={
                         Object {
                           "disableGlobalClassNames": false,
@@ -3720,6 +3717,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   </DropdownBase>
                 </Dropdown>
                 <StyledTextFieldBase
+                  autoFocus={true}
                   id="confirmCollectionId"
                   key=".0:$.1"
                   label="Param"
@@ -3727,6 +3725,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   value=""
                 >
                   <TextFieldBase
+                    autoFocus={true}
                     deferredValidationTime={200}
                     id="confirmCollectionId"
                     label="Param"
@@ -4313,6 +4312,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                           <input
                             aria-invalid={false}
                             aria-labelledby="TextFieldLabel7"
+                            autoFocus={true}
                             className="ms-TextField-field field-77"
                             id="confirmCollectionId"
                             onBlur={[Function]}
@@ -4327,17 +4327,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     </div>
                   </TextFieldBase>
                 </StyledTextFieldBase>
-                <div
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                  role="button"
-                  tabIndex={0}
-                >
                 <StyledImageBase
                   alt="Delete param"
                   className="addRemoveIconLabel"
                   height={30}
                   id="deleteparam"
+                  onClick={[Function]}
                   src=""
                   width={20}
                 >
@@ -4346,6 +4341,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     className="addRemoveIconLabel"
                     height={30}
                     id="deleteparam"
+                    onClick={[Function]}
                     src=""
                     styles={[Function]}
                     theme={
@@ -4637,6 +4633,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
                         id="deleteparam"
                         key="fabricImage"
+                        onClick={[Function]}
                         onError={[Function]}
                         onLoad={[Function]}
                         src=""
@@ -4644,18 +4641,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     </div>
                   </ImageBase>
                 </StyledImageBase>
-                </div>
-                <div
-                  onClick={[Function]}
-                  onKeyPress={[Function]}
-                  role="button"
-                  tabIndex={0}
-                >
                 <StyledImageBase
                   alt="Add param"
                   className="addRemoveIconLabel"
                   height={30}
                   id="addparam"
+                  onClick={[Function]}
                   src=""
                   width={20}
                 >
@@ -4664,6 +4655,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                     className="addRemoveIconLabel"
                     height={30}
                     id="addparam"
+                    onClick={[Function]}
                     src=""
                     styles={[Function]}
                     theme={
@@ -4955,6 +4947,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                         className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-87"
                         id="addparam"
                         key="fabricImage"
+                        onClick={[Function]}
                         onError={[Function]}
                         onLoad={[Function]}
                         src=""
@@ -4963,18 +4956,15 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
                   </ImageBase>
                 </StyledImageBase>
               </div>
-              </div>
             </Stack>
           </InputParameter>
           <Stack
             horizontal={true}
             onClick={[Function]}
-            tabIndex={0}
           >
             <div
               className="ms-Stack css-54"
               onClick={[Function]}
-              tabIndex={0}
             >
               <StyledImageBase
                 alt="Add param"

src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap

@@ -23,7 +23,6 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "isTabsContentExpanded": [Function],
             "onRefreshDatabasesKeyPress": [Function],
             "onRefreshResourcesClick": [Function],
-            "phoenixClient": PhoenixClient {},
             "provideFeedbackEmail": [Function],
             "queriesClient": QueriesClient {
               "container": [Circular],

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx

@@ -92,6 +92,7 @@ export const LoadQueryPane: FunctionComponent = (): JSX.Element => {
               id="confirmCollectionId"
               label="Select a query document"
               value={selectedFileName}
+              autoFocus
               readOnly
               styles={{ fieldGroup: { width: 300 } }}
             />

src/Explorer/Panes/LoadQueryPane/__snapshots__/LoadQueryPane.test.tsx.snap

@@ -17,6 +17,7 @@ exports[`Load Query Pane should render Default properly 1`] = `
         horizontal={true}
       >
         <StyledTextFieldBase
+          autoFocus={true}
           id="confirmCollectionId"
           label="Select a query document"
           readOnly={true}

src/Explorer/Panes/PanelComponent.less

@@ -3,13 +3,13 @@
 .panelFormWrapper {
   display: flex;
   flex-direction: column;
-  min-height: 100%;
+  height: 100%;
 
   .panelMainContent {
     flex-grow: 1;
     padding: 0 34px;
     margin: 20px 0;
-    overflow-x: hidden;
+    overflow: auto;
 
     & > :not(.collapsibleSection) {
       margin-bottom: @DefaultSpace;

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -33,13 +33,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
     <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
       {icon}
       <span className="panelWarningErrorDetailsLinkContainer">
-        <Text
-          role="alert"
-          aria-live="assertive"
-          aria-label={message}
-          className="panelWarningErrorMessage"
-          variant="small"
-        >
+        <Text className="panelWarningErrorMessage" variant="small" aria-label="message">
           {message}
           {link && linkText && (
             <Link target="_blank" href={link}>
@@ -48,15 +42,9 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
           )}
         </Text>
         {showErrorDetails && (
-          <span
-            className="paneErrorLink moreOption"
-            role="link"
-            onClick={expandConsole}
-            onKeyPress={expandConsole}
-            tabIndex={0}
-          >
+          <a className="paneErrorLink" role="link" onClick={expandConsole}>
             More details
-          </span>
+          </a>
         )}
       </span>
     </Stack>

src/Explorer/Panes/PanelLoadingScreen.tsx

@@ -3,6 +3,6 @@ import LoadingIndicator_3Squares from "../../../images/LoadingIndicator_3Squares
 
 export const PanelLoadingScreen: React.FunctionComponent = () => (
   <div className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer">
-    <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} alt="loading indicator" />
+    <img className="dataExplorerLoader" src={LoadingIndicator_3Squares} />
   </div>
 );

src/Explorer/Panes/RightPaneForm/RightPaneForm.test.tsx

@@ -34,6 +34,6 @@ describe("Right Pane Form", () => {
   it("should render error in header", () => {
     render(<RightPaneForm {...props} formError="file already Exist" />);
     expect(screen.getByLabelText("error")).toBeDefined();
-    expect(screen.getByRole("alert").innerHTML).toEqual("file already Exist");
+    expect(screen.getByLabelText("message").innerHTML).toEqual("file already Exist");
   });
 });

src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx

@@ -146,6 +146,7 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({ explorer
             <TextField
               id="saveQueryInput"
               label="Name"
+              autoFocus
               styles={{ fieldGroup: { width: 300 } }}
               onChange={(event, newInput?: string) => {
                 setQueryName(newInput);

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -195,6 +195,7 @@ export const SettingsPane: FunctionComponent = () => {
                 step={1}
                 className="textfontclr"
                 role="textbox"
+                tabIndex={0}
                 id="max-degree"
                 value={"" + maxDegreeOfParallelism}
                 onIncrement={(newValue) => setMaxDegreeOfParallelism(parseInt(newValue) + 1 || maxDegreeOfParallelism)}

src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap

@@ -123,6 +123,7 @@ exports[`Settings Pane should render Default properly 1`] = `
           onValidate={[Function]}
           role="textbox"
           step={1}
+          tabIndex={0}
           value="6"
         />
       </div>

src/Explorer/Panes/StringInputPane/StringInputPane.tsx

@@ -97,6 +97,7 @@ export const StringInputPane: FunctionComponent<StringInputPanelProps> = ({
           label={inputLabel}
           name="collectionIdConfirmation"
           value={stringInput}
+          autoFocus
           required
           onChange={(event: FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) =>
             setStringInput(newValue)

src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap

@@ -13,7 +13,6 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
-      "phoenixClient": PhoenixClient {},
       "provideFeedbackEmail": [Function],
       "queriesClient": QueriesClient {
         "container": [Circular],
@@ -56,6 +55,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       >
         <StyledTextFieldBase
           aria-label="Enter new directory name"
+          autoFocus={true}
           label="Enter new directory name"
           name="collectionIdConfirmation"
           onChange={[Function]}
@@ -64,6 +64,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
         >
           <TextFieldBase
             aria-label="Enter new directory name"
+            autoFocus={true}
             deferredValidationTime={200}
             label="Enter new directory name"
             name="collectionIdConfirmation"
@@ -653,6 +654,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
                   <input
                     aria-invalid={false}
                     aria-labelledby="TextFieldLabel2"
+                    autoFocus={true}
                     className="ms-TextField-field field-56"
                     id="TextField0"
                     name="collectionIdConfirmation"

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.test.tsx

@@ -29,7 +29,6 @@ describe("Table query select Panel", () => {
   it("Should checked availableCheckbox by default", () => {
     const wrapper = mount(<TableQuerySelectPanel {...props} />);
     expect(wrapper.find("#availableCheckbox").first().props()).toEqual({
-      ariaPositionInSet: 0,
       id: "availableCheckbox",
       label: "Available Columns",
       checked: true,

src/Explorer/Panes/Tables/TableQuerySelectPanel/TableQuerySelectPanel.tsx

@@ -128,9 +128,8 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
               label="Available Columns"
               checked={isAvailableColumnChecked}
               onChange={availableColumnsCheckboxClick}
-              ariaPositionInSet={0}
             />
-            {columnOptions.map((column, index) => {
+            {columnOptions.map((column) => {
               return (
                 <Checkbox
                   label={column.columnName}
@@ -138,7 +137,6 @@ export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps
                   key={column.columnName}
                   checked={column.selected}
                   disabled={!column.editable}
-                  ariaPositionInSet={index + 1}
                 />
               );
             })}

src/Explorer/Panes/Tables/TableQuerySelectPanel/__snapshots__/TableQuerySelectPanel.test.tsx.snap

@@ -37,14 +37,12 @@ exports[`Table query select Panel should render Default properly 1`] = `
             className="column-select-view"
           >
             <StyledCheckboxBase
-              ariaPositionInSet={0}
               checked={true}
               id="availableCheckbox"
               label="Available Columns"
               onChange={[Function]}
             >
               <CheckboxBase
-                ariaPositionInSet={0}
                 checked={true}
                 id="availableCheckbox"
                 label="Available Columns"
@@ -330,7 +328,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                   <input
                     aria-checked="true"
                     aria-label="Available Columns"
-                    aria-posinset={0}
                     checked={true}
                     className="input-55"
                     data-ktp-execute-target={true}
@@ -649,7 +646,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
               </CheckboxBase>
             </StyledCheckboxBase>
             <StyledCheckboxBase
-              ariaPositionInSet={1}
               checked={true}
               disabled={false}
               key=""
@@ -657,7 +653,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
               onChange={[Function]}
             >
               <CheckboxBase
-                ariaPositionInSet={1}
                 checked={true}
                 disabled={false}
                 label=""
@@ -944,7 +939,6 @@ exports[`Table query select Panel should render Default properly 1`] = `
                     aria-checked="true"
                     aria-disabled={false}
                     aria-label=""
-                    aria-posinset={1}
                     checked={true}
                     className="input-55"
                     data-ktp-execute-target={true}

src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap

@@ -327,17 +327,13 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
               key=".0:$.1"
             >
               <Text
-                aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
-                aria-live="assertive"
+                aria-label="message"
                 className="panelWarningErrorMessage"
-                role="alert"
                 variant="small"
               >
                 <span
-                  aria-label="Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources."
-                  aria-live="assertive"
+                  aria-label="message"
                   className="panelWarningErrorMessage css-56"
-                  role="alert"
                 >
                   Warning! The action you are about to take cannot be undone. Continuing will permanently delete this resource and all of its children resources.
                 </span>
@@ -367,7 +363,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             </span>
           </Text>
           <StyledTextFieldBase
-            ariaLabel="Confirm by typing the database id"
+            autoFocus={true}
             id="confirmDatabaseId"
             onChange={[Function]}
             styles={
@@ -379,7 +375,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             }
           >
             <TextFieldBase
-              ariaLabel="Confirm by typing the database id"
+              autoFocus={true}
               deferredValidationTime={200}
               id="confirmDatabaseId"
               onChange={[Function]}
@@ -671,7 +667,7 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <input
                       aria-invalid={false}
-                      aria-label="Confirm by typing the database id"
+                      autoFocus={true}
                       className="ms-TextField-field field-60"
                       id="confirmDatabaseId"
                       onBlur={[Function]}
@@ -711,7 +707,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             </span>
           </Text>
           <StyledTextFieldBase
-            ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
             id="deleteDatabaseFeedbackInput"
             multiline={true}
             onChange={[Function]}
@@ -725,7 +720,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
             }
           >
             <TextFieldBase
-              ariaLabel="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
               deferredValidationTime={200}
               id="deleteDatabaseFeedbackInput"
               multiline={true}
@@ -1019,7 +1013,6 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
                   >
                     <textarea
                       aria-invalid={false}
-                      aria-label="Help us improve Azure Cosmos DB! What is the reason why you are deleting this database?"
                       className="ms-TextField-field field-71"
                       id="deleteDatabaseFeedbackInput"
                       onBlur={[Function]}

src/Explorer/SplashScreen/SplashScreen.less

@@ -108,8 +108,7 @@
             }
 
             .oneLineContent {
-              margin-top: 6px;
-              margin-left: 6px;
+              margin-top: 4px;
             }
 
             .twoLineContent {
@@ -134,12 +133,12 @@
           .flex-display();
           .flex-direction();
 
-            .title {
+          >.title {
             color: @BaseDark;
             padding: 0px;
             font-size: 12px;
           }
-            .description {
+          >.description {
             color: @BaseDark;
           }
 

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -128,8 +128,9 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               <div className="title">Common Tasks</div>
               <ul>
                 {commonTaskItems.map((item) => (
-                  <li className="focusable" key={`${item.title}${item.description}`}>
-                    <div
+                  <li
+                    className="focusable"
+                    key={`${item.title}${item.description}`}
                     onClick={item.onClick}
                     onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
                     tabIndex={0}
@@ -139,7 +140,6 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
                     <span className="oneLineContent" title={item.info}>
                       {item.title}
                     </span>
-                    </div>
                   </li>
                 ))}
               </ul>
@@ -165,23 +165,22 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               <div className="title">Tips</div>
               <ul>
                 {tipsItems.map((item) => (
-                  <li className="tipContainer focusable" key={`${item.title}${item.description}`}>
-                    <div
+                  <li
+                    className="tipContainer focusable"
+                    key={`${item.title}${item.description}`}
                     onClick={item.onClick}
                     onKeyPress={(event: React.KeyboardEvent) => this.onSplashScreenItemKeyPress(event, item.onClick)}
                     tabIndex={0}
-                      role="button"
-                      className="tipsWrapper"
+                    role="link"
                   >
                     <div className="title" title={item.info}>
                       {item.title}
                     </div>
                     <div className="description">{item.description}</div>
-                    </div>
                   </li>
                 ))}
                 <li>
-                  <a href={SplashScreen.seeMoreItemUrl} rel="noreferrer" target="_blank" tabIndex={0}>
+                  <a role="link" href={SplashScreen.seeMoreItemUrl} rel="noreferrer" target="_blank" tabIndex={0}>
                     {SplashScreen.seeMoreItemTitle}
                   </a>
                 </li>
@@ -308,23 +307,16 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         iconSrc: AddDatabaseIcon,
         title: "New " + getDatabaseName(),
         description: undefined,
-        onClick: () => this.openAddDatabasePanel(),
+        onClick: () =>
+          useSidePanel
+            .getState()
+            .openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={this.container} />),
       });
     }
 
     return items;
   }
 
-  private openAddDatabasePanel() {
-    const newDatabaseButton = document.activeElement as HTMLElement;
-    useSidePanel
-      .getState()
-      .openSidePanel(
-        "New " + getDatabaseName(),
-        <AddDatabasePanel explorer={this.container} buttonElement={newDatabaseButton} />
-      );
-  }
-
   private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
     return {
       iconSrc: NotebookIcon,

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -1,4 +1,4 @@
-import { DetailsList, DetailsListLayoutMode, IColumn, Pivot, PivotItem, SelectionMode, Text } from "@fluentui/react";
+import { DetailsList, DetailsListLayoutMode, IColumn, Pivot, PivotItem, SelectionMode } from "@fluentui/react";
 import React, { Fragment } from "react";
 import SplitterLayout from "react-splitter-layout";
 import "react-splitter-layout/lib/index.css";
@@ -120,13 +120,21 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
   constructor(props: IQueryTabComponentProps) {
     super(props);
     const columns: IColumn[] = [
+      {
+        key: "column1",
+        name: "",
+        minWidth: 16,
+        maxWidth: 16,
+        data: String,
+        fieldName: "toolTip",
+        onRender: this.onRenderColumnItem,
+      },
       {
         key: "column2",
         name: "METRIC",
         minWidth: 200,
         data: String,
         fieldName: "metric",
-        onRender: this.onRenderColumnItem,
       },
       {
         key: "column3",
@@ -198,12 +206,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
 
   public onRenderColumnItem(item: IDocument): JSX.Element {
     if (item.toolTip !== "") {
-      return (
-        <>
-          <InfoTooltip>{`${item.toolTip}`}</InfoTooltip>
-          <Text style={{ paddingLeft: 10, margin: 0 }}>{`${item.metric}`}</Text>
-        </>
-      );
+      return <InfoTooltip>{`${item.toolTip}`}</InfoTooltip>;
     } else {
       return undefined;
     }
@@ -966,15 +969,10 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                                 <>
                                   <span className="queryResultDivider">|</span>
                                   <span className="queryResultNextEnable">
-                                    <div
-                                      onClick={this.onFetchNextPageClick.bind(this)}
-                                      role="button"
-                                      tabIndex={0}
-                                      onKeyPress={this.onFetchNextPageClick.bind(this)}
-                                    >
-                                      <span className="moreOption">Load more</span>
+                                    <a onClick={this.onFetchNextPageClick.bind(this)}>
+                                      <span>Load more</span>
                                       <img className="queryResultnextImg" src={QueryEditorNext} alt="Fetch next page" />
-                                    </div>
+                                    </a>
                                   </span>
                                 </>
                               )}
@@ -1004,7 +1002,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                               "data-order": 2,
                               "data-title": "Query Stats",
                             }}
-                            style={{ height: "100%", overflowY: "scroll" }}
+                            style={{ height: "100%" }}
                           >
                             {this.state.allResultsMetadata.length > 0 && !this.state.error && (
                               <div className="queryMetricsSummaryContainer">
@@ -1020,7 +1018,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                                 </div>
                                 {this.state.isQueryMetricsEnabled && (
                                   <div className="downloadMetricsLinkContainer">
-                                    <span
+                                    <a
                                       id="downloadMetricsLink"
                                       role="button"
                                       tabIndex={0}
@@ -1035,7 +1033,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                                         alt="download query metrics csv"
                                       />
                                       <span>Per-partition query metrics (CSV)</span>
-                                    </span>
+                                    </a>
                                   </div>
                                 )}
                               </div>
@@ -1049,7 +1047,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                           <div className="errorContent">
                             <span className="errorMessage">{this.state.error}</span>
                             <span className="errorDetailsLink">
-                              <span
+                              <a
                                 onClick={() => this.onErrorDetailsClick()}
                                 onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) =>
                                   this.onErrorDetailsKeyPress(event)
@@ -1057,11 +1055,9 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
                                 id="error-display"
                                 tabIndex={0}
                                 aria-label="Error details link"
-                                role="button"
-                                className="moreOption"
                               >
                                 More details
-                              </span>
+                              </a>
                             </span>
                           </div>
                         </div>

src/Explorer/Tabs/QueryTablesTab.html

@@ -47,9 +47,7 @@
                     <img class="and-or-svg" src="/And-Or.svg" alt="Group selected clauses" />
                   </button>
                 </th>
-                <th class="clause-table-cell header-background">
-                  <!-- Grouping indicator -->
-                </th>
+                <th class="clause-table-cell header-background"><!-- Grouping indicator --></th>
                 <th class="clause-table-cell header-background and-or-header">
                   <span data-bind="text: andLabel"></span>
                 </th>
@@ -138,7 +136,7 @@
             class="select-options-link"
             data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
             tabindex="0"
-            role="button"
+            role="link"
           >
             <span>Choose Columns... </span>
           </a>

src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx

@@ -579,16 +579,13 @@ export default class StoredProcedureTabComponent extends React.Component<
               <div className="errorContent">
                 <span className="errorMessage">{this.state.error}</span>
                 <span className="errorDetailsLink">
-                  <span
-                    role="button"
-                    tabIndex={0}
-                    className="moreOption"
+                  <a
                     aria-label="Error details link"
                     onClick={() => this.onErrorDetailsClick()}
                     onKeyPress={(event: React.KeyboardEvent<HTMLAnchorElement>) => this.onErrorDetailsKeyPress(event)}
                   >
                     More details
-                  </span>
+                  </a>
                 </span>
               </div>
             </div>

src/Explorer/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import ko from "knockout";
-import React, { MutableRefObject, useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
 import errorIcon from "../../../images/close-black.svg";
 import { useObservable } from "../../hooks/useObservable";
@@ -32,13 +32,7 @@ export const Tabs = (): JSX.Element => {
 
 function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
   const [hovering, setHovering] = useState(false);
-  const focusTab = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
 
-  useEffect(() => {
-    if (active && focusTab.current) {
-      focusTab.current.focus();
-    }
-  });
   return (
     <li
       onMouseOver={() => setHovering(true)}
@@ -52,8 +46,6 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
       aria-controls={tab.tabId}
       tabIndex={0}
       role="tab"
-      ref={focusTab}
-      onFocus={() => setHovering(true)}
     >
       <span className="tabNavContentContainer">
         <a data-toggle="tab" href={"#" + tab.tabId} tabIndex={-1}>

src/Explorer/Tabs/TriggerTabContent.tsx

@@ -295,6 +295,8 @@ export class TriggerTabContent extends Component<TriggerTab, ITriggerTabContentS
           className="trigger-field"
           label="Trigger Id"
           id="entityTimeId"
+          autoFocus
+          required
           type="text"
           pattern="[^/?#\\]*[^/?# \\]"
           placeholder="Enter the new trigger id"

src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx

@@ -276,6 +276,7 @@ export default class UserDefinedFunctionTabContent extends Component<
           className="trigger-field"
           label="User Defined Function Id"
           id="entityTimeId"
+          autoFocus
           required
           readOnly={!isUdfIdEditable}
           type="text"
@@ -290,7 +291,7 @@ export default class UserDefinedFunctionTabContent extends Component<
           language={"javascript"}
           content={udfBody}
           isReadOnly={false}
-          ariaLabel={"User defined function body"}
+          ariaLabel={"Graph JSON"}
           onContentChanged={this.handleUdfBodyChange}
         />
       </div>

src/Explorer/Tree/ResourceTree.tsx

@@ -11,7 +11,7 @@ import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
 import PublishIcon from "../../../images/notebook/publish_content.svg";
 import RefreshIcon from "../../../images/refresh-cosmos.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
-import { Areas, ConnectionStatusType, Notebook } from "../../Common/Constants";
+import { Areas, Notebook } from "../../Common/Constants";
 import { isPublicInternetAccessAllowed } from "../../Common/DatabaseAccountUtility";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
@@ -128,15 +128,17 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
         notebooksTree.children.push(buildGalleryNotebooksTree());
       }
 
-      if (myNotebooksContentRoot && useNotebook.getState().connectionInfo.status == ConnectionStatusType.Connected) {
+      if (myNotebooksContentRoot) {
         notebooksTree.children.push(buildMyNotebooksTree());
       }
+
       if (container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
         // collapse all other notebook nodes
         notebooksTree.children.forEach((node) => (node.isExpanded = false));
-        notebooksTree.children.push(buildGitHubNotebooksTree(true));
+        notebooksTree.children.push(buildGitHubNotebooksTree());
       }
     }
+
     return notebooksTree;
   };
 
@@ -176,7 +178,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     return myNotebooksTree;
   };
 
-  const buildGitHubNotebooksTree = (isConnected: boolean): TreeNode => {
+  const buildGitHubNotebooksTree = (): TreeNode => {
     const gitHubNotebooksTree: TreeNode = buildNotebookDirectoryNode(
       gitHubNotebooksContentRoot,
       (item: NotebookContentItem) => {
@@ -188,7 +190,8 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       },
       true
     );
-    const manageGitContextMenu: TreeNodeMenuItem[] = [
+
+    gitHubNotebooksTree.contextMenu = [
       {
         label: "Manage GitHub settings",
         onClick: () =>
@@ -213,23 +216,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
         },
       },
     ];
-    const connectGitContextMenu: TreeNodeMenuItem[] = [
-      {
-        label: "Connect to GitHub",
-        onClick: () =>
-          useSidePanel
-            .getState()
-            .openSidePanel(
-              "Connect to GitHub",
-              <GitHubReposPanel
-                explorer={container}
-                gitHubClientProp={container.notebookManager.gitHubClient}
-                junoClientProp={container.notebookManager.junoClient}
-              />
-            ),
-      },
-    ];
-    gitHubNotebooksTree.contextMenu = isConnected ? manageGitContextMenu : connectGitContextMenu;
+
     gitHubNotebooksTree.isExpanded = true;
     gitHubNotebooksTree.isAlphaSorted = true;
 

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -45,7 +45,6 @@ import UserDefinedFunction from "./UserDefinedFunction";
 
 export class ResourceTreeAdapter implements ReactAdapter {
   public static readonly MyNotebooksTitle = "My Notebooks";
-  public static readonly MyNotebooksScratchTitle = "My Notebooks Scratch";
   public static readonly GitHubReposTitle = "GitHub repos";
 
   private static readonly DataTitle = "DATA";
@@ -131,8 +130,9 @@ export class ResourceTreeAdapter implements ReactAdapter {
       path: "Gallery",
       type: NotebookContentItemType.File,
     };
+
     this.myNotebooksContentRoot = {
-      name: useNotebook.getState().notebookFolderName,
+      name: ResourceTreeAdapter.MyNotebooksTitle,
       path: useNotebook.getState().notebookBasePath,
       type: NotebookContentItemType.Directory,
     };
@@ -146,11 +146,16 @@ export class ResourceTreeAdapter implements ReactAdapter {
         })
       );
     }
+
+    if (this.container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
       this.gitHubNotebooksContentRoot = {
         name: ResourceTreeAdapter.GitHubReposTitle,
         path: ResourceTreeAdapter.PseudoDirPath,
         type: NotebookContentItemType.Directory,
       };
+    } else {
+      this.gitHubNotebooksContentRoot = undefined;
+    }
 
     return Promise.all(refreshTasks);
   }