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 5a660551c6.

* alt text for decorative images

* sev2 accessibilitydefects in data explorer

* Revert "sev2 accessibilitydefects in data explorer"

This reverts commit b84d5b572c.

* Sev2 accessibilitydefects

* Revert "Sev2 accessibilitydefects"

This reverts commit a4e60f106c.

* 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

@@ -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%;
 }
+

less/resourceTree.less

@@ -5,6 +5,7 @@
   overflow: auto;
 
   .databaseHeader {
+    padding: 1px;
     font-size: 14px;
   }
 

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>
     );

src/Explorer/Controls/TreeComponent/treeComponent.less

@@ -3,7 +3,7 @@
 .treeComponent {
   .nodeItem {
     &:focus {
-      outline: 1px dashed @AccentMedium;
+      outline: 2px @AccentMedium;
     }
 
     .treeNodeHeader {

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}

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>

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}