feat(useAccessibility): add support for FocusZone (#2275)

* feat(useAccessibility): add support for FocusZone

* remove only

* improve types

Author: layershifter

packages/react-bindings/src/FocusZone/FocusZone.types.ts

@@ -38,9 +38,7 @@ export interface IFocusZone {
 /**
  * FocusZone component props.
  */
-export interface FocusZoneProps
-  extends FocusZoneProperties,
-    React.HTMLAttributes<HTMLElement | FocusZone> {
+export interface FocusZoneProps extends FocusZoneProperties, React.HTMLAttributes<HTMLElement> {
   /** @docSiteIgnore */
   as?: React.ReactType
   /**

packages/react-bindings/src/hooks/useAccessibility.ts

@@ -3,6 +3,7 @@ import * as React from 'react'
 
 import getAccessibility from '../accessibility/getAccessibility'
 import { ReactAccessibilityBehavior, AccessibilityActionHandlers } from '../accessibility/types'
+import FocusZone from '../FocusZone/FocusZone'
 
 type UseAccessibilityOptions<Props> = {
   actionHandlers?: AccessibilityActionHandlers
@@ -11,6 +12,13 @@ type UseAccessibilityOptions<Props> = {
   rtl?: boolean
 }
 
+type UseAccessibilityResult = (<SlotProps extends Record<string, any>>(
+  slotName: string,
+  slotProps: SlotProps,
+) => MergedProps<SlotProps>) & {
+  unstable_wrapWithFocusZone: (children: React.ReactElement) => React.ReactElement
+}
+
 type MergedProps<SlotProps extends Record<string, any>> = SlotProps &
   Partial<AccessibilityAttributesBySlot> & {
     onKeyDown?: (e: React.KeyboardEvent, ...args: any[]) => void
@@ -62,8 +70,30 @@ const useAccessibility = <Props>(
     actionHandlers,
   )
 
-  return <SlotProps extends Record<string, any>>(slotName: string, slotProps: SlotProps) =>
+  const getA11Props: UseAccessibilityResult = (slotName, slotProps) =>
     mergeProps(slotName, slotProps, definition)
+
+  // Provides an experimental handling for FocusZone definition in behaviors
+  getA11Props.unstable_wrapWithFocusZone = (element: React.ReactElement) => {
+    if (definition.focusZone) {
+      let child: React.ReactElement = element
+
+      if (process.env.NODE_ENV !== 'production') {
+        child = React.Children.only(element)
+      }
+
+      return React.createElement(FocusZone, {
+        ...definition.focusZone.props,
+        ...child.props,
+        as: child.type,
+        isRtl: rtl,
+      })
+    }
+
+    return element
+  }
+
+  return getA11Props
 }
 
 export default useAccessibility

packages/react-bindings/test/hooks/useAccessibility-test.tsx

@@ -29,6 +29,15 @@ const testBehavior: Accessibility<TestBehaviorProps> = props => ({
   },
 })
 
+const focusZoneBehavior: Accessibility<never> = () => ({
+  focusZone: {
+    props: {
+      disabled: true,
+      shouldFocusOnMount: true,
+    },
+  },
+})
+
 type TestComponentProps = {
   disabled?: boolean
   onClick?: (e: React.KeyboardEvent<HTMLDivElement>, slotName: string) => void
@@ -48,14 +57,28 @@ const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
     },
   })
 
-  return (
+  return getA11Props.unstable_wrapWithFocusZone(
     <div {...getA11Props('root', { onKeyDown, ...rest })}>
       <img
         {...getA11Props('img', {
           src: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
         })}
       />
-    </div>
+    </div>,
+  )
+}
+
+type FocusZoneComponentProps = {
+  as?: React.ElementType
+  rtl?: boolean
+}
+
+const FocusZoneComponent: React.FunctionComponent<FocusZoneComponentProps> = props => {
+  const { as: ElementType = 'div', children, rtl = false } = props
+  const getA11Props = useAccessibility(focusZoneBehavior, { rtl })
+
+  return getA11Props.unstable_wrapWithFocusZone(
+    <ElementType {...getA11Props('root', {})}>{children}</ElementType>,
   )
 }
 
@@ -115,4 +138,40 @@ describe('useAccessibility', () => {
       'root',
     )
   })
+
+  describe('FocusZone', () => {
+    it('do not render FocusZone without the definition in a behavior', () => {
+      expect(shallow(<TestComponent />).find('FocusZone')).toHaveLength(0)
+    })
+
+    it('renders FocusZone with the definition in a behavior', () => {
+      expect(shallow(<FocusZoneComponent />).find('FocusZone')).toHaveLength(1)
+    })
+
+    it('applies props from the behavior to a FocusZone component', () => {
+      expect(
+        shallow(<FocusZoneComponent />)
+          .find('FocusZone')
+          .props(),
+      ).toEqual(
+        expect.objectContaining({
+          disabled: true,
+          shouldFocusOnMount: true,
+        }),
+      )
+    })
+
+    it('passes "rtl" value', () => {
+      expect(
+        shallow(<FocusZoneComponent />)
+          .find('FocusZone')
+          .prop('isRtl'),
+      ).toBe(false)
+      expect(
+        shallow(<FocusZoneComponent rtl />)
+          .find('FocusZone')
+          .prop('isRtl'),
+      ).toBe(true)
+    })
+  })
 })