Update TabComponent.tsx

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/Tabs/TabComponent.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 import "./TabComponent.less";
 
 export interface TabContent {
@@ -19,11 +18,15 @@ interface TabComponentProps {
   onTabIndexChange: (newIndex: number) => void;
   hideHeader: boolean;
 }
+interface TabRefs {
+  [key: string]: HTMLElement;
+}
 
 /**
  * We assume there's at least one tab
  */
 export class TabComponent extends React.Component<TabComponentProps> {
+  private tabRefs: TabRefs = {};
   public constructor(props: TabComponentProps) {
     super(props);
 
@@ -33,11 +36,41 @@ export class TabComponent extends React.Component<TabComponentProps> {
       throw new Error(msg);
     }
   }
+  state = {
+    activeTabIndex: this.props.currentTabIndex,
+  };
 
   private setActiveTab(index: number): void {
     this.setState({ activeTabIndex: index });
     this.props.onTabIndexChange(index);
   }
+  private setIndex = (index: number) => {
+    const tab = this.tabRefs[index];
+    if (tab) {
+      tab.focus();
+      this.setState({ activeTabIndex: index });
+    }
+  };
+  private handlekeypress = (event: React.KeyboardEvent<HTMLSpanElement>): void => {
+    const { tabs, onTabIndexChange } = this.props;
+    const { activeTabIndex } = this.state;
+    const count = tabs.length;
+
+    const prevTab = () => {
+      this.setIndex((activeTabIndex - 1 + count) % count);
+      onTabIndexChange((activeTabIndex - 1 + count) % count);
+    };
+    const nextTab = () => {
+      this.setIndex((activeTabIndex + 1) % count);
+      onTabIndexChange((activeTabIndex + 1) % count);
+    };
+
+    if (event.key === "ArrowLeft") {
+      prevTab();
+    } else if (event.key === "ArrowRight") {
+      nextTab();
+    }
+  };
 
   private renderTabTitles(): JSX.Element[] {
     return this.props.tabs.map((tab: Tab, index: number) => {
@@ -47,26 +80,32 @@ export class TabComponent extends React.Component<TabComponentProps> {
 
       let className = "toggleSwitch";
       let ariaselected;
+      let tabindex;
       if (index === this.props.currentTabIndex) {
         className += " selectedToggle";
         ariaselected = true;
+        tabindex = 0;
       } else {
         className += " unselectedToggle";
         ariaselected = false;
+        tabindex = -1;
       }
 
       return (
         <div className="tab" key={index}>
-          <AccessibleElement
+          <span
-            as="span"
             className={className}
             role="tab"
-            onActivated={() => this.setActiveTab(index)}
+            onClick={() => this.setActiveTab(index)}
+            onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => this.handlekeypress(event)}
+            onFocus={() => this.setState({ activeTabIndex: index })}
             aria-label={`Select tab: ${tab.title}`}
             aria-selected={ariaselected}
+            tabIndex={tabindex}
+            ref={(element) => (this.tabRefs[index] = element)}
           >
             {tab.title}
-          </AccessibleElement>
+          </span>
         </div>
       );
     });

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={
+            aria-name="View graph in full screen"
-              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="button" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
+          <a className="paneErrorLink" role="link" onClick={expandConsole} tabIndex={0} onKeyPress={expandConsole}>
             More details
           </a>
         )}