Update AddTableEntityPanel.test.tsx.snap

Update QuickstartCarousel.tsx
Update AddTableEntityPanel.tsx
2026-01-01 23:32:02 +00:00 · 2023-06-06 22:13:02 +05:30 · 2023-06-06 22:11:22 +05:30 · 2023-05-31 14:54:26 +05:30 · 2023-05-31 14:53:33 +05:30 · 2023-05-31 14:51:35 +05:30
17 changed files with 141 additions and 313 deletions
--- a/less/TableStyles/fulldatatables.less
+++ b/less/TableStyles/fulldatatables.less
@@ -650,4 +650,4 @@ tr:hover td.nameColumnText {

 .context-menu-item.icon-customize-columns {
    background-image: url(../../images/Options.svg);
-}
+}
--- a/src/Common/CollapsedResourceTree.tsx
+++ b/src/Common/CollapsedResourceTree.tsx
@@ -36,7 +36,7 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
            id="collapseToggleLeftPaneButton"
            role="button"
            tabIndex={0}
-            aria-label="Expand Tree"
+            aria-label={getApiShortDisplayName() + `Expand tree`}
            onClick={toggleLeftPaneExpanded}
            onKeyPress={onKeyPressToggleLeftPaneExpanded}
            ref={focusButton}
--- a/src/Common/EntityValue.tsx
+++ b/src/Common/EntityValue.tsx
@@ -55,7 +55,6 @@ export const EntityValue: FunctionComponent<TableEntityProps> = ({
      label={entityValueLabel && entityValueLabel}
      className="addEntityTextField"
      id="entityValueId"
-      autoFocus
      disabled={isEntityValueDisable}
      type={entityValueType}
      placeholder={entityValuePlaceholder}
--- a/src/Common/ResourceTreeContainer.tsx
+++ b/src/Common/ResourceTreeContainer.tsx
@@ -51,7 +51,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                role="button"
                data-bind="click: onRefreshResourcesClick, clickBubble: false, event: { keypress: onRefreshDatabasesKeyPress }"
                tabIndex={0}
-                aria-label="Refresh tree"
+                aria-label={getApiShortDisplayName() + `Refresh tree`}
                title="Refresh tree"
              >
                <img className="refreshcol" src={refreshImg} alt="Refresh Tree" />
@@ -63,7 +63,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                onClick={toggleLeftPaneExpanded}
                onKeyPress={onKeyPressToggleLeftPaneExpanded}
                tabIndex={0}
-                aria-label="Collapse Tree"
+                aria-label={getApiShortDisplayName() + `Collapse Tree`}
                title="Collapse Tree"
                ref={focusButton}
              >
--- a/src/Common/TableEntity.tsx
+++ b/src/Common/TableEntity.tsx
@@ -142,7 +142,6 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
                {...imageProps}
                src={EditIcon}
                alt="editEntity"
-                id="editEntity"
                onClick={onEditEntity}
                tabIndex={0}
                onKeyPress={handleKeyPress}
--- a/src/Explorer/Controls/Accordion/AccordionComponent.tsx
+++ b/src/Explorer/Controls/Accordion/AccordionComponent.tsx
@@ -73,7 +73,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
      <img
        className="expandCollapseIcon"
        src={this.state.isExpanded ? TriangleDownIcon : TriangleRightIcon}
-        alt="Hide"
+        alt={this.state.isExpanded ? `${this.props.title} hide` : `${this.props.title} expand`}
        tabIndex={0}
        role="button"
      />
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
@@ -15,13 +15,13 @@ import {
 import {
  ChangeFeedPolicyState,
  GeospatialConfigType,
+  getSanitizedInputValue,
  IsComponentDirtyResult,
+  isDirty,
  TtlOff,
  TtlOn,
  TtlOnNoDefault,
  TtlType,
-  getSanitizedInputValue,
-  isDirty,
 } from "../SettingsUtils";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";

@@ -55,18 +55,6 @@ export interface SubSettingsComponentProps {
  onSubSettingsSaveableChange: (isSubSettingsSaveable: boolean) => void;
  onSubSettingsDiscardableChange: (isSubSettingsDiscardable: boolean) => void;
 }
-const stylingforvisuallyhiddenspan = {
-  position: "absolute",
-
-  width: "1px",
-  height: "1px",
-  margin: "-1px",
-  border: 0,
-  padding: 0,
-
-  clip: "rect(0 0 0 0)",
-  overflow: "hidden",
-};

 export class SubSettingsComponent extends React.Component<SubSettingsComponentProps> {
  private shouldCheckComponentIsDirty = true;
@@ -209,26 +197,17 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
          </MessageBar>
        )}
        {this.props.timeToLive === TtlType.On && (
-          <div>
-            <span id="timetoliveon" style={stylingforvisuallyhiddenspan}>
-              Time to live on
-            </span>
-            <TextField
-              id="timeToLiveSeconds"
-              styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
-              type="number"
-              required
-              min={1}
-              max={Int32.Max}
-              value={this.props.timeToLiveSeconds?.toString()}
-              onChange={this.onTimeToLiveSecondsChange}
-              suffix="second(s)"
-              aria-labelledby="timetoliveon secondssuffixforscreenreader"
-            />
-            <span id="secondssuffixforscreenreader" style={stylingforvisuallyhiddenspan}>
-              Second(s)
-            </span>
-          </div>
+          <TextField
+            id="timeToLiveSeconds"
+            styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
+            type="number"
+            required
+            min={1}
+            max={Int32.Max}
+            value={this.props.timeToLiveSeconds?.toString()}
+            onChange={this.onTimeToLiveSecondsChange}
+            suffix="second(s)"
+          />
        )}
      </Stack>
    );
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/SubSettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/SubSettingsComponent.test.tsx.snap
@@ -59,68 +59,31 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
        }
      }
    />
-    <div>
-      <span
-        id="timetoliveon"
-        style={
-          Object {
-            "border": 0,
-            "clip": "rect(0 0 0 0)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Time to live on
-      </span>
-      <StyledTextFieldBase
-        aria-labelledby="timetoliveon secondssuffixforscreenreader"
-        id="timeToLiveSeconds"
-        max={2147483647}
-        min={1}
-        onChange={[Function]}
-        required={true}
-        styles={
-          Object {
-            "fieldGroup": Object {
-              "borderColor": "",
-              "height": 25,
-              "selectors": Object {
-                ":disabled": Object {
-                  "backgroundColor": undefined,
-                  "borderColor": undefined,
-                },
+    <StyledTextFieldBase
+      id="timeToLiveSeconds"
+      max={2147483647}
+      min={1}
+      onChange={[Function]}
+      required={true}
+      styles={
+        Object {
+          "fieldGroup": Object {
+            "borderColor": "",
+            "height": 25,
+            "selectors": Object {
+              ":disabled": Object {
+                "backgroundColor": undefined,
+                "borderColor": undefined,
              },
-              "width": 300,
            },
-          }
+            "width": 300,
+          },
        }
-        suffix="second(s)"
-        type="number"
-        value="1000"
-      />
-      <span
-        id="secondssuffixforscreenreader"
-        style={
-          Object {
-            "border": 0,
-            "clip": "rect(0 0 0 0)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Second(s)
-      </span>
-    </div>
+      }
+      suffix="second(s)"
+      type="number"
+      value="1000"
+    />
  </Stack>
  <StyledChoiceGroup
    id="geoSpatialConfig"
@@ -320,68 +283,31 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
        }
      }
    />
-    <div>
-      <span
-        id="timetoliveon"
-        style={
-          Object {
-            "border": 0,
-            "clip": "rect(0 0 0 0)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Time to live on
-      </span>
-      <StyledTextFieldBase
-        aria-labelledby="timetoliveon secondssuffixforscreenreader"
-        id="timeToLiveSeconds"
-        max={2147483647}
-        min={1}
-        onChange={[Function]}
-        required={true}
-        styles={
-          Object {
-            "fieldGroup": Object {
-              "borderColor": "",
-              "height": 25,
-              "selectors": Object {
-                ":disabled": Object {
-                  "backgroundColor": undefined,
-                  "borderColor": undefined,
-                },
+    <StyledTextFieldBase
+      id="timeToLiveSeconds"
+      max={2147483647}
+      min={1}
+      onChange={[Function]}
+      required={true}
+      styles={
+        Object {
+          "fieldGroup": Object {
+            "borderColor": "",
+            "height": 25,
+            "selectors": Object {
+              ":disabled": Object {
+                "backgroundColor": undefined,
+                "borderColor": undefined,
              },
-              "width": 300,
            },
-          }
+            "width": 300,
+          },
        }
-        suffix="second(s)"
-        type="number"
-        value="1000"
-      />
-      <span
-        id="secondssuffixforscreenreader"
-        style={
-          Object {
-            "border": 0,
-            "clip": "rect(0 0 0 0)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Second(s)
-      </span>
-    </div>
+      }
+      suffix="second(s)"
+      type="number"
+      value="1000"
+    />
  </Stack>
  <StyledChoiceGroup
    id="geoSpatialConfig"
@@ -634,68 +560,31 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
        }
      }
    />
-    <div>
-      <span
-        id="timetoliveon"
-        style={
-          Object {
-            "border": 0,
-            "clip": "rect(0 0 0 0)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Time to live on
-      </span>
-      <StyledTextFieldBase
-        aria-labelledby="timetoliveon secondssuffixforscreenreader"
-        id="timeToLiveSeconds"
-        max={2147483647}
-        min={1}
-        onChange={[Function]}
-        required={true}
-        styles={
-          Object {
-            "fieldGroup": Object {
-              "borderColor": "",
-              "height": 25,
-              "selectors": Object {
-                ":disabled": Object {
-                  "backgroundColor": undefined,
-                  "borderColor": undefined,
-                },
+    <StyledTextFieldBase
+      id="timeToLiveSeconds"
+      max={2147483647}
+      min={1}
+      onChange={[Function]}
+      required={true}
+      styles={
+        Object {
+          "fieldGroup": Object {
+            "borderColor": "",
+            "height": 25,
+            "selectors": Object {
+              ":disabled": Object {
+                "backgroundColor": undefined,
+                "borderColor": undefined,
              },
-              "width": 300,
            },
-          }
+            "width": 300,
+          },
        }
-        suffix="second(s)"
-        type="number"
-        value="1000"
-      />
-      <span
-        id="secondssuffixforscreenreader"
-        style={
-          Object {
-            "border": 0,
-            "clip": "rect(0 0 0 0)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Second(s)
-      </span>
-    </div>
+      }
+      suffix="second(s)"
+      type="number"
+      value="1000"
+    />
  </Stack>
  <StyledChoiceGroup
    id="geoSpatialConfig"
@@ -910,68 +799,31 @@ exports[`SubSettingsComponent renders 1`] = `
        }
      }
    />
-    <div>
-      <span
-        id="timetoliveon"
-        style={
-          Object {
-            "border": 0,
-            "clip": "rect(0 0 0 0)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Time to live on
-      </span>
-      <StyledTextFieldBase
-        aria-labelledby="timetoliveon secondssuffixforscreenreader"
-        id="timeToLiveSeconds"
-        max={2147483647}
-        min={1}
-        onChange={[Function]}
-        required={true}
-        styles={
-          Object {
-            "fieldGroup": Object {
-              "borderColor": "",
-              "height": 25,
-              "selectors": Object {
-                ":disabled": Object {
-                  "backgroundColor": undefined,
-                  "borderColor": undefined,
-                },
+    <StyledTextFieldBase
+      id="timeToLiveSeconds"
+      max={2147483647}
+      min={1}
+      onChange={[Function]}
+      required={true}
+      styles={
+        Object {
+          "fieldGroup": Object {
+            "borderColor": "",
+            "height": 25,
+            "selectors": Object {
+              ":disabled": Object {
+                "backgroundColor": undefined,
+                "borderColor": undefined,
              },
-              "width": 300,
            },
-          }
+            "width": 300,
+          },
        }
-        suffix="second(s)"
-        type="number"
-        value="1000"
-      />
-      <span
-        id="secondssuffixforscreenreader"
-        style={
-          Object {
-            "border": 0,
-            "clip": "rect(0 0 0 0)",
-            "height": "1px",
-            "margin": "-1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "absolute",
-            "width": "1px",
-          }
-        }
-      >
-        Second(s)
-      </span>
-    </div>
+      }
+      suffix="second(s)"
+      type="number"
+      value="1000"
+    />
  </Stack>
  <StyledChoiceGroup
    id="geoSpatialConfig"
--- a/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
+++ b/src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
@@ -250,7 +250,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
            step={AutoPilotUtils.autoPilotIncrementStep}
            min={AutoPilotUtils.autoPilotThroughput1K}
            value={throughput.toString()}
-            aria-label="Max request units per second"
+            ariaLabel={`${isDatabase ? "Database" : getCollectionName()} max RU/s`}
            required={true}
            errorMessage={throughputError}
          />
--- a/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
+++ b/src/Explorer/Controls/ThroughputInput/snapshots/ThroughputInput.test.tsx.snap
@@ -1640,7 +1640,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          </div>
        </Stack>
        <StyledTextFieldBase
-          aria-label="Max request units per second"
+          ariaLabel="Container max RU/s"
          errorMessage=""
          id="autoscaleRUValueField"
          key=".0:$.2"
@@ -1663,7 +1663,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
          value="4000"
        >
          <TextFieldBase
-            aria-label="Max request units per second"
+            ariaLabel="Container max RU/s"
            deferredValidationTime={200}
            errorMessage=""
            id="autoscaleRUValueField"
@@ -1961,6 +1961,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                >
                  <input
                    aria-invalid={false}
+                    aria-label="Container max RU/s"
                    className="ms-TextField-field field-64"
                    id="autoscaleRUValueField"
                    min={1000}
--- a/src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
+++ b/src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
@@ -729,6 +729,7 @@ export class D3ForceGraph implements GraphRenderer {
    var iconGroup = newNodes
      .append("g")
      .attr("class", "iconContainer")
+      .attr("role", "group")
      .attr("tabindex", 0)
      .attr("aria-label", (d: D3Node) => {
        return this.retrieveNodeCaption(d);
--- a/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
+++ b/src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
@@ -23,7 +23,9 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
            onClick={this.props.toggleExpandGraph}
            role="button"
            aria-expanded={this.props.isTabsContentExpanded}
-            aria-name="View graph in full screen"
+            aria-label={
+              this.props.isTabsContentExpanded ? "Collapse graph to minimized view" : "View graph in full screen"
+            }
          >
            <img
              src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.test.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.test.tsx
@@ -107,11 +107,11 @@ describe("New Vertex Component", () => {
  it("should call onTypeChange method on type dropdown change", () => {
    const DOWN_ARROW = { keyCode: 40 };
    const onTypeChange = jest.fn();
-    const dropdown = screen.getByRole("listbox");
+    const dropdown = screen.getByRole("combobox");
    dropdown.onclick = onTypeChange();
    dropdown.onkeydown = onTypeChange();

-    fireEvent.keyDown(screen.getByRole("listbox"), DOWN_ARROW);
+    fireEvent.keyDown(screen.getByRole("combobox"), DOWN_ARROW);
    fireEvent.click(screen.getByText(/number/));
    expect(onTypeChange).toHaveBeenCalled();
  });
--- a/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
+++ b/src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx
@@ -145,6 +145,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                    type="text"
                    id="propertyKeyNewVertexPane"
                    componentRef={input}
+                    aria-required="true"
                    placeholder="Key"
                    autoComplete="off"
                    aria-label={`Enter value for propery ${index + 1}`}
@@ -152,6 +153,8 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onKeyChange(event, index)}
                  />
                </div>
+                <span className="mandatoryStar">*&nbsp;</span>
+
                <div className="valueCol">
                  <TextField
                    className="edgeInput"
@@ -165,7 +168,7 @@ export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = (
                </div>
                <div>
                  <Dropdown
-                    role="listbox"
+                    role="combobox"
                    placeholder="Select an option"
                    defaultSelectedKey={data.values[0].type}
                    style={{ width: 100 }}
--- a/src/Explorer/Panes/PanelInfoErrorComponent.tsx
+++ b/src/Explorer/Panes/PanelInfoErrorComponent.tsx
@@ -32,14 +32,8 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
  return (
    <Stack className="panelInfoErrorContainer" horizontal verticalAlign="center">
      {icon}
-      <span className="panelWarningErrorDetailsLinkContainer">
-        <Text
-          role="alert"
-          aria-live="assertive"
-          aria-label={message}
-          className="panelWarningErrorMessage"
-          variant="small"
-        >
+      <span className="panelWarningErrorDetailsLinkContainer" role="alert" aria-live="assertive">
+        <Text aria-label={message} className="panelWarningErrorMessage" variant="small">
          {message}
          {link && linkText && (
            <Link target="_blank" href={link}>
@@ -48,7 +42,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
          )}
        </Text>
        {showErrorDetails && (
-          <a className="paneErrorLink" role="link" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
+          <a className="paneErrorLink" role="button" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
            More details
          </a>
        )}
--- a/src/Explorer/Quickstart/QuickstartCarousel.tsx
+++ b/src/Explorer/Quickstart/QuickstartCarousel.tsx
@@ -1,10 +1,10 @@
 import { DefaultButton, IconButton, Image, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
-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 { Action } from "Shared/Telemetry/TelemetryConstants";
+import { traceSuccess } from "Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "UserContext";
 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)} ariaLabel="Close"/>
+          <IconButton iconProps={{ iconName: "Cancel" }} onClick={() => setPage(4)} />
        </Stack>
        {getContent(page)}
        <Text variant="medium" style={{ padding: "0 16px" }}>
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -7,10 +7,10 @@ import { SplashScreen } from "Explorer/SplashScreen/SplashScreen";
 import { ConnectTab } from "Explorer/Tabs/ConnectTab";
 import { PostgresConnectTab } from "Explorer/Tabs/PostgresConnectTab";
 import { QuickstartTab } from "Explorer/Tabs/QuickstartTab";
+import { userContext } from "UserContext";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import ko from "knockout";
 import React, { MutableRefObject, useEffect, useRef, useState } from "react";
-import { userContext } from "UserContext";
 import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
 import errorIcon from "../../../images/close-black.svg";
 import { useObservable } from "../../hooks/useObservable";
@@ -102,22 +102,20 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
      ref={focusTab}
    >
      <span className="tabNavContentContainer">
-        <a data-toggle="tab" href={"#" + tabId} tabIndex={-1}>
-          <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)) && (
-                <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
-              )}
-            </span>
-            <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable(ReactTabKind[tabKind]))}</span>
-            {tabKind !== ReactTabKind.Home && (
-              <span className="tabIconSection">
-                <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
-              </span>
+        <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)) && (
+              <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
            )}
-          </div>
-        </a>
+          </span>
+          <span className="tabNavText">{useObservable(tab?.tabTitle || ko.observable(ReactTabKind[tabKind]))}</span>
+          {tabKind !== ReactTabKind.Home && (
+            <span className="tabIconSection">
+              <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
+            </span>
+          )}
+        </div>
      </span>
    </li>
  );
Author	SHA1	Message	Date
MokireddySampath	a516d9ec45	Update AddTableEntityPanel.test.tsx.snap	2023-06-06 22:13:02 +05:30
MokireddySampath	61a0433c40	Update QuickstartCarousel.tsx	2023-06-06 22:11:22 +05:30
MokireddySampath	0fd7129d2f	Update AddTableEntityPanel.tsx	2023-05-31 14:54:26 +05:30
MokireddySampath	b4c0e29c04	Update RightPaneForm.tsx	2023-05-31 14:53:33 +05:30
MokireddySampath	8e723df3fb	Update NewVertexComponent.tsx	2023-05-31 14:51:35 +05:30
MokireddySampath	9e2ab607f7	Update ThroughputInput.test.tsx.snap	2023-05-31 14:49:04 +05:30
MokireddySampath	7108c9b1ba	Update ThroughputInput.tsx	2023-05-31 14:46:54 +05:30
MokireddySampath	e3632b734c	Update ThroughputInput.less	2023-05-31 14:46:27 +05:30
MokireddySampath	881efd965c	Update TableEntity.tsx	2023-05-31 14:46:03 +05:30
MokireddySampath	84b73d5bb6	Update queryBuilder.less	2023-05-31 14:45:33 +05:30
MokireddySampath	9e7beff184	Update fulldatatables.less	2023-05-31 14:45:01 +05:30
MokireddySampath	a0b6d71507	Update SplashScreen.tsx	2023-05-31 14:44:21 +05:30
Sampath	e267b5c1cc	screenreader content changed to announce the entire alert	2023-05-31 14:41:19 +05:30
Sampath	85bd63f1a4	arialabel added to the add property button	2023-05-31 13:04:48 +05:30
Sampath	ccd817e432	add property is readout twice while using screenreader	2023-05-30 22:01:36 +05:30
Sampath	34611bdbdf	capacity calculator link has been added with underline on focus	2023-05-23 16:48:02 +05:30
Sampath	15388fb03e	header text color changed to meet luminosity ratio requirement	2023-05-23 15:38:16 +05:30
Sampath	c8310021bc	outline has been restored to choose columns link in entities page	2023-05-22 18:05:39 +05:30
Sampath	93392c8795	heading role has been addedd and tag has been changed to h1	2023-05-22 17:04:36 +05:30
Sampath	f98cdf39d6	arialabel has been added to close button of invitational youtube video	2023-05-17 18:57:51 +05:30
MokireddySampath	ba66aa939b	Defect 2280249 (#1432 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Commit to my local branch * role has been added to graphic tag * Update TableEntity.tsx * Update ThroughputInput.tsx * Update ThroughputInput.test.tsx.snap * Update TreeComponent.tsx * Update TableEntity.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update AddCollectionPanel.tsx * Update SplashScreen.tsx * Update TreeComponent.test.tsx.snap * Update TreeComponent.test.tsx.snap	2023-05-09 23:42:04 +05:30
MokireddySampath	f9af595eee	2276949test (#1433 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Commit to my local branch * Autofocus removed * Update TableEntity.tsx * Update TableEntity.tsx * Update TableEntity.tsx * Update ThroughputInput.tsx * Update ThroughputInput.test.tsx.snap * Update TreeComponent.tsx * Update TreeComponent.test.tsx.snap * Update AddCollectionPanel.tsx * Update SplashScreen.tsx	2023-05-09 23:33:05 +05:30
MokireddySampath	7ce8c7a5a1	anchor link removed, since interactive elements cannot be nested (#1434 ) * anchor link removed, since interactive elements cannot be nested * Update Tabs.tsx	2023-05-09 23:32:36 +05:30
MokireddySampath	9ad3f589cc	aria required and asterisk has been added to indicate mandatory input for new vertex key input (#1435 )	2023-05-09 23:32:09 +05:30
MokireddySampath	9267b2cc18	role has been corrected to combobox for the dropdown (#1438 )	2023-05-09 23:29:56 +05:30
MokireddySampath	c7d1b2dcdb	Defect2280542 (#1441 ) * Changes made for the screenreader to readout the label and suffix associated with the input * Added an empty href to restore the chactristics of link in high contrast mode * Update SubSettingsComponent.tsx * Update SubSettingsComponent.tsx * Update SubSettingsComponent.tsx * Update SubSettingsComponent.tsx * Update SubSettingsComponent.test.tsx.snap * Update SubSettingsComponent.test.tsx.snap * Update SubSettingsComponent.test.tsx.snap	2023-05-09 23:29:25 +05:30
MokireddySampath	a526410e44	Defect 2280429 (#1416 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * wrong role is assigned to anchor link * descriptive alt added for iconspresent for DATA and NOTEBOOK accordion headers * Update CollapsedResourceTree.tsx * Update ResourceTreeContainer.tsx * Update ResourceTreeContainer.tsx * Update TableEntity.tsx * Update treeComponent.less * Update MiddlePaneComponent.tsx * Update PanelInfoErrorComponent.tsx	2023-04-25 21:04:29 +05:30
MokireddySampath	58cb85156c	Defect 2278539 (#1415 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * wrong role is assigned to anchor link * Update MiddlePaneComponent.tsx * Update treeComponent.less * Update CollapsedResourceTree.tsx * Update ResourceTreeContainer.tsx * Update TableEntity.tsx * Update ResourceTreeContainer.tsx	2023-04-25 21:04:12 +05:30
MokireddySampath	dd5ccade2b	Defect 2280418 (#1414 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * refresh, expand, collapse tree does not have proper label for screenreader * Update treeComponent.less * Update TableEntity.tsx * Update MiddlePaneComponent.tsx	2023-04-25 21:03:51 +05:30
MokireddySampath	38ebef6c02	Defect 2276941 (#1413 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * aria-label for table max RU/s input element is not defined properly * Update TableEntity.tsx * Update treeComponent.less * Update MiddlePaneComponent.tsx	2023-04-25 21:03:35 +05:30
MokireddySampath	7ad5862e8f	Defect 2280272 (#1412 ) * autoscale and manual radiobuutton fixes * alt text attribute for images * Revert "alt text attribute for images" This reverts commit `5a660551c6`. * alt text for decorative images * sev2 accessibilitydefects in data explorer * Revert "sev2 accessibilitydefects in data explorer" This reverts commit `b84d5b572c`. * Sev2 accessibilitydefects * Revert "Sev2 accessibilitydefects" This reverts commit `a4e60f106c`. * accessibilitydefects-data explorer * Accessibility sev-2 defects-2 * corrections for 2278347,2278096 and fix for 2264174 * corrections for 2278347,2278096 and fix for 2264174 * fix for defect 2276938 * wrong aria attibute used * Update treeComponent.less	2023-04-25 21:03:12 +05:30