Fixed a11y refresh button issue for Documents tab

less/documentDB.less

@@ -2245,7 +2245,8 @@ a:link {
 }
 
 .refreshColHeader {
-  padding: 3px 6px 10px 0px !important;
+  padding: 3px 0px 10px 0px !important;
+  width: 15px;
 }
 
 .refreshColHeader:hover {

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -194,7 +194,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} role="tree">
+            <div className="nodeChildren" data-test={node.label}>
               {TreeNodeComponent.getSortedChildren(node).map((childNode: TreeNode) => (
                 <TreeNodeComponent
                   key={`${childNode.label}-${generation + 1}-${childNode.timestamp}`}

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

@@ -100,7 +100,6 @@ exports[`TreeNodeComponent does not render children by default 1`] = `
     <div
       className="nodeChildren"
       data-test="label"
-      role="tree"
     >
       <TreeNodeComponent
         generation={3}
@@ -251,7 +250,6 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
     <div
       className="nodeChildren"
       data-test="label"
-      role="tree"
     >
       <TreeNodeComponent
         generation={13}
@@ -353,7 +351,6 @@ exports[`TreeNodeComponent renders loading icon 1`] = `
     <div
       className="nodeChildren"
       data-test="label"
-      role="tree"
     />
   </AnimateHeight>
 </div>
@@ -466,7 +463,6 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
     <div
       className="nodeChildren"
       data-test="label"
-      role="tree"
     >
       <TreeNodeComponent
         generation={13}
@@ -596,7 +592,6 @@ exports[`TreeNodeComponent renders unsorted children by default 1`] = `
     <div
       className="nodeChildren"
       data-test="label"
-      role="tree"
     >
       <TreeNodeComponent
         generation={3}

src/Explorer/Tabs/DocumentsTab.html

@@ -158,13 +158,13 @@
                   role="button"
                   aria-label="Refresh documents"
                   data-bind="event: { keydown: onRefreshButtonKeyDown }"
+                  tabindex="0"
                 >
                   <img
                     class="refreshcol"
                     src="/refresh-cosmos.svg"
                     data-bind="click: refreshDocumentsGrid"
                     alt="Refresh documents"
-                    tabindex="0"
                   />
                 </th>
               </tr>