From c7c894d6d93f568646fc018c51359db7c8a26681 Mon Sep 17 00:00:00 2001
From: MokireddySampath <120497218+MokireddySampath@users.noreply.github.com>
Date: Mon, 3 Apr 2023 22:11:40 +0530
Subject: [PATCH] Sampath accessibility sev 2 2 (#1404)

* autoscale and manual radiobuutton fixes

* alt text attribute for images

* Revert "alt text attribute for images"

This reverts commit 5a660551c6289d475b6298f90abc9d149146772e.

* alt text for decorative images

* sev2 accessibilitydefects in data explorer

* Revert "sev2 accessibilitydefects in data explorer"

This reverts commit b84d5b572c6f127cd17033995c919867285d897e.

* Sev2 accessibilitydefects

* Revert "Sev2 accessibilitydefects"

This reverts commit a4e60f106c43d0fe994fc9a0749b084ae427397e.

* accessibilitydefects-data explorer

* Accessibility sev-2 defects-2

* corrections for 2278347,2278096 and fix for 2264174

* color for placeholder changed to 767474, margin is set to accommodate height between treeheader elements

* padding added for databaseheader, removed margin and restored padding to treenodeheader
---
 less/documentDB.less                                 |  5 +++++
 less/resourceTree.less                               |  1 +
 src/Explorer/Controls/Tabs/TabComponent.tsx          | 12 ++++++++++--
 .../Controls/TreeComponent/treeComponent.less        |  2 +-
 src/Explorer/Panes/AddCollectionPanel.tsx            |  1 +
 .../__snapshots__/AddCollectionPanel.test.tsx.snap   |  1 +
 src/Explorer/Tabs/Tabs.tsx                           |  1 +
 7 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/less/documentDB.less b/less/documentDB.less
index bc36d1483..1395c9482 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: #767474;
+  opacity: 1; 
+}
 
 .querydropdown:hover {
   background-color: @AccentLow;
@@ -3087,3 +3091,4 @@ a:link {
   background: white;
   height: 100%;
 }
+
diff --git a/less/resourceTree.less b/less/resourceTree.less
index 68aa3d0de..da7a5c90d 100644
--- a/less/resourceTree.less
+++ b/less/resourceTree.less
@@ -5,6 +5,7 @@
   overflow: auto;
 
   .databaseHeader {
+    padding: 1px;
     font-size: 14px;
   }
 
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..8be1a3c52 100644
--- a/src/Explorer/Controls/TreeComponent/treeComponent.less
+++ b/src/Explorer/Controls/TreeComponent/treeComponent.less
@@ -3,7 +3,7 @@
 .treeComponent {
   .nodeItem {
     &:focus {
-      outline: 1px dashed @AccentMedium;
+      outline: 2px @AccentMedium;
     }
 
     .treeNodeHeader {
diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx
index 540e4d85c..4fff25384 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>
diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx
index b289c658b..bcd867756 100644
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -92,6 +92,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
         }
       }}
       className={active ? "active tabList" : "tabList"}
+      style={active ? { fontWeight: "bolder" } : {}}
       title={useObservable(tab?.tabPath || ko.observable(""))}
       aria-selected={active}
       aria-expanded={active}