Update TabComponent.tsx

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