ariaLabel has been added to the close button

src/Common/CollapsedResourceTree.tsx

@@ -36,7 +36,7 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
             id="collapseToggleLeftPaneButton"
             role="button"
             tabIndex={0}
-            aria-label={getApiShortDisplayName() + `Expand tree`}
+            aria-label="Expand Tree"
             onClick={toggleLeftPaneExpanded}
             onKeyPress={onKeyPressToggleLeftPaneExpanded}
             ref={focusButton}

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={getApiShortDisplayName() + `Refresh tree`}
+                aria-label="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={getApiShortDisplayName() + `Collapse Tree`}
+                aria-label="Collapse Tree"
                 title="Collapse Tree"
                 ref={focusButton}
               >

src/Common/TableEntity.tsx

@@ -142,6 +142,7 @@ 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={this.state.isExpanded ? `${this.props.title} hide` : `${this.props.title} expand`}
+        alt="Hide"
         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,6 +55,18 @@ 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;
@@ -197,17 +209,26 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
           </MessageBar>
         )}
         {this.props.timeToLive === TtlType.On && (
-          <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)"
-          />
+          <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>
         )}
       </Stack>
     );

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

@@ -59,31 +59,68 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
         }
       }
     />
-    <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,
-          },
+    <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",
+          }
         }
-      }
-      suffix="second(s)"
-      type="number"
-      value="1000"
-    />
+      >
+        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,
+            },
+          }
+        }
+        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>
   </Stack>
   <StyledChoiceGroup
     id="geoSpatialConfig"
@@ -283,31 +320,68 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
         }
       }
     />
-    <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,
-          },
+    <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",
+          }
         }
-      }
-      suffix="second(s)"
-      type="number"
-      value="1000"
-    />
+      >
+        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,
+            },
+          }
+        }
+        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>
   </Stack>
   <StyledChoiceGroup
     id="geoSpatialConfig"
@@ -560,31 +634,68 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
         }
       }
     />
-    <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,
-          },
+    <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",
+          }
         }
-      }
-      suffix="second(s)"
-      type="number"
-      value="1000"
-    />
+      >
+        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,
+            },
+          }
+        }
+        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>
   </Stack>
   <StyledChoiceGroup
     id="geoSpatialConfig"
@@ -799,31 +910,68 @@ exports[`SubSettingsComponent renders 1`] = `
         }
       }
     />
-    <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,
-          },
+    <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",
+          }
         }
-      }
-      suffix="second(s)"
-      type="number"
-      value="1000"
-    />
+      >
+        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,
+            },
+          }
+        }
+        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>
   </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()}
-            ariaLabel={`${isDatabase ? "Database" : getCollectionName()} max RU/s`}
+            aria-label="Max request units per second"
             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
-          ariaLabel="Container max RU/s"
+          aria-label="Max request units per second"
           errorMessage=""
           id="autoscaleRUValueField"
           key=".0:$.2"
@@ -1663,7 +1663,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
           value="4000"
         >
           <TextFieldBase
-            ariaLabel="Container max RU/s"
+            aria-label="Max request units per second"
             deferredValidationTime={200}
             errorMessage=""
             id="autoscaleRUValueField"
@@ -1961,7 +1961,6 @@ 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/MiddlePaneComponent.tsx

@@ -23,9 +23,7 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
             onClick={this.props.toggleExpandGraph}
             role="button"
             aria-expanded={this.props.isTabsContentExpanded}
-            aria-label={
-              this.props.isTabsContentExpanded ? "Collapse graph to minimized view" : "View graph in full screen"
-            }
+            aria-name="View graph in full screen"
           >
             <img
               src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}

src/Explorer/Panes/CassandraAddCollectionPane/CassandraAddCollectionPane.tsx

@@ -2,13 +2,13 @@ import { Checkbox, Dropdown, IDropdownOption, Link, Stack, Text, TextField } fro
 import * as Constants from "Common/Constants";
 import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
+import { useSidePanel } from "hooks/useSidePanel";
+import React, { FunctionComponent, useState } from "react";
 import * as SharedConstants from "Shared/Constants";
 import { Action } from "Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "UserContext";
 import { isServerlessAccount } from "Utils/CapabilityUtils";
-import { useSidePanel } from "hooks/useSidePanel";
-import React, { FunctionComponent, useState } from "react";
 import { ThroughputInput } from "../../Controls/ThroughputInput/ThroughputInput";
 import Explorer from "../../Explorer";
 import { CassandraAPIDataClient } from "../../Tables/TableDataClient";
@@ -86,7 +86,7 @@ export const CassandraAddCollectionPane: FunctionComponent<CassandraAddCollectio
         : `${createKeyspaceQueryPrefix} AND cosmosdb_provisioned_throughput=${newKeySpaceThroughput};`
       : `${createKeyspaceQueryPrefix};`;
     let tableQuery: string;
-    const createTableQueryPrefix = `CREATE TABLE \"${keyspaceId}\".\"${tableId.trim()}\" ${userTableQuery}`;
+    const createTableQueryPrefix = `CREATE TABLE ${keyspaceId}.${tableId.trim()} ${userTableQuery}`;
 
     if (tableThroughput) {
       if (isTableAutoscale) {

src/Explorer/Panes/PanelInfoErrorComponent.tsx

@@ -48,7 +48,7 @@ export const PanelInfoErrorComponent: React.FunctionComponent<PanelInfoErrorProp
           )}
         </Text>
         {showErrorDetails && (
-          <a className="paneErrorLink" role="button" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
+          <a className="paneErrorLink" role="link" 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 { 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/QueryTablesTab.html

@@ -134,6 +134,7 @@
             data-bind="click: selectQueryOptions, event: { keydown: onselectQueryOptionsKeyDown }"
             tabindex="0"
             role="button"
+            href=""
           >
             <span>Choose Columns... </span>
           </a>