feat(FocusZone): Enable RTL (#646)

* Pass isRtl in renderComponent

* Fixes to focus zone when bidirectional and RTL

* update changelog

* Fix

* Update changelog

Author: sophieH29

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Export initial set of compose icons in Teams theme @joheredi ([#638](https://github.com/stardust-ui/react/pull/638))
 - Add and export compose icons in Teams theme @joheredi ([#639](https://github.com/stardust-ui/react/pull/639))
 - Add `menu` prop to `MenuItem` @mnajdova ([#539](https://github.com/stardust-ui/react/pull/539))
+- Enable RTL for `FocusZone` @sophieH29 ([#646](https://github.com/stardust-ui/react/pull/646))
 
 <!--------------------------------[ v0.15.0 ]------------------------------- -->
 ## [v0.15.0](https://github.com/stardust-ui/react/tree/v0.15.0) (2018-12-17)

src/lib/accessibility/FocusZone/CHANGELOG.md

@@ -15,6 +15,7 @@ This is a list of changes made to this Stardust copy of FocusZone in comparison
     - Renamed `defaultActiveElement` to `defaultTabbableElement` and changed behavior:
         - Changed to query only descendants of the focus zone instead of the whole document, which enables to write simpler selectors. Note that we do not lose any functionality by this, because selecting elements outside of focus zone had no effect.
         - Changed not to call `this.focus()` on component mount (this was causing issues e.g., in docsite, where every change in source code would refocus the mounted component). Instead, you can now use a new property `shouldFocusOnMount`.
+- Enable RTL @sophieH29 ([#646](https://github.com/stardust-ui/react/pull/646))
 
 - Add `shouldFocusFirstElementWhenReceivedFocus` prop, which forces focus to first element when container receives focus @sophieH29 ([#469](https://github.com/stardust-ui/react/pull/469))
 - Handle keyDownCapture based on `shouldHandleKeyDownCapture` prop @sophieH29 ([#563](https://github.com/stardust-ui/react/pull/563)) 

src/lib/accessibility/FocusZone/FocusZone.tsx

@@ -747,9 +747,20 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
         this.props.isRtl,
         (activeRect: ClientRect, targetRect: ClientRect) => {
           let distance = -1
+          let topBottomComparison
+
+          if (this.props.isRtl) {
+            // When in RTL, this comparison should be the same as the one in moveFocusRight for LTR.
+            // Going left at a leftmost rectangle will go down a line instead of up a line like in LTR.
+            // This is important, because we want to be comparing the top of the target rect
+            // with the bottom of the active rect.
+            topBottomComparison = targetRect.top.toFixed(3) < activeRect.bottom.toFixed(3)
+          } else {
+            topBottomComparison = targetRect.bottom.toFixed(3) > activeRect.top.toFixed(3)
+          }
 
           if (
-            targetRect.bottom > activeRect.top &&
+            topBottomComparison &&
             targetRect.right <= activeRect.right &&
             this.props.direction !== FocusZoneDirection.vertical
           ) {
@@ -775,9 +786,20 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
         !this.props.isRtl,
         (activeRect: ClientRect, targetRect: ClientRect) => {
           let distance = -1
+          let topBottomComparison
+
+          if (this.props.isRtl) {
+            // When in RTL, this comparison should be the same as the one in moveFocusLeft for LTR.
+            // Going right at a rightmost rectangle will go up a line instead of down a line like in LTR.
+            // This is important, because we want to be comparing the bottom of the target rect
+            // with the top of the active rect.
+            topBottomComparison = targetRect.bottom.toFixed(3) > activeRect.top.toFixed(3)
+          } else {
+            topBottomComparison = targetRect.top.toFixed(3) < activeRect.bottom.toFixed(3)
+          }
 
           if (
-            targetRect.top < activeRect.bottom &&
+            topBottomComparison &&
             targetRect.left >= activeRect.left &&
             this.props.direction !== FocusZoneDirection.vertical
           ) {

src/lib/renderComponent.tsx

@@ -24,6 +24,7 @@ import {
   AccessibilityDefinition,
   AccessibilityActionHandlers,
   FocusZoneMode,
+  FocusZoneDefinition,
 } from './accessibility/types'
 import { defaultBehavior } from './accessibility'
 import getKeyDownHandlers from './getKeyDownHandlers'
@@ -100,11 +101,19 @@ function wrapInGenericFocusZone<
   )
 }
 
-const renderWithFocusZone = (render, focusZoneDefinition, config, focusZoneRef): any => {
+const renderWithFocusZone = <P extends {}>(
+  render: RenderComponentCallback<P>,
+  focusZoneDefinition: FocusZoneDefinition,
+  config: RenderResultConfig<P>,
+  focusZoneRef: (focusZone: FocusZone) => void,
+): any => {
   if (focusZoneDefinition.mode === FocusZoneMode.Wrap) {
     return wrapInGenericFocusZone(
       FabricFocusZone,
-      focusZoneDefinition.props,
+      {
+        ...focusZoneDefinition.props,
+        isRtl: config.rtl,
+      },
       render(config),
       focusZoneRef,
     )
@@ -115,6 +124,7 @@ const renderWithFocusZone = (render, focusZoneDefinition, config, focusZoneRef):
     config.rest = { ...config.rest, ...focusZoneDefinition.props }
     config.rest.as = originalElementType
     config.rest.ref = focusZoneRef
+    config.rest.isRtl = config.rtl
   }
   return render(config)
 }

test/specs/lib/FocusZone-test.tsx

@@ -1173,4 +1173,118 @@ describe('FocusZone', () => {
     // Focus goes to FocusZone container, which forces focus to first focusable element - buttonB
     expect(lastFocusedElement).toBe(buttonB)
   })
+
+  it('can use arrows bidirectionally in RTL', () => {
+    const component = ReactTestUtils.renderIntoDocument(
+      <div {...{ onFocusCapture: onFocus }}>
+        <FocusZone isRtl={true}>
+          <button className="a">a</button>
+          <button className="b">b</button>
+          <button className="c">c</button>
+          <button className="hidden">hidden</button>
+          <button className="d">d</button>
+          <button className="e">e</button>
+        </FocusZone>
+      </div>,
+    )
+
+    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance)!.firstChild as Element
+    const buttonA = focusZone.querySelector('.a') as HTMLElement
+    const buttonB = focusZone.querySelector('.b') as HTMLElement
+    const buttonC = focusZone.querySelector('.c') as HTMLElement
+    const hiddenButton = focusZone.querySelector('.hidden') as HTMLElement
+    const buttonD = focusZone.querySelector('.d') as HTMLElement
+    const buttonE = focusZone.querySelector('.e') as HTMLElement
+
+    // Set up a grid like so:
+    // B A
+    // hiddenButton C
+    // E D
+    //
+    // We will iterate from A to B, press down to skip hidden and go to C,
+    // down again to E, right to D, up to C, then back up to A.
+    setupElement(buttonA, {
+      clientRect: {
+        top: 0,
+        bottom: 20,
+        left: 30,
+        right: 0,
+      },
+    })
+
+    setupElement(buttonB, {
+      clientRect: {
+        top: 0,
+        bottom: 20,
+        left: 60,
+        right: 30,
+      },
+    })
+
+    setupElement(buttonC, {
+      clientRect: {
+        top: 20,
+        bottom: 40,
+        left: 20,
+        right: 0,
+      },
+    })
+
+    // hidden button should be ignored.
+    setupElement(hiddenButton, {
+      clientRect: {
+        top: 20,
+        bottom: 40,
+        left: 30,
+        right: 20,
+      },
+      isVisible: false,
+    })
+
+    setupElement(buttonD, {
+      clientRect: {
+        top: 40,
+        bottom: 60,
+        left: 25,
+        right: 0,
+      },
+    })
+
+    setupElement(buttonE, {
+      clientRect: {
+        top: 40,
+        bottom: 60,
+        left: 40,
+        right: 25,
+      },
+    })
+
+    // Focus the first button.
+    ReactTestUtils.Simulate.focus(buttonA)
+    expect(lastFocusedElement).toBe(buttonA)
+
+    // Pressing left should go to b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: keyboardKey.ArrowLeft })
+    expect(lastFocusedElement).toBe(buttonB)
+
+    // Pressing down should go to c.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: keyboardKey.ArrowDown })
+    expect(lastFocusedElement).toBe(buttonC)
+
+    // Pressing down should go to e.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: keyboardKey.ArrowDown })
+    expect(lastFocusedElement).toBe(buttonE)
+
+    // Pressing right should go to d.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: keyboardKey.ArrowRight })
+    expect(lastFocusedElement).toBe(buttonD)
+
+    // Pressing up should go to c.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: keyboardKey.ArrowUp })
+    expect(lastFocusedElement).toBe(buttonC)
+
+    // Pressing up should go to a.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: keyboardKey.ArrowUp })
+    expect(lastFocusedElement).toBe(buttonA)
+  })
 })