sev2 accessibilitydefects in data explorer

images/imgarrowlefticon.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0" ?>
 <!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
 <svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<path stroke="white" stroke-width="0.5" fill="#b5a3a3" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0  l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/>
+<path stroke="white" stroke-width="0.5" fill="#000" d="M179.199,38.399c0,1.637-0.625,3.274-1.875,4.524l-85.076,85.075l85.076,85.075c2.5,2.5,2.5,6.55,0,9.05s-6.55,2.5-9.05,0  l-89.601-89.6c-2.5-2.5-2.5-6.551,0-9.051l89.601-89.6c2.5-2.5,6.55-2.5,9.05,0C178.574,35.124,179.199,36.762,179.199,38.399z"/>
 </svg>

src/Common/TableEntity.tsx

@@ -7,7 +7,7 @@ import {
   IStackTokens,
   Stack,
   TextField,
-  TooltipHost,
+  TooltipHost
 } from "@fluentui/react";
 import React, { FunctionComponent } from "react";
 import DeleteIcon from "../../images/delete.svg";
@@ -136,17 +136,20 @@ export const TableEntity: FunctionComponent<TableEntityProps> = ({
           onEntityTimeValueChange={onEntityTimeValueChange}
         />
         {!isEntityValueDisable && (
+          
           <TooltipHost content="Edit property" id="editTooltip">
+            <div tabIndex={0}>
             <Image
               {...imageProps}
               src={EditIcon}
               alt="editEntity"
               id="editEntity"
               onClick={onEditEntity}
-              tabIndex={0}
               onKeyPress={handleKeyPress}
             />
+            </div>
           </TooltipHost>
+          
         )}
         {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
           <TooltipHost content="Delete property" id="deleteTooltip">

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -185,6 +185,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
       </Stack>
 
       <Stack horizontal verticalAlign="center">
+        <div role="radiogroup">
         <input
           id="Autoscale-input"
           className="throughputInputRadioBtn"
@@ -214,6 +215,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
         <label className="throughputInputRadioBtnLabel" htmlFor="Manual-input">
           Manual
         </label>
+        </div>
       </Stack>
 
       {isAutoscaleSelected && (

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -347,12 +347,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                     className="panelInfoIcon"
                     iconName="Info"
+                    role="tooltip"
                     tabIndex={0}
                   >
                     <IconBase
                       ariaLabel="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                       className="panelInfoIcon"
                       iconName="Info"
+                      role="tooltip"
                       styles={[Function]}
                       tabIndex={0}
                       theme={
@@ -633,7 +635,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         aria-label="Set the throughput — Request Units per second (RU/s) — required for the workload. A read of a 1 KB document uses 1 RU. Select manual if you plan to scale RU/s yourself. Select autoscale to allow the system to scale RU/s based on usage."
                         className="panelInfoIcon root-57"
                         data-icon-name="Info"
-                        role="img"
+                        role="tooltip"
                         tabIndex={0}
                       >
                         
@@ -654,44 +656,45 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       <div
         className="ms-Stack css-58"
       >
-        <input
+        <div
-          aria-label="Autoscale database throughput"
-          aria-required={true}
-          checked={true}
-          className="throughputInputRadioBtn"
-          id="Autoscale-input"
           key=".0:$.0"
-          onChange={[Function]}
+          role="radiogroup"
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <label
-          className="throughputInputRadioBtnLabel"
-          htmlFor="Autoscale-input"
-          key=".0:$.1"
         >
-          Autoscale
+          <input
-        </label>
+            aria-label="Autoscale database throughput"
-        <input
+            aria-required={true}
-          aria-label="Manual database throughput"
+            checked={true}
-          aria-required={true}
+            className="throughputInputRadioBtn"
-          checked={false}
+            id="Autoscale-input"
-          className="throughputInputRadioBtn"
+            onChange={[Function]}
-          id="Manual-input"
+            role="radio"
-          key=".0:$.2"
+            tabIndex={0}
-          onChange={[Function]}
+            type="radio"
-          role="radio"
+          />
-          tabIndex={0}
+          <label
-          type="radio"
+            className="throughputInputRadioBtnLabel"
-        />
+            htmlFor="Autoscale-input"
-        <label
+          >
-          className="throughputInputRadioBtnLabel"
+            Autoscale
-          htmlFor="Manual-input"
+          </label>
-          key=".0:$.3"
+          <input
-        >
+            aria-label="Manual database throughput"
-          Manual
+            aria-required={true}
-        </label>
+            checked={false}
+            className="throughputInputRadioBtn"
+            id="Manual-input"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <label
+            className="throughputInputRadioBtnLabel"
+            htmlFor="Manual-input"
+          >
+            Manual
+          </label>
+        </div>
       </div>
     </Stack>
     <Stack
@@ -1338,12 +1341,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                         className="panelInfoIcon"
                         iconName="Info"
+                        role="tooltip"
                         tabIndex={0}
                       >
                         <IconBase
                           ariaLabel="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                           className="panelInfoIcon"
                           iconName="Info"
+                          role="tooltip"
                           styles={[Function]}
                           tabIndex={0}
                           theme={
@@ -1624,7 +1629,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             aria-label="Set the max RU/s to the highest RU/s you want your container to scale to. The container will scale between 10% of max RU/s to the max RU/s based on usage."
                             className="panelInfoIcon root-57"
                             data-icon-name="Info"
-                            role="img"
+                            role="tooltip"
                             tabIndex={0}
                           >
                             

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -10,7 +10,7 @@ import {
   IButtonStyles,
   IconButton,
   IContextualMenuItemProps,
-  IContextualMenuProps,
+  IContextualMenuProps
 } from "@fluentui/react";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
@@ -195,7 +195,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
         </div>
         {node.children && (
           <AnimateHeight duration={TreeNodeComponent.transitionDurationMS} height={this.state.isExpanded ? "auto" : 0}>
-            <div className="nodeChildren" data-test={node.label}>
+            <div className="nodeChildren" data-test={node.label} role="group">
               {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
                 <TreeNodeComponent
                   key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}

src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap

@@ -40,30 +40,32 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div
+  <div>
-    className="treeNodeHeader "
+    <div
-    data-test="label"
+      className="treeNodeHeader "
-    style={
+      data-test="label"
-      Object {
+      style={
-        "paddingLeft": 9,
+        Object {
+          "paddingLeft": 9,
+        }
       }
-    }
+      tabIndex={-1}
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is collapsed"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
     >
-      label
+      <img
-    </span>
+        alt="label branch is collapsed"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+    </div>
   </div>
   <div
     className="loadingIconContainer"
@@ -100,6 +102,7 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
     <div
       className="nodeChildren"
       data-test="label"
+      role="group"
     >
       <TreeNodeComponent
         generation={3}
@@ -142,78 +145,80 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div
+  <div>
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 23,
-      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
-    >
-      label
-    </span>
     <div
-      onContextMenu={[Function]}
+      className="treeNodeHeader "
-      onKeyPress={[Function]}
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 23,
+        }
+      }
+      tabIndex={-1}
     >
-      <CustomizedIconButton
+      <img
-        ariaLabel="More"
+        alt="label branch is expanded"
-        className="treeMenuEllipsis"
+        className="expandCollapseIcon"
-        menuIconProps={
+        onKeyPress={[Function]}
-          Object {
+        role="button"
-            "iconName": "More",
+        src=""
-            "styles": Object {
+        tabIndex={0}
-              "root": Object {
-                "fontSize": "18px",
-                "fontWeight": "bold",
-              },
-            },
-          }
-        }
-        menuProps={
-          Object {
-            "contextualMenuItemAs": [Function],
-            "coverTarget": true,
-            "directionalHint": 3,
-            "isBeakVisible": false,
-            "items": Array [
-              Object {
-                "className": undefined,
-                "disabled": true,
-                "key": "menuLabel",
-                "onClick": [Function],
-                "onRenderIcon": [Function],
-                "text": "menuLabel",
-              },
-            ],
-            "onMenuDismissed": [Function],
-            "onMenuOpened": [Function],
-          }
-        }
-        name="More"
-        styles={
-          Object {
-            "rootFocused": Object {
-              "outline": "1px dashed undefined",
-            },
-          }
-        }
-        title="More"
       />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+      <div
+        onContextMenu={[Function]}
+        onKeyPress={[Function]}
+      >
+        <CustomizedIconButton
+          ariaLabel="More"
+          className="treeMenuEllipsis"
+          menuIconProps={
+            Object {
+              "iconName": "More",
+              "styles": Object {
+                "root": Object {
+                  "fontSize": "18px",
+                  "fontWeight": "bold",
+                },
+              },
+            }
+          }
+          menuProps={
+            Object {
+              "contextualMenuItemAs": [Function],
+              "coverTarget": true,
+              "directionalHint": 3,
+              "isBeakVisible": false,
+              "items": Array [
+                Object {
+                  "className": undefined,
+                  "disabled": true,
+                  "key": "menuLabel",
+                  "onClick": [Function],
+                  "onRenderIcon": [Function],
+                  "text": "menuLabel",
+                },
+              ],
+              "onMenuDismissed": [Function],
+              "onMenuOpened": [Function],
+            }
+          }
+          name="More"
+          styles={
+            Object {
+              "rootFocused": Object {
+                "outline": "1px dashed undefined",
+              },
+            }
+          }
+          title="More"
+        />
+      </div>
     </div>
   </div>
   <div
@@ -251,6 +256,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
     <div
       className="nodeChildren"
       data-test="label"
+      role="group"
     >
       <TreeNodeComponent
         generation={13}
@@ -292,142 +298,31 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div
+  <div>
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 9,
-      }
-    }
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
-    >
-      label
-    </span>
-  </div>
-  <div
-    className="loadingIconContainer"
-  >
-    <img
-      className="loadingIcon"
-      hidden={true}
-      src=""
-    />
-  </div>
-  <AnimateHeight
-    animateOpacity={false}
-    animationStateClasses={
-      Object {
-        "animating": "rah-animating",
-        "animatingDown": "rah-animating--down",
-        "animatingToHeightAuto": "rah-animating--to-height-auto",
-        "animatingToHeightSpecific": "rah-animating--to-height-specific",
-        "animatingToHeightZero": "rah-animating--to-height-zero",
-        "animatingUp": "rah-animating--up",
-        "static": "rah-static",
-        "staticHeightAuto": "rah-static--height-auto",
-        "staticHeightSpecific": "rah-static--height-specific",
-        "staticHeightZero": "rah-static--height-zero",
-      }
-    }
-    applyInlineTransitions={true}
-    delay={0}
-    duration={200}
-    easing="ease"
-    height="auto"
-    style={Object {}}
-  >
     <div
-      className="nodeChildren"
+      className="treeNodeHeader "
       data-test="label"
-    />
+      style={
-  </AnimateHeight>
+        Object {
-</div>
+          "paddingLeft": 9,
-`;
+        }
-
-exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
-<div
-  className="nodeClassname main12 nodeItem "
-  id="id"
-  onClick={[Function]}
-  onKeyPress={[Function]}
-  role="treeitem"
->
-  <div
-    className="treeNodeHeader "
-    data-test="label"
-    style={
-      Object {
-        "paddingLeft": 23,
       }
-    }
+      tabIndex={-1}
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
     >
-      label
+      <img
-    </span>
+        alt="label branch is expanded"
-    <div
+        className="expandCollapseIcon"
-      onContextMenu={[Function]}
+        onKeyPress={[Function]}
-      onKeyPress={[Function]}
+        role="button"
-    >
+        src=""
-      <CustomizedIconButton
+        tabIndex={0}
-        ariaLabel="More"
-        className="treeMenuEllipsis"
-        menuIconProps={
-          Object {
-            "iconName": "More",
-            "styles": Object {
-              "root": Object {
-                "fontSize": "18px",
-                "fontWeight": "bold",
-              },
-            },
-          }
-        }
-        menuProps={
-          Object {
-            "contextualMenuItemAs": [Function],
-            "coverTarget": true,
-            "directionalHint": 3,
-            "isBeakVisible": false,
-            "items": Array [],
-            "onMenuDismissed": [Function],
-            "onMenuOpened": [Function],
-          }
-        }
-        name="More"
-        styles={
-          Object {
-            "rootFocused": Object {
-              "outline": "1px dashed undefined",
-            },
-          }
-        }
-        title="More"
       />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
     </div>
   </div>
   <div
@@ -465,6 +360,123 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
     <div
       className="nodeChildren"
       data-test="label"
+      role="group"
+    />
+  </AnimateHeight>
+</div>
+`;
+
+exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents separated 1`] = `
+<div
+  className="nodeClassname main12 nodeItem "
+  id="id"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  role="treeitem"
+>
+  <div>
+    <div
+      className="treeNodeHeader "
+      data-test="label"
+      style={
+        Object {
+          "paddingLeft": 23,
+        }
+      }
+      tabIndex={-1}
+    >
+      <img
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+      <div
+        onContextMenu={[Function]}
+        onKeyPress={[Function]}
+      >
+        <CustomizedIconButton
+          ariaLabel="More"
+          className="treeMenuEllipsis"
+          menuIconProps={
+            Object {
+              "iconName": "More",
+              "styles": Object {
+                "root": Object {
+                  "fontSize": "18px",
+                  "fontWeight": "bold",
+                },
+              },
+            }
+          }
+          menuProps={
+            Object {
+              "contextualMenuItemAs": [Function],
+              "coverTarget": true,
+              "directionalHint": 3,
+              "isBeakVisible": false,
+              "items": Array [],
+              "onMenuDismissed": [Function],
+              "onMenuOpened": [Function],
+            }
+          }
+          name="More"
+          styles={
+            Object {
+              "rootFocused": Object {
+                "outline": "1px dashed undefined",
+              },
+            }
+          }
+          title="More"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="loadingIconContainer"
+  >
+    <img
+      className="loadingIcon"
+      hidden={true}
+      src=""
+    />
+  </div>
+  <AnimateHeight
+    animateOpacity={false}
+    animationStateClasses={
+      Object {
+        "animating": "rah-animating",
+        "animatingDown": "rah-animating--down",
+        "animatingToHeightAuto": "rah-animating--to-height-auto",
+        "animatingToHeightSpecific": "rah-animating--to-height-specific",
+        "animatingToHeightZero": "rah-animating--to-height-zero",
+        "animatingUp": "rah-animating--up",
+        "static": "rah-static",
+        "staticHeightAuto": "rah-static--height-auto",
+        "staticHeightSpecific": "rah-static--height-specific",
+        "staticHeightZero": "rah-static--height-zero",
+      }
+    }
+    applyInlineTransitions={true}
+    delay={0}
+    duration={200}
+    easing="ease"
+    height="auto"
+    style={Object {}}
+  >
+    <div
+      className="nodeChildren"
+      data-test="label"
+      role="group"
     >
       <TreeNodeComponent
         generation={13}
@@ -534,30 +546,32 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
   onKeyPress={[Function]}
   role="treeitem"
 >
-  <div
+  <div>
-    className="treeNodeHeader "
+    <div
-    data-test="label"
+      className="treeNodeHeader "
-    style={
+      data-test="label"
-      Object {
+      style={
-        "paddingLeft": 9,
+        Object {
+          "paddingLeft": 9,
+        }
       }
-    }
+      tabIndex={-1}
-    tabIndex={-1}
-  >
-    <img
-      alt="label branch is expanded"
-      className="expandCollapseIcon"
-      onKeyPress={[Function]}
-      role="button"
-      src=""
-      tabIndex={0}
-    />
-    <span
-      className="nodeLabel"
-      title="label"
     >
-      label
+      <img
-    </span>
+        alt="label branch is expanded"
+        className="expandCollapseIcon"
+        onKeyPress={[Function]}
+        role="button"
+        src=""
+        tabIndex={0}
+      />
+      <span
+        className="nodeLabel"
+        title="label"
+      >
+        label
+      </span>
+    </div>
   </div>
   <div
     className="loadingIconContainer"
@@ -594,6 +608,7 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
     <div
       className="nodeChildren"
       data-test="label"
+      role="group"
     >
       <TreeNodeComponent
         generation={3}

src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx

@@ -40,6 +40,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
             {/* svg load more icon inlined as-is here: remove the style="fill:#374649;" so we can override it */}
             <svg
               role="img"
+              aria-label="graph"
               version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -135,6 +136,7 @@ export class GraphVizComponent extends React.Component<GraphVizComponentProps> {
           <g id="triangleRight">
             <svg
               role="img"
+              aria-label="graph"
               version="1.1"
               id="Layer_1"
               xmlns="http://www.w3.org/2000/svg"

src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

@@ -17,19 +17,20 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
       <div className="middlePane">
         <div className="graphTitle">
           <span className="paneTitle">Graph</span>
-          <span
+          <button
+          style={{border:'none',background:'none'}}
             className="graphExpandCollapseBtn pull-right"
             onClick={this.props.toggleExpandGraph}
             role="button"
             aria-expanded={this.props.isTabsContentExpanded}
             aria-name="View graph in full screen"
-            tabIndex={0}
+ 
           >
             <img
               src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
               alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"}
             />
-          </span>
+          </button>
         </div>
         <div className="maingraphContainer">
           <GraphVizComponent forceGraphParams={this.props.graphVizProps.forceGraphParams} />

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -147,12 +147,10 @@ export class NotificationConsoleComponent extends React.Component<
             <div className="notificationConsoleControls">
               <Dropdown
                 label="Filter:"
-                role="combobox"
                 selectedKey={this.state.selectedFilter}
                 options={NotificationConsoleComponent.FilterOptions}
                 onChange={this.onFilterSelected.bind(this)}
-                aria-labelledby="consoleFilterLabel"
+
-                aria-label={this.state.selectedFilter}
               />
               <span className="consoleSplitter" />
               <span

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -112,8 +112,6 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
         className="notificationConsoleControls"
       >
         <Dropdown
-          aria-label="All"
-          aria-labelledby="consoleFilterLabel"
           label="Filter:"
           onChange={[Function]}
           options={
@@ -278,8 +276,6 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
         className="notificationConsoleControls"
       >
         <Dropdown
-          aria-label="All"
-          aria-labelledby="consoleFilterLabel"
           label="Filter:"
           onChange={[Function]}
           options={

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -13,7 +13,7 @@ import {
   Stack,
   TeachingBubble,
   Text,
-  TooltipHost,
+  TooltipHost
 } from "@fluentui/react";
 import * as Constants from "Common/Constants";
 import { createCollection } from "Common/dataAccess/createCollection";
@@ -100,6 +100,7 @@ export interface AddCollectionPanelState {
   isExecuting: boolean;
   isThroughputCapExceeded: boolean;
   teachingBubbleStep: number;
+  isParentTooltipVisible:boolean;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -108,6 +109,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
   private collectionThroughput: number;
   private isCollectionAutoscale: boolean;
   private isCostAcknowledged: boolean;
+  
 
   constructor(props: AddCollectionPanelProps) {
     super(props);
@@ -134,13 +136,16 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       isExecuting: false,
       isThroughputCapExceeded: false,
       teachingBubbleStep: 0,
+      isParentTooltipVisible: false,
     };
+    
   }
 
   componentDidMount(): void {
     if (this.state.teachingBubbleStep === 0 && this.props.isQuickstart) {
       this.setState({ teachingBubbleStep: 1 });
     }
+
   }
 
   render(): JSX.Element {
@@ -274,6 +279,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             </Stack>
 
             <Stack horizontal verticalAlign="center">
+              <div role='radiogroup'>
               <input
                 className="panelRadioBtn"
                 checked={this.state.createNewDatabase}
@@ -300,6 +306,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 onChange={this.onUseExistingDatabaseRadioBtnChange.bind(this)}
               />
               <span className="panelRadioBtnLabel">Use existing</span>
+              </div>
             </Stack>
 
             {this.state.createNewDatabase && (
@@ -405,6 +412,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   className="panelInfoIcon"
                   tabIndex={0}
                   ariaLabel={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
+                  role="button"
                 />
               </TooltipHost>
             </Stack>
@@ -802,6 +810,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               </Stack>
 
               <Stack horizontal verticalAlign="center">
+                <div role="radiogroup">
                 <input
                   className="panelRadioBtn"
                   checked={this.state.enableAnalyticalStore}
@@ -831,6 +840,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                   onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
                 />
                 <span className="panelRadioBtnLabel">Off</span>
+                </div>
               </Stack>
 
               {!this.isSynapseLinkEnabled() && (

src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap

@@ -42,39 +42,43 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         horizontal={true}
         verticalAlign="center"
       >
-        <input
+        <div
-          aria-checked={true}
+          role="radiogroup"
-          aria-label="Create new database"
-          checked={true}
-          className="panelRadioBtn"
-          id="databaseCreateNew"
-          name="databaseType"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
         >
-          Create new
+          <input
-        </span>
+            aria-checked={true}
-        <input
+            aria-label="Create new database"
-          aria-checked={false}
+            checked={true}
-          aria-label="Use existing database"
+            className="panelRadioBtn"
-          checked={false}
+            id="databaseCreateNew"
-          className="panelRadioBtn"
+            name="databaseType"
-          name="databaseType"
+            onChange={[Function]}
-          onChange={[Function]}
+            role="radio"
-          role="radio"
+            tabIndex={0}
-          tabIndex={0}
+            type="radio"
-          type="radio"
+          />
-        />
+          <span
-        <span
+            className="panelRadioBtnLabel"
-          className="panelRadioBtnLabel"
+          >
-        >
+            Create new
-          Use existing
+          </span>
-        </span>
+          <input
+            aria-checked={false}
+            aria-label="Use existing database"
+            checked={false}
+            className="panelRadioBtn"
+            name="databaseType"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            Use existing
+          </span>
+        </div>
       </Stack>
       <Stack
         className="panelGroupSpacing"
@@ -168,6 +172,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
             ariaLabel="Unique identifier for the container and used for id-based routing through REST and all SDKs."
             className="panelInfoIcon"
             iconName="Info"
+            role="button"
             tabIndex={0}
           />
         </StyledTooltipHostBase>
@@ -342,42 +347,46 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
         horizontal={true}
         verticalAlign="center"
       >
-        <input
+        <div
-          aria-checked={false}
+          role="radiogroup"
-          aria-label="Enable analytical store"
-          checked={false}
-          className="panelRadioBtn"
-          disabled={true}
-          id="enableAnalyticalStoreBtn"
-          name="analyticalStore"
-          onChange={[Function]}
-          role="radio"
-          tabIndex={0}
-          type="radio"
-        />
-        <span
-          className="panelRadioBtnLabel"
         >
-          On
+          <input
-        </span>
+            aria-checked={false}
-        <input
+            aria-label="Enable analytical store"
-          aria-checked={true}
+            checked={false}
-          aria-label="Disable analytical store"
+            className="panelRadioBtn"
-          checked={true}
+            disabled={true}
-          className="panelRadioBtn"
+            id="enableAnalyticalStoreBtn"
-          disabled={true}
+            name="analyticalStore"
-          id="disableAnalyticalStoreBtn"
+            onChange={[Function]}
-          name="analyticalStore"
+            role="radio"
-          onChange={[Function]}
+            tabIndex={0}
-          role="radio"
+            type="radio"
-          tabIndex={0}
+          />
-          type="radio"
+          <span
-        />
+            className="panelRadioBtnLabel"
-        <span
+          >
-          className="panelRadioBtnLabel"
+            On
-        >
+          </span>
-          Off
+          <input
-        </span>
+            aria-checked={true}
+            aria-label="Disable analytical store"
+            checked={true}
+            className="panelRadioBtn"
+            disabled={true}
+            id="disableAnalyticalStoreBtn"
+            name="analyticalStore"
+            onChange={[Function]}
+            role="radio"
+            tabIndex={0}
+            type="radio"
+          />
+          <span
+            className="panelRadioBtnLabel"
+          >
+            Off
+          </span>
+        </div>
       </Stack>
       <Stack
         className="panelGroupSpacing"

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -9,7 +9,7 @@ import {
   Stack,
   TeachingBubble,
   TeachingBubbleContent,
-  Text,
+  Text
 } from "@fluentui/react";
 import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";
@@ -116,7 +116,9 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
         <form className="connectExplorerFormContainer">
           <div className="splashScreenContainer">
             <div className="splashScreen">
-              <div className="title">
+              <div className="title" aria-label={userContext.apiType === "Postgres"
+                  ? "Welcome to Azure Cosmos DB for PostgreSQL"
+                  : "Welcome to Azure Cosmos DB"}>
                 {userContext.apiType === "Postgres"
                   ? "Welcome to Azure Cosmos DB for PostgreSQL"
                   : "Welcome to Azure Cosmos DB"}