From f27706bc3769d225daa72c2edb1a92552fb5bb60 Mon Sep 17 00:00:00 2001
From: Sampath <v-smokireddy@microsoft.com>
Date: Mon, 20 Mar 2023 13:09:04 +0530
Subject: [PATCH] Accessibility sev-2 defects-2

---
 less/documentDB.less                                 |  5 +++++
 src/Explorer/Controls/Tabs/TabComponent.tsx          | 12 ++++++++++--
 .../Controls/TreeComponent/treeComponent.less        |  5 +++--
 src/Explorer/Panes/AddCollectionPanel.tsx            |  1 +
 .../__snapshots__/AddCollectionPanel.test.tsx.snap   |  1 +
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/less/documentDB.less b/less/documentDB.less
index bc36d1483..f122472ee 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2576,6 +2576,10 @@ a:link {
 .querydropdown.placeholderVisible {
   font-style: italic;
 }
+.querydropdown.placeholderVisible::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #000;
+  opacity: 1; 
+}
 
 .querydropdown:hover {
   background-color: @AccentLow;
@@ -3087,3 +3091,4 @@ a:link {
   background: white;
   height: 100%;
 }
+
diff --git a/src/Explorer/Controls/Tabs/TabComponent.tsx b/src/Explorer/Controls/Tabs/TabComponent.tsx
index 7936321d0..9cfcf8ae5 100644
--- a/src/Explorer/Controls/Tabs/TabComponent.tsx
+++ b/src/Explorer/Controls/Tabs/TabComponent.tsx
@@ -46,10 +46,13 @@ export class TabComponent extends React.Component<TabComponentProps> {
       }
 
       let className = "toggleSwitch";
+      let ariaselected;
       if (index === this.props.currentTabIndex) {
         className += " selectedToggle";
+        ariaselected = true;
       } else {
         className += " unselectedToggle";
+        ariaselected = false;
       }
 
       return (
@@ -57,9 +60,10 @@ export class TabComponent extends React.Component<TabComponentProps> {
           <AccessibleElement
             as="span"
             className={className}
-            role="presentation"
+            role="tab"
             onActivated={() => this.setActiveTab(index)}
             aria-label={`Select tab: ${tab.title}`}
+            aria-selected={ariaselected}
           >
             {tab.title}
           </AccessibleElement>
@@ -77,7 +81,11 @@ export class TabComponent extends React.Component<TabComponentProps> {
 
     return (
       <div className="tabComponentContainer">
-        {!this.props.hideHeader && <div className="tabs tabSwitch">{this.renderTabTitles()}</div>}
+        {!this.props.hideHeader && (
+          <div className="tabs tabSwitch" role="tablist">
+            {this.renderTabTitles()}
+          </div>
+        )}
         <div className={className}>{currentTabContent.render()}</div>
       </div>
     );
diff --git a/src/Explorer/Controls/TreeComponent/treeComponent.less b/src/Explorer/Controls/TreeComponent/treeComponent.less
index e13a9e40d..fbce48267 100644
--- a/src/Explorer/Controls/TreeComponent/treeComponent.less
+++ b/src/Explorer/Controls/TreeComponent/treeComponent.less
@@ -3,11 +3,12 @@
 .treeComponent {
   .nodeItem {
     &:focus {
-      outline: 1px dashed @AccentMedium;
+      outline: 2px @AccentMedium;
     }
 
     .treeNodeHeader {
-      padding: @SmallSpace 2px;
+      // padding: @SmallSpace 2px;
+      margin: 2px;
       cursor: pointer;
       display: flex;
 
diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index 5e49b9cfc..8983610c8 100644
--- a/src/Explorer/Panes/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel.tsx
@@ -403,6 +403,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                 content={`Unique identifier for the ${getCollectionName().toLocaleLowerCase()} and used for id-based routing through REST and all SDKs.`}
               >
                 <Icon
+                  role="button"
                   iconName="Info"
                   className="panelInfoIcon"
                   tabIndex={0}
diff --git a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
index 000310d32..0601343f8 100644
--- a/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/AddCollectionPanel.test.tsx.snap
@@ -172,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>