fix(FocusZone): Respect defaultTabbable element when FocusZone container gets focus (#637)

* fix(FocusZone): Respect defaultTabbable element when FZ container receives focus

* update FZ changelog

* Update changelog

Author: sophieH29

CHANGELOG.md

@@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Ensure `Popup` properly flips values of `offset` prop in RTL @kuzhelov ([#612](https://github.com/stardust-ui/react/pull/612))
 - Fix `List` - items should be selectable @sophieH29 ([#566](https://github.com/stardust-ui/react/pull/566))
+- Respect `defaultTabbable` element when `FocusZone` container gets focus ([#637](https://github.com/stardust-ui/react/pull/637))
 
 ### Features
 - Add `color` prop to `Text` component @Bugaa92 ([#597](https://github.com/stardust-ui/react/pull/597))

src/lib/accessibility/Behaviors/Menu/menuBehavior.ts

@@ -21,7 +21,7 @@ const menuBehavior: Accessibility = (props: any) => ({
     props: {
       isCircularNavigation: true,
       preventDefaultWhenHandled: true,
-      shouldFocusFirstElementWhenReceivedFocus: true,
+      shouldFocusInnerElementWhenReceivedFocus: true,
       direction: props.vertical ? FocusZoneDirection.vertical : FocusZoneDirection.horizontal,
     },
   },

src/lib/accessibility/Behaviors/Tab/tabListBehavior.ts

@@ -16,7 +16,7 @@ const tabListBehavior: Accessibility = (props: any) => ({
     props: {
       isCircularNavigation: false,
       preventDefaultWhenHandled: true,
-      shouldFocusFirstElementWhenReceivedFocus: true,
+      shouldFocusInnerElementWhenReceivedFocus: true,
     },
   },
 })

src/lib/accessibility/Behaviors/Toolbar/toolbarBehavior.ts

@@ -16,7 +16,7 @@ const toolbarBehavior: Accessibility = (props: any) => ({
     props: {
       isCircularNavigation: false,
       preventDefaultWhenHandled: true,
-      shouldFocusFirstElementWhenReceivedFocus: true,
+      shouldFocusInnerElementWhenReceivedFocus: true,
     },
   },
 })

src/lib/accessibility/FocusZone/CHANGELOG.md

@@ -7,6 +7,7 @@ This is a list of changes made to this Stardust copy of FocusZone in comparison
 - Remove unused prop `componentRef` ([#397](https://github.com/stardust-ui/react/pull/397))
 - Fix `defaultTabbableElement` prop to be as a function ([#450](https://github.com/stardust-ui/react/pull/450))
 - Remove role="presentation" @sophieH29 ([#530](https://github.com/stardust-ui/react/pull/530))
+- Respect `defaultTabbable` element when FocusZone container receives focus @sophieH29 ([#637](https://github.com/stardust-ui/react/pull/637))
 
 ### Features
 - Add embed mode for FocusZone and new Chat behavior ([#233](https://github.com/stardust-ui/react/pull/233))

src/lib/accessibility/FocusZone/FocusZone.tsx

@@ -47,7 +47,7 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
     direction: PropTypes.number,
     defaultTabbableElement: PropTypes.func,
     shouldFocusOnMount: PropTypes.bool,
-    shouldFocusFirstElementWhenReceivedFocus: PropTypes.bool,
+    shouldFocusInnerElementWhenReceivedFocus: PropTypes.bool,
     shouldHandleKeyDownCapture: PropTypes.bool,
     disabled: PropTypes.bool,
     as: customPropTypes.as,
@@ -262,7 +262,12 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
   }
 
   private _onFocus = (ev: React.FocusEvent<HTMLElement>): void => {
-    const { onActiveElementChanged, stopFocusPropagation } = this.props
+    const {
+      onActiveElementChanged,
+      stopFocusPropagation,
+      shouldFocusInnerElementWhenReceivedFocus,
+      defaultTabbableElement,
+    } = this.props
 
     if (this.isImmediateDescendantOfZone(ev.target as HTMLElement)) {
       this._activeElement = ev.target as HTMLElement
@@ -283,9 +288,18 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
       onActiveElementChanged(this._activeElement as HTMLElement, ev)
     }
 
-    // If a first focusable element should be force focused when FocusZone container receives focus
-    if (this.props.shouldFocusFirstElementWhenReceivedFocus && ev.target === this._root.current) {
-      this.focus(true)
+    // If an inner focusable element should be focused when FocusZone container receives focus
+    if (shouldFocusInnerElementWhenReceivedFocus && ev.target === this._root.current) {
+      const maybeElementToFocus =
+        defaultTabbableElement && defaultTabbableElement(this._root.current)
+
+      // try to focus defaultTabbable element
+      if (maybeElementToFocus && isElementTabbable(maybeElementToFocus)) {
+        maybeElementToFocus.focus()
+      } else {
+        // force focus on first focusable element
+        this.focus(true)
+      }
     }
 
     if (stopFocusPropagation) {

src/lib/accessibility/FocusZone/FocusZone.types.ts

@@ -54,9 +54,10 @@ export interface FocusZoneProps extends React.HTMLAttributes<HTMLElement | Focus
   shouldFocusOnMount?: boolean
 
   /**
-   * If a first focusable element should be force focused when FocusZone container receives focus.
+   * If true, focus will go either to defaultTabbableElement if set or first focusable element inside FocusZone,
+   * when FocusZone container receives focus.
    */
-  shouldFocusFirstElementWhenReceivedFocus?: boolean
+  shouldFocusInnerElementWhenReceivedFocus?: boolean
 
   /**
    * If global onKeyDownCapture should be handled and updating tab indexes.

test/specs/lib/FocusZone-test.tsx

@@ -1107,7 +1107,7 @@ describe('FocusZone', () => {
     expect(buttonB.tabIndex).toBe(0)
   })
 
-  it('should force focus to first focusable element when FocusZone container receives focus and shouldFocusFirstElementWhenReceivedFocus is set to "true"', () => {
+  it('should force focus to first focusable element when FocusZone container receives focus and shouldFocusInnerElementWhenReceivedFocus is set to "true"', () => {
     const isInnerZoneKeystroke = (e: React.KeyboardEvent<HTMLElement>): boolean =>
       keyboardKey.getCode(e) === keyboardKey.Enter
     const isFocusableProperty = { [IS_FOCUSABLE_ATTRIBUTE]: true }
@@ -1122,7 +1122,7 @@ describe('FocusZone', () => {
           <FocusZone
             direction={FocusZoneDirection.horizontal}
             id="b"
-            shouldFocusFirstElementWhenReceivedFocus={true}
+            shouldFocusInnerElementWhenReceivedFocus={true}
             {...isFocusableProperty}
           >
             <button id="bsub">bsub</button>