a11y: move FocusZone from NavItem to App (#2341)

* move FocusZone from NavItem to App * Update index.tsx
microsoft · Mar 23, 2020 · 1034aef · 1034aef
1 parent 374b6f2
commit 1034aef
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 40 deletions.
diff --git a/Composer/packages/client/src/App.tsx b/Composer/packages/client/src/App.tsx
@@ -6,6 +6,7 @@ import { jsx } from '@emotion/core';
 import React, { forwardRef, useContext, useState, Fragment, Suspense } from 'react';
 import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 import formatMessage from 'format-message';
 
 import { Header } from './components/Header';
@@ -137,18 +138,20 @@ export const App: React.FC = () => {
               ariaLabel={sideBarExpand ? formatMessage('Collapse Nav') : formatMessage('Expand Nav')}
             />
             <div css={dividerTop} />{' '}
-            {topLinks(projectId).map((link, index) => {
-              return (
-                <NavItem
-                  key={'NavLeftBar' + index}
-                  to={mapNavItemTo(link.to)}
-                  iconName={link.iconName}
-                  labelName={link.labelName}
-                  exact={link.exact}
-                  disabled={link.disabled}
-                />
-              );
-            })}
+            <FocusZone allowFocusRoot={true}>
+              {topLinks(projectId).map((link, index) => {
+                return (
+                  <NavItem
+                    key={'NavLeftBar' + index}
+                    to={mapNavItemTo(link.to)}
+                    iconName={link.iconName}
+                    labelName={link.labelName}
+                    exact={link.exact}
+                    disabled={link.disabled}
+                  />
+                );
+              })}
+            </FocusZone>
           </div>
           <div css={leftNavBottom}>
             <div css={divider(sideBarExpand)} />{' '}

diff --git a/Composer/packages/client/src/components/NavItem/index.tsx b/Composer/packages/client/src/components/NavItem/index.tsx
@@ -6,7 +6,6 @@ import { jsx } from '@emotion/core';
 import { useCallback, useContext, useState } from 'react';
 import { Link, LinkGetProps } from '@reach/router';
 import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
-import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 
 import { StoreContext } from '../../store';
 
@@ -38,32 +37,30 @@ export const NavItem: React.FC<INavItemProps> = props => {
   const addRef = useCallback(ref => onboardingAddCoachMarkRef({ [`nav${labelName.replace(' ', '')}`]: ref }), []);
 
   return (
-    <FocusZone allowFocusRoot={true} disabled={disabled}>
-      <Link
-        to={to}
-        css={link(active, disabled)}
-        getProps={(props: LinkGetProps) => {
-          const isActive = exact ? props.isCurrent : props.isPartiallyCurrent;
-          setActive(isActive);
-          return {};
-        }}
-        data-testid={'LeftNav-CommandBarButton' + labelName}
-        aria-disabled={disabled}
-        aria-label={labelName}
-        ref={addRef}
-      >
-        <div css={outer} aria-hidden="true">
-          <CommandBarButton
-            iconProps={{
-              iconName,
-            }}
-            text={labelName}
-            styles={commandBarButton(active)}
-            disabled={disabled}
-            ariaHidden
-          />
-        </div>
-      </Link>
-    </FocusZone>
+    <Link
+      to={to}
+      css={link(active, disabled)}
+      getProps={(props: LinkGetProps) => {
+        const isActive = exact ? props.isCurrent : props.isPartiallyCurrent;
+        setActive(isActive);
+        return {};
+      }}
+      data-testid={'LeftNav-CommandBarButton' + labelName}
+      aria-disabled={disabled}
+      aria-label={labelName}
+      ref={addRef}
+    >
+      <div css={outer} aria-hidden="true" tabIndex={-1}>
+        <CommandBarButton
+          iconProps={{
+            iconName,
+          }}
+          text={labelName}
+          styles={commandBarButton(active)}
+          disabled={disabled}
+          ariaHidden
+        />
+      </div>
+    </Link>
   );
 };