Focus Zone: Allow Tab to Skip Selection

common/changes/office-ui-fabric-react/focuszone-tabfix_2018-02-21-20-59.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Focus Zone: Add support for tab to skip selection elements",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "chiechan@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IContextualMenuProps, IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types';
 import { DirectionalHint } from '../../common/DirectionalHint';
-import { FocusZone, FocusZoneDirection, IFocusZoneProps } from '../../FocusZone';
+import { FocusZone, FocusZoneDirection, IFocusZoneProps, FocusZoneTabbableElements } from '../../FocusZone';
 import {
   IMenuItemClassNames,
   IContextualMenuClassNames,
@@ -319,7 +319,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
                 {...this._adjustedFocusZoneProps }
                 className={ this._classNames.root }
                 isCircularNavigation={ true }
-                allowTabKey={ true }
+                tabPermission={ FocusZoneTabbableElements.all }
               >
                 <ul
                   role='presentation'

packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx

@@ -7,7 +7,7 @@ import * as ReactTestUtils from 'react-dom/test-utils';
 import { KeyCodes } from '../../Utilities';
 
 import { FocusZone } from './FocusZone';
-import { FocusZoneDirection } from './FocusZone.types';
+import { FocusZoneDirection, FocusZoneTabbableElements } from './FocusZone.types';
 
 describe('FocusZone', () => {
   let lastFocusedElement: HTMLElement | undefined;
@@ -1048,7 +1048,7 @@ describe('FocusZone', () => {
     const tabDownListener = jest.fn();
     const component = ReactTestUtils.renderIntoDocument(
       <div { ...{ onFocusCapture: _onFocus, onKeyDown: tabDownListener } }>
-        <FocusZone {...{ allowTabKey: true, isCircularNavigation: true }}>
+        <FocusZone {...{ tabPermission: FocusZoneTabbableElements.all, isCircularNavigation: true }}>
           <button className='a'>a</button>
           <button className='b'>b</button>
           <button className='c'>c</button>

packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   FocusZoneDirection,
+  FocusZoneTabbableElements,
   IFocusZone,
   IFocusZoneProps
 } from './FocusZone.types';
@@ -63,6 +64,9 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   private _focusAlignment: IPoint;
   private _isInnerZone: boolean;
 
+  /** Used to allow us to move to next focusable element even when we're focusing on a input element when pressing tab */
+  private _processingTabKey: boolean;
+
   constructor(props: IFocusZoneProps) {
     super(props);
 
@@ -74,6 +78,8 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       left: 0,
       top: 0
     };
+
+    this._processingTabKey = false;
   }
 
   public componentDidMount() {
@@ -361,21 +367,18 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
           return;
 
         case KeyCodes.tab:
-          if (this.props.allowTabKey) {
+          if (this.props.tabPermission === FocusZoneTabbableElements.all
+            || (this.props.tabPermission === FocusZoneTabbableElements.inputOnly && this._isElementInput(ev.target as HTMLElement))) {
+            let focusChanged = false;
+            this._processingTabKey = true;
             if (direction === FocusZoneDirection.vertical ||
               !this._shouldWrapFocus(this._activeElement as HTMLElement, NO_HORIZONTAL_WRAP)) {
-              if (ev.shiftKey) {
-                this._moveFocusUp();
-              } else {
-                this._moveFocusDown();
-              }
-              break;
+              focusChanged = ev.shiftKey ? this._moveFocusUp() : this._moveFocusDown();
             } else if (direction === FocusZoneDirection.horizontal || direction === FocusZoneDirection.bidirectional) {
-              if (ev.shiftKey) {
-                this._moveFocusLeft();
-              } else {
-                this._moveFocusRight();
-              }
+              focusChanged = ev.shiftKey ? this._moveFocusLeft() : this._moveFocusRight();
+            }
+            this._processingTabKey = false;
+            if (focusChanged) {
               break;
             }
           }
@@ -646,7 +649,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       return distance;
     },
       undefined /*ev*/,
-      (shouldWrap || !getRTL())
+      shouldWrap
     )) {
       this._setFocusAlignment(this._activeElement as HTMLElement, true, false);
       return true;
@@ -674,7 +677,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       return distance;
     },
       undefined /*ev*/,
-      (shouldWrap || getRTL())
+      shouldWrap
     )) {
       this._setFocusAlignment(this._activeElement as HTMLElement, true, false);
       return true;
@@ -787,7 +790,13 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   }
 
   private _shouldInputLoseFocus(element: HTMLInputElement, isForward?: boolean) {
-    if (element &&
+    if (this.props.tabPermission === FocusZoneTabbableElements.inputOnly && !this._processingTabKey) {
+      return false;
+    }
+
+    // If a tab was used, we want to focus on the next element.
+    if (!this._processingTabKey &&
+      element &&
       element.type &&
       ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) {
       const selectionStart = element.selectionStart;

packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts

@@ -109,7 +109,7 @@ export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement | Focu
    * an unfortunate side effect is that users will not be able to tab out of the focus zone
    * and have to hit escape or some other key.
    */
-  allowTabKey?: boolean;
+  tabPermission?: FocusZoneTabbableElements;
 
   /**
    * Whether the to check for data-no-horizontal-wrap or data-no-vertical-wrap attributes
@@ -119,6 +119,18 @@ export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement | Focu
   checkForNoWrap?: boolean;
 }
 
+export enum FocusZoneTabbableElements {
+
+  /** Tabbing is not allowed */
+  none = 0,
+
+  /** All tabbing action is allowed */
+  all = 1,
+
+  /** Tabbing is allowed only on input elements */
+  inputOnly = 2
+}
+
 export enum FocusZoneDirection {
   /** Only react to up/down arrows. */
   vertical = 0,

packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx

@@ -8,10 +8,12 @@ import {
 import { FocusZonePhotosExample } from './examples/FocusZone.Photos.Example';
 import { FocusZoneListExample } from './examples/FocusZone.List.Example';
 import { FocusZoneDisabledExample } from './examples/FocusZone.Disabled.Example';
+import { FocusZoneTabbableExample } from './examples/FocusZone.Tabbable.Example';
 
 const FocusZonePhotosExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx') as string;
 const FocusZoneListExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx') as string;
 const FocusZoneDisabledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx') as string;
+const FocusZoneTabbableCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx') as string;
 
 export class FocusZonePage extends React.Component<IComponentDemoPageProps, {}> {
   public render() {
@@ -30,6 +32,9 @@ export class FocusZonePage extends React.Component<IComponentDemoPageProps, {}>
             <ExampleCard title='Disabled FocusZone' code={ FocusZoneDisabledExampleCode }>
               <FocusZoneDisabledExample />
             </ExampleCard>
+            <ExampleCard title='Tabbable FocusZone' code={ FocusZoneTabbableCode }>
+              <FocusZoneTabbableExample />
+            </ExampleCard>
           </div>
         }
         propertiesTables={

packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.scss

@@ -0,0 +1,11 @@
+:global {
+  .ms-FocusZoneTabbableExample .ms-Row {
+    display: block;
+    margin: 5px;
+  }
+
+  .ms-FocusZoneTabbableExample-textField {
+    display: inline-block;
+    width: 300px;
+  }
+}

packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx

@@ -0,0 +1,31 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from 'office-ui-fabric-react/lib/FocusZone';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import './FocusZone.Tabbable.Example.scss';
+
+export const FocusZoneTabbableExample = () => (
+  <div className='ms-FocusZoneTabbableExample'>
+    <div className='ms-Row'>
+      <FocusZone direction={ FocusZoneDirection.horizontal } tabPermission={ FocusZoneTabbableElements.all } isCircularNavigation={ true }>
+        <span>Circular Tabbable FocusZone: </span>
+        <DefaultButton>Button 1</DefaultButton>
+        <DefaultButton>Button 2</DefaultButton>
+        <TextField value='FocusZone TextField' className='ms-FocusZoneTabbableExample-textField' />
+        <DefaultButton>Button 3</DefaultButton>
+      </FocusZone>
+    </div>
+    <div className='ms-Row'>
+      <FocusZone direction={ FocusZoneDirection.horizontal } tabPermission={ FocusZoneTabbableElements.inputOnly } isCircularNavigation={ false }>
+        <span>Input Only FocusZone: </span>
+        <DefaultButton>Button 1</DefaultButton>
+        <DefaultButton>Button 2</DefaultButton>
+        <TextField value='FocusZone TextField' className='ms-FocusZoneTabbableExample-textField' />
+        <DefaultButton>Button 3</DefaultButton>
+      </FocusZone>
+    </div>
+  </div>
+);