Update AddTableEntityPanel.test.tsx.snap

* 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

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}

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}

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}
               >

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}

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"
       />

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>
+          <TextField
-            <span id="timetoliveon" style={stylingforvisuallyhiddenspan}>
+            id="timeToLiveSeconds"
-              Time to live on
+            styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
-            </span>
+            type="number"
-            <TextField
+            required
-              id="timeToLiveSeconds"
+            min={1}
-              styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
+            max={Int32.Max}
-              type="number"
+            value={this.props.timeToLiveSeconds?.toString()}
-              required
+            onChange={this.onTimeToLiveSecondsChange}
-              min={1}
+            suffix="second(s)"
-              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>
         )}
       </Stack>
     );

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

@@ -59,68 +59,31 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
         }
       }
     />
-    <div>
+    <StyledTextFieldBase
-      <span
+      id="timeToLiveSeconds"
-        id="timetoliveon"
+      max={2147483647}
-        style={
+      min={1}
-          Object {
+      onChange={[Function]}
-            "border": 0,
+      required={true}
-            "clip": "rect(0 0 0 0)",
+      styles={
-            "height": "1px",
+        Object {
-            "margin": "-1px",
+          "fieldGroup": Object {
-            "overflow": "hidden",
+            "borderColor": "",
-            "padding": 0,
+            "height": 25,
-            "position": "absolute",
+            "selectors": Object {
-            "width": "1px",
+              ":disabled": Object {
-          }
+                "backgroundColor": undefined,
-        }
+                "borderColor": undefined,
-      >
-        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,
-                },
               },
-              "width": 300,
             },
-          }
+            "width": 300,
+          },
         }
-        suffix="second(s)"
+      }
-        type="number"
+      suffix="second(s)"
-        value="1000"
+      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>
   </Stack>
   <StyledChoiceGroup
     id="geoSpatialConfig"
@@ -320,68 +283,31 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
         }
       }
     />
-    <div>
+    <StyledTextFieldBase
-      <span
+      id="timeToLiveSeconds"
-        id="timetoliveon"
+      max={2147483647}
-        style={
+      min={1}
-          Object {
+      onChange={[Function]}
-            "border": 0,
+      required={true}
-            "clip": "rect(0 0 0 0)",
+      styles={
-            "height": "1px",
+        Object {
-            "margin": "-1px",
+          "fieldGroup": Object {
-            "overflow": "hidden",
+            "borderColor": "",
-            "padding": 0,
+            "height": 25,
-            "position": "absolute",
+            "selectors": Object {
-            "width": "1px",
+              ":disabled": Object {
-          }
+                "backgroundColor": undefined,
-        }
+                "borderColor": undefined,
-      >
-        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,
-                },
               },
-              "width": 300,
             },
-          }
+            "width": 300,
+          },
         }
-        suffix="second(s)"
+      }
-        type="number"
+      suffix="second(s)"
-        value="1000"
+      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>
   </Stack>
   <StyledChoiceGroup
     id="geoSpatialConfig"
@@ -634,68 +560,31 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
         }
       }
     />
-    <div>
+    <StyledTextFieldBase
-      <span
+      id="timeToLiveSeconds"
-        id="timetoliveon"
+      max={2147483647}
-        style={
+      min={1}
-          Object {
+      onChange={[Function]}
-            "border": 0,
+      required={true}
-            "clip": "rect(0 0 0 0)",
+      styles={
-            "height": "1px",
+        Object {
-            "margin": "-1px",
+          "fieldGroup": Object {
-            "overflow": "hidden",
+            "borderColor": "",
-            "padding": 0,
+            "height": 25,
-            "position": "absolute",
+            "selectors": Object {
-            "width": "1px",
+              ":disabled": Object {
-          }
+                "backgroundColor": undefined,
-        }
+                "borderColor": undefined,
-      >
-        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,
-                },
               },
-              "width": 300,
             },
-          }
+            "width": 300,
+          },
         }
-        suffix="second(s)"
+      }
-        type="number"
+      suffix="second(s)"
-        value="1000"
+      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>
   </Stack>
   <StyledChoiceGroup
     id="geoSpatialConfig"
@@ -910,68 +799,31 @@ exports[`SubSettingsComponent renders 1`] = `
         }
       }
     />
-    <div>
+    <StyledTextFieldBase
-      <span
+      id="timeToLiveSeconds"
-        id="timetoliveon"
+      max={2147483647}
-        style={
+      min={1}
-          Object {
+      onChange={[Function]}
-            "border": 0,
+      required={true}
-            "clip": "rect(0 0 0 0)",
+      styles={
-            "height": "1px",
+        Object {
-            "margin": "-1px",
+          "fieldGroup": Object {
-            "overflow": "hidden",
+            "borderColor": "",
-            "padding": 0,
+            "height": 25,
-            "position": "absolute",
+            "selectors": Object {
-            "width": "1px",
+              ":disabled": Object {
-          }
+                "backgroundColor": undefined,
-        }
+                "borderColor": undefined,
-      >
-        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,
-                },
               },
-              "width": 300,
             },
-          }
+            "width": 300,
+          },
         }
-        suffix="second(s)"
+      }
-        type="number"
+      suffix="second(s)"
-        value="1000"
+      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>
   </Stack>
   <StyledChoiceGroup
     id="geoSpatialConfig"

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}
           />

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}

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);

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}

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();
   });

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 }}

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">
+      <span className="panelWarningErrorDetailsLinkContainer" role="alert" aria-live="assertive">
-        <Text
+        <Text aria-label={message} className="panelWarningErrorMessage" variant="small">
-          role="alert"
-          aria-live="assertive"
-          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>
         )}

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" }}>

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">
-          <div className="tab_Content">
+          <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
-            <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
+            {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
-              {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
+            {useObservable(tab?.isExecuting || ko.observable(false)) && (
-              {useObservable(tab?.isExecuting || ko.observable(false)) && (
+              <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
-                <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>
+          </span>
-        </a>
+          <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>
   );