move add/filter buttons outside tree's tab order (#6510)

Co-authored-by: Chris Whitten <[email protected]>
microsoft · Mar 31, 2021 · 447fa7b · 447fa7b
1 parent 07f037c
commit 447fa7b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTree.tsx
@@ -787,13 +787,13 @@ export const ProjectTree: React.FC<Props> = ({
       data-testid="ProjectTree"
       role="region"
     >
+      <ProjectTreeHeader
+        ariaLabel={headerAriaLabel}
+        menu={headerMenu}
+        placeholder={headerPlaceholder}
+        onFilter={onFilter}
+      />
       <FocusZone isCircularNavigation css={focusStyle} direction={FocusZoneDirection.vertical}>
-        <ProjectTreeHeader
-          ariaLabel={headerAriaLabel}
-          menu={headerMenu}
-          placeholder={headerPlaceholder}
-          onFilter={onFilter}
-        />
         <div
           aria-label={formatMessage(
             `{

diff --git a/Composer/packages/client/src/components/ProjectTree/ProjectTreeHeader.tsx b/Composer/packages/client/src/components/ProjectTree/ProjectTreeHeader.tsx
@@ -40,7 +40,7 @@ const commands = css`
   box-sizing: border-box;
   justify-content: space-between;
   display: flex;
-  flex-direction: row-reverse;
+  flex-direction: row;
 `;
 
 export interface ProjectTreeHeaderMenuItem {
@@ -105,13 +105,6 @@ export const ProjectTreeHeader: React.FC<ProjectTreeHeaderProps> = ({
         />
       ) : (
         <div css={commands}>
-          <CommandButton
-            css={buttonStyle}
-            iconProps={{ iconName: 'Filter' }}
-            onClick={() => {
-              setShowFilter(true);
-            }}
-          />
           {overflowMenu.length ? (
             <CommandButton
               data-is-focusable
@@ -121,6 +114,7 @@ export const ProjectTreeHeader: React.FC<ProjectTreeHeaderProps> = ({
               data-testid="projectTreeHeaderMoreButton"
               iconProps={{ iconName: 'Add' }}
               menuProps={{ items: overflowMenu }}
+              tabIndex={0}
               text={formatMessage('Add')}
               onKeyDown={(e) => {
                 if (e.key === 'Enter') {
@@ -129,6 +123,14 @@ export const ProjectTreeHeader: React.FC<ProjectTreeHeaderProps> = ({
               }}
             />
           ) : null}
+          <CommandButton
+            css={buttonStyle}
+            iconProps={{ iconName: 'Filter' }}
+            tabIndex={0}
+            onClick={() => {
+              setShowFilter(true);
+            }}
+          />
         </div>
       )}
     </div>