Update TableEntity.tsx

* arialabel has been added to close button of invitational youtube video

* heading role has been addedd and tag has been changed to h1

* outline has been restored to choose columns link in entities page

* header text color changed to meet luminosity ratio requirement

* capacity calculator link has been added with underline on focus

* add property is readout twice while using screenreader

* Update fulldatatables.less

* Update queryBuilder.less

* Update TableEntity.tsx

* Update ThroughputInput.less

* Update ThroughputInput.tsx

* Update ThroughputInput.tsx

* Update ThroughputInput.test.tsx.snap

* Update QuickstartCarousel.tsx

* Update SplashScreen.tsx

less/TableStyles/fulldatatables.less

@@ -650,4 +650,4 @@ tr:hover td.nameColumnText {
 
 .context-menu-item.icon-customize-columns {
     background-image: url(../../images/Options.svg);
-}
+}

src/Common/EntityValue.tsx

@@ -1,5 +1,6 @@
 import { DatePicker, TextField } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
+import { attributeValueLabel } from "../Explorer/Panes/Tables/Validators/EntityTableHelper";
 
 export interface TableEntityProps {
   entityValueLabel?: string;
@@ -60,6 +61,7 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
       placeholder={entityValuePlaceholder}
       value={typeof entityValue === "string" ? entityValue : ""}
       onChange={onEntityValueChange}
+      ariaLabel={attributeValueLabel}
     />
   );
 };

src/Common/TableEntity.tsx

@@ -12,6 +12,7 @@ import {
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
 import EditIcon from "../../images/Edit_entity.svg";
+import { attributeNameLabel, dataTypeLabel } from "../Explorer/Panes/Tables/Validators/EntityTableHelper";
 import { CassandraType, TableType } from "../Explorer/Tables/Constants";
 import { userContext } from "../UserContext";
 import { EntityValue } from "./EntityValue";
@@ -33,10 +34,10 @@ export interface TableEntityProps {
   isPropertyTypeDisable: boolean;
   entityTimeValue: string;
   isEntityValueDisable?: boolean;
-  onDeleteEntity?: () => void;
+  onDeleteEntity: () => void;
-  onEditEntity?: () => void;
+  onEditEntity: () => void;
   onEntityPropertyChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
-  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
+  onEntityTypeChange: (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption<any> | undefined) => void;
   onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
   onSelectDate: (date: Date | null | undefined) => void;
   onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
@@ -113,6 +114,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           value={entityProperty}
           onChange={onEntityPropertyChange}
           required
+          ariaLabel={attributeNameLabel}
         />
         <Dropdown
           label={entityTypeLabel && entityTypeLabel}
@@ -122,6 +124,7 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           disabled={isPropertyTypeDisable}
           id="entityTypeId"
           styles={dropdownStyles}
+          ariaLabel={dataTypeLabel}
         />
         <EntityValue
           entityValueLabel={entityValueLabel}

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -133,8 +133,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
         if (isDirty(this.props.maxAutoPilotThroughput, this.props.maxAutoPilotThroughputBaseline)) {
           isDiscardable = true;
           if (
-            this.props.maxAutoPilotThroughput <= this.props.softAllowedMaximumThroughput &&
+            this.props.softAllowedMaximumThroughput
-            AutoPilotUtils.isValidAutoPilotThroughput(this.props.maxAutoPilotThroughput)
+              ? this.props.maxAutoPilotThroughput <= this.props.softAllowedMaximumThroughput &&
+                AutoPilotUtils.isValidAutoPilotThroughput(this.props.maxAutoPilotThroughput)
+              : AutoPilotUtils.isValidAutoPilotThroughput(this.props.maxAutoPilotThroughput)
           ) {
             isSaveable = true;
           }

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -205,6 +205,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                 role="button"
                 onClick={onAddNewProperty}
                 onKeyPress={(event: React.KeyboardEvent<HTMLSpanElement>) => onAddNewPropertyKeyPress(event)}
+                aria-label="Add property"
               >
                 <img className="refreshcol rightPaneAddPropertyImg" src={AddIcon} alt="Add property" /> Add Property
               </span>

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

@@ -1,18 +1,18 @@
 import { Text, TextField } from "@fluentui/react";
 import { useBoolean } from "@fluentui/react-hooks";
 import { Areas } from "Common/Constants";
-import { deleteDatabase } from "Common/dataAccess/deleteDatabase";
 import DeleteFeedback from "Common/DeleteFeedback";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
+import { deleteDatabase } from "Common/dataAccess/deleteDatabase";
 import { Collection, Database } from "Contracts/ViewModels";
-import { useSidePanel } from "hooks/useSidePanel";
-import { useTabs } from "hooks/useTabs";
-import React, { FunctionComponent, useState } from "react";
 import { DefaultExperienceUtility } from "Shared/DefaultExperienceUtility";
 import { Action, ActionModifiers } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { logConsoleError } from "Utils/NotificationConsoleUtils";
+import { useSidePanel } from "hooks/useSidePanel";
+import { useTabs } from "hooks/useTabs";
+import React, { FunctionComponent, useState } from "react";
 import { useDatabases } from "../useDatabases";
 import { useSelectedNode } from "../useSelectedNode";
 import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
@@ -36,8 +36,13 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent<DeleteDatabaseCo
 
   const submit = async (): Promise<void> => {
     if (selectedDatabase?.id() && databaseInput !== selectedDatabase.id()) {
-      setFormError("Input database name does not match the selected database");
+      setFormError(
+        `Input database name "${databaseInput}" does not match the selected database "${selectedDatabase.id()}"`
+      );
       logConsoleError(`Error while deleting collection ${selectedDatabase && selectedDatabase.id()}`);
+      logConsoleError(
+        `Input database name "${databaseInput}" does not match the selected database "${selectedDatabase.id()}"`
+      );
       return;
     }
     setFormError("");

src/Explorer/Panes/Tables/AddTableEntityPanel.tsx

@@ -295,8 +295,9 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
             className="addButtonEntiy"
             tabIndex={0}
             onKeyPress={handlekeypressaddentity}
+            aria-label="Add Property"
           >
-            <Image {...imageProps} src={AddPropertyIcon} alt="Add Entity" />
+            <Image {...imageProps} src={AddPropertyIcon} alt="Add Property" />
             <Text className="addNewParamStyle">{getAddButtonLabel(userContext.apiType)}</Text>
           </Stack>
         )}

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

@@ -26,6 +26,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
         className="panelMainContent"
       >
         <Stack
+          aria-label="Add Property"
           className="addButtonEntiy"
           horizontal={true}
           onClick={[Function]}
@@ -33,20 +34,21 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
           tabIndex={0}
         >
           <div
+            aria-label="Add Property"
             className="ms-Stack addButtonEntiy css-53"
             onClick={[Function]}
             onKeyPress={[Function]}
             tabIndex={0}
           >
             <StyledImageBase
-              alt="Add Entity"
+              alt="Add Property"
               height={30}
               key=".0:$.0"
               src=""
               width={16}
             >
               <ImageBase
-                alt="Add Entity"
+                alt="Add Property"
                 height={30}
                 src=""
                 styles={[Function]}
@@ -335,7 +337,7 @@ exports[`Excute Add Table Entity Pane should render Default properly 1`] = `
                   }
                 >
                   <img
-                    alt="Add Entity"
+                    alt="Add Property"
                     className="ms-Image-image ms-Image-image--portrait is-notLoaded is-fadeIn image-55"
                     key="fabricImage"
                     onError={[Function]}

src/Explorer/QueryCopilot/QueryCopilotTab.tsx

@@ -39,6 +39,7 @@ import SplitterLayout from "react-splitter-layout";
 import CopilotIcon from "../../../images/Copilot.svg";
 import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
 import SaveQueryIcon from "../../../images/save-cosmos.svg";
+import { useTabs } from "../../hooks/useTabs";
 
 interface QueryCopilotTabProps {
   initialInput: string;
@@ -73,6 +74,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   const generateSQLQuery = async (): Promise<void> => {
     try {
       setIsGeneratingQuery(true);
+      useTabs.getState().setIsTabExecuting(true);
       const payload = {
         containerSchema: QueryCopilotSampleContainerSchema,
         userPrompt: userInput,
@@ -101,6 +103,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
       throw error;
     } finally {
       setIsGeneratingQuery(false);
+      useTabs.getState().setIsTabExecuting(false);
     }
   };
 
@@ -119,6 +122,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   const queryDocumentsPerPage = async (firstItemIndex: number, queryIterator: MinimalQueryIterator): Promise<void> => {
     try {
       setIsExecuting(true);
+      useTabs.getState().setIsTabExecuting(true);
       const queryResults: QueryResults = await queryPagesUntilContentPresent(
         firstItemIndex,
         async (firstItemIndex: number) =>
@@ -133,6 +137,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
       handleError(errorMessage, "executeQueryCopilotTab");
     } finally {
       setIsExecuting(false);
+      useTabs.getState().setIsTabExecuting(false);
     }
   };
 

src/Explorer/Quickstart/QuickstartCarousel.tsx

@@ -1,10 +1,10 @@
 import { DefaultButton, IconButton, Image, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
-import { useCarousel } from "hooks/useCarousel";
-import React, { useState } from "react";
-import Youtube from "react-youtube";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import { traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
+import { useCarousel } from "hooks/useCarousel";
+import React, { useState } from "react";
+import Youtube from "react-youtube";
 import Image1 from "../../../images/CarouselImage1.svg";
 import Image2 from "../../../images/CarouselImage2.svg";
 
@@ -25,7 +25,7 @@ export const QuickstartCarousel: React.FC<QuickstartCarouselProps> = ({
       <Stack>
         <Stack horizontal horizontalAlign="space-between" style={{ padding: 16 }}>
           <Text variant="xLarge">{getHeaderText(page)}</Text>
-          <IconButton iconProps={{ iconName: "Cancel" }} onClick={() => setPage(4)} />
+          <IconButton iconProps={{ iconName: "Cancel" }} onClick={() => setPage(4)} ariaLabel="Close" />
         </Stack>
         {getContent(page)}
         <Text variant="medium" style={{ padding: "0 16px" }}>

src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx

@@ -220,7 +220,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
         firstItemIndex,
         queryDocuments
       );
-      this.setState({ queryResults });
+      this.setState({ queryResults, error: "" });
     } catch (error) {
       this.props.tabsBaseInstance.isExecutionError(true);
       this.setState({

src/Explorer/Tabs/QueryTablesTab.html

@@ -77,7 +77,13 @@
           <div class="addClause" data-bind=" ">
             <div class="addClause-heading">
               <span class="clause-table addClause-title">
-                <img class="addclauseProperty-Img" style="margin-bottom: 5px" src="/Add-property.svg" />
+                <img
+                  class="addclauseProperty-Img"
+                  style="margin-bottom: 5px"
+                  src="/Add-property.svg"
+                  alt="Add new Clause"
+                  role="presentation"
+                />
                 <span style="margin-left: 5px" data-bind="text: addNewClauseLine"></span>
               </span>
             </div>
@@ -119,7 +125,12 @@
             aria-label="Show top results"
           />
           <div role="alert" aria-atomic="true" class="inline-div" data-bind="visible: isExceedingLimit">
-            <img class="advanced-options-icon" src="/QueryBuilder/StatusWarning_16x.png" />
+            <img
+              class="advanced-options-icon"
+              src="/QueryBuilder/StatusWarning_16x.png"
+              alt="Warning"
+              role="presentation"
+            />
             <span data-bind="text: topValueLimitMessage"></span>
           </div>
         </div>

src/Explorer/Tabs/Tabs.tsx

@@ -113,7 +113,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
         <div className="tab_Content">
           <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
             {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
-            {useObservable(tab?.isExecuting || ko.observable(false)) && (
+            {isTabExecuting(tab, tabKind) && (
               <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
             )}
           </span>
@@ -211,6 +211,15 @@ const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
   }
 };
 
+const isTabExecuting = (tab?: Tab, tabKind?: ReactTabKind): boolean => {
+  if (useObservable(tab?.isExecuting || ko.observable(false))) {
+    return true;
+  } else if (tabKind !== undefined && tabKind !== ReactTabKind.Home && useTabs.getState()?.isTabExecuting) {
+    return true;
+  }
+  return false;
+};
+
 const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => {
   switch (activeReactTab) {
     case ReactTabKind.Connect:

src/hooks/useTabs.ts

@@ -11,6 +11,7 @@ interface TabsState {
   activeReactTab: ReactTabKind | undefined;
   networkSettingsWarning: string;
   queryCopilotTabInitialInput: string;
+  isTabExecuting: boolean;
   activateTab: (tab: TabsBase) => void;
   activateNewTab: (tab: TabsBase) => void;
   activateReactTab: (tabkind: ReactTabKind) => void;
@@ -24,6 +25,7 @@ interface TabsState {
   closeReactTab: (tabKind: ReactTabKind) => void;
   setNetworkSettingsWarning: (warningMessage: string) => void;
   setQueryCopilotTabInitialInput: (input: string) => void;
+  setIsTabExecuting: (state: boolean) => void;
 }
 
 export enum ReactTabKind {
@@ -40,6 +42,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
   activeReactTab: ReactTabKind.Home,
   networkSettingsWarning: "",
   queryCopilotTabInitialInput: "",
+  isTabExecuting: false,
   activateTab: (tab: TabsBase): void => {
     if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
       set({ activeTab: tab, activeReactTab: undefined });
@@ -151,4 +154,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
   },
   setNetworkSettingsWarning: (warningMessage: string) => set({ networkSettingsWarning: warningMessage }),
   setQueryCopilotTabInitialInput: (input: string) => set({ queryCopilotTabInitialInput: input }),
+  setIsTabExecuting: (state: boolean) => {
+    set({ isTabExecuting: state });
+  },
 }));