sev2 accessibilitydefects in data explorer

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() && (