a11y: accessibility2854

Composer/packages/client/src/components/ProjectTree/index.tsx

@@ -12,6 +12,7 @@ import {
   IGroupedList,
 } from 'office-ui-fabric-react/lib/GroupedList';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
+import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import cloneDeep from 'lodash/cloneDeep';
 import formatMessage from 'format-message';
 import { DialogInfo, ITrigger } from '@bfc/shared';
@@ -163,18 +164,19 @@ export const ProjectTree: React.FC<IProjectTreeProps> = props => {
       onResizeStop={handleResize}
     >
       <div className="ProjectTree" css={root} data-testid="ProjectTree">
-        <SearchBox
-          ariaLabel={formatMessage('Type dialog name')}
-          placeholder={formatMessage('Filter Dialog')}
-          styles={searchBox}
-          onChange={onFilter}
-          iconProps={{ iconName: 'Filter' }}
-          underlined
-        />
-        <div
-          aria-live={'polite'}
-          aria-label={formatMessage(
-            `{
+        <FocusZone direction={FocusZoneDirection.vertical} isCircularNavigation={true}>
+          <SearchBox
+            ariaLabel={formatMessage('Type dialog name')}
+            placeholder={formatMessage('Filter Dialog')}
+            styles={searchBox}
+            onChange={onFilter}
+            iconProps={{ iconName: 'Filter' }}
+            underlined
+          />
+          <div
+            aria-live={'polite'}
+            aria-label={formatMessage(
+              `{
             dialogNum, plural,
                 =0 {No dialogs}
                 =1 {One dialog}
@@ -185,24 +187,25 @@ export const ProjectTree: React.FC<IProjectTreeProps> = props => {
                   0 {}
                 other {Press down arrow key to navigate the search results}
             }`,
-            { dialogNum: res.groups.length }
-          )}
-        />
-        <GroupedList
-          {...res}
-          onRenderCell={onRenderCell}
-          componentRef={groupRef}
-          groupProps={
-            {
-              onRenderHeader: onRenderHeader,
-              onRenderShowAll: onRenderShowAll,
-              showEmptyGroups: true,
-              showAllProps: false,
-              isAllGroupsCollapsed: true,
-            } as Partial<IGroupRenderProps>
-          }
-          styles={groupListStyle}
-        />
+              { dialogNum: res.groups.length }
+            )}
+          />
+          <GroupedList
+            {...res}
+            onRenderCell={onRenderCell}
+            componentRef={groupRef}
+            groupProps={
+              {
+                onRenderHeader: onRenderHeader,
+                onRenderShowAll: onRenderShowAll,
+                showEmptyGroups: true,
+                showAllProps: false,
+                isAllGroupsCollapsed: true,
+              } as Partial<IGroupRenderProps>
+            }
+            styles={groupListStyle}
+          />
+        </FocusZone>
       </div>
     </Resizable>
   );

Composer/packages/client/src/components/ProjectTree/treeItem.tsx

@@ -21,7 +21,14 @@ interface ITreeItemProps {
 
 const onRenderItem = (item: IOverflowSetItemProps) => {
   return (
-    <div role="cell" css={itemText(item.depth)} tabIndex={0} onFocus={item.onFocus} onBlur={item.onBlur}>
+    <div
+      role="cell"
+      css={itemText(item.depth)}
+      tabIndex={0}
+      onFocus={item.onFocus}
+      onBlur={item.onBlur}
+      data-is-focusable={true}
+    >
       <div css={content} tabIndex={-1}>
         {item.depth !== 0 && (
           <Icon
@@ -47,11 +54,17 @@ const onRenderOverflowButton = (isRoot: boolean, isActive: boolean) => {
     return showIcon ? (
       <IconButton
         role="cell"
+        data-is-focusable={isActive}
         className="dialog-more-btn"
         data-testid="dialogMoreButton"
         styles={moreButton(isActive)}
         menuIconProps={{ iconName: 'MoreVertical' }}
         menuProps={{ items: overflowItems, styles: menuStyle }}
+        onKeyDown={e => {
+          if (e.key === 'Enter') {
+            e.stopPropagation();
+          }
+        }}
       />
     ) : null;
   };
@@ -94,6 +107,9 @@ export const TreeItem: React.FC<ITreeItemProps> = props => {
         data-testid={`DialogTreeItem${link.id}`}
         onRenderItem={onRenderItem}
         onRenderOverflowButton={onRenderOverflowButton(link.isRoot, isActive)}
+        //In 8.0 the OverflowSet will no longer be wrapped in a FocusZone
+        //remove this at that time
+        doNotContainWithinFocusZone={true}
       />
     </div>
   );