add quotes to keyspace and table name for create table

* 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

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/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/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/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="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/QueryTablesTab.html

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