fix(FocusZone): fix last breaking changes and make improvements when using Chat (#614)

* fix(FocusZone): fix last breaking changes and make improvements when using Chat

* set explicit query selector on boolean attributes

* fix propTypes

* set explicit query selector on boolean attributes

* Small fix of console error

* update changelog

* update changelog

Author: sophieH29

CHANGELOG.md

@@ -23,7 +23,8 @@ 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))
+- Respect `defaultTabbable` element when `FocusZone` container gets focus @sophieH29 ([#637](https://github.com/stardust-ui/react/pull/637))
+- Fix `FocusZone` - fix last breaking changes and make improvements for `Chat` usage @sophieH29 ([#614](https://github.com/stardust-ui/react/pull/614))
 
 ### Features
 - Add `color` prop to `Text` component @Bugaa92 ([#597](https://github.com/stardust-ui/react/pull/597))

docs/src/prototypes/chatPane/services/messageFactoryMock.tsx

@@ -119,7 +119,7 @@ function createMessageContentWithAttachments(content: string, messageId: string)
             icon="file word outline"
             aria-label={`File attachment ${fileName}. Press tab for more options Press Enter to open the file`}
             header={fileName}
-            action={render => render(actionPopup)}
+            action={actionPopup}
             data-is-focusable={true}
             styles={{
               '&:focus': {

src/lib/accessibility/Behaviors/Chat/chatBehavior.ts

@@ -21,7 +21,7 @@ const ChatBehavior: Accessibility = (props: any) => ({
     props: {
       shouldEnterInnerZone: event => keyboardKey.getCode(event) === keyboardKey.Enter,
       direction: FocusZoneDirection.vertical,
-      shouldHandleKeyDownCapture: false,
+      shouldResetActiveElementWhenTabFromZone: true,
       defaultTabbableElement: getLastTabbableElement, // select last chat message by default
       [CHAT_FOCUSZONE_ATTRIBUTE]: '', // allows querying the default active element
     },
@@ -36,8 +36,11 @@ const ChatBehavior: Accessibility = (props: any) => ({
 })
 
 const getLastTabbableElement = (root: HTMLElement): HTMLElement => {
+  const lastVisibleMessage = root.querySelector('[data-last-visible="true"]') as HTMLElement
+  if (lastVisibleMessage) return lastVisibleMessage
+
   const chatItemsElements = root.querySelectorAll(
-    `[${CHAT_FOCUSZONE_ATTRIBUTE}] .ui-chat__item > [${IS_FOCUSABLE_ATTRIBUTE}]`,
+    `[${CHAT_FOCUSZONE_ATTRIBUTE}] .ui-chat__message[${IS_FOCUSABLE_ATTRIBUTE}="true"]`,
   )
   return chatItemsElements.length > 0
     ? (chatItemsElements[chatItemsElements.length - 1] as HTMLElement)

src/lib/accessibility/FocusZone/CHANGELOG.md

@@ -8,6 +8,7 @@ This is a list of changes made to this Stardust copy of FocusZone in comparison
 - 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))
+- Fix `FocusZone` - add `shouldResetActiveElementWhenTabFromZone` prop @sophieH29 ([#614](https://github.com/stardust-ui/react/pull/614))
 
 ### 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,8 +47,8 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
     direction: PropTypes.number,
     defaultTabbableElement: PropTypes.func,
     shouldFocusOnMount: PropTypes.bool,
+    shouldResetActiveElementWhenTabFromZone: PropTypes.bool,
     shouldFocusInnerElementWhenReceivedFocus: PropTypes.bool,
-    shouldHandleKeyDownCapture: PropTypes.bool,
     disabled: PropTypes.bool,
     as: customPropTypes.as,
     isCircularNavigation: PropTypes.bool,
@@ -67,7 +67,6 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
   static defaultProps: FocusZoneProps = {
     isCircularNavigation: false,
     direction: FocusZoneDirection.bidirectional,
-    shouldHandleKeyDownCapture: true,
     as: 'div',
   }
 
@@ -105,8 +104,6 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
   public componentDidMount(): void {
     _allInstances[this._id] = this
 
-    const { shouldHandleKeyDownCapture, defaultTabbableElement, shouldFocusOnMount } = this.props
-
     this.setRef(this) // called here to support functional components, we only need HTMLElement ref anyway
     if (this._root.current) {
       this.windowElement = getWindow(this._root.current)
@@ -121,27 +118,22 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
         parentElement = getParent(parentElement)
       }
 
-      if (!this._isInnerZone && shouldHandleKeyDownCapture) {
+      if (!this._isInnerZone) {
         this.windowElement.addEventListener('keydown', this.onKeyDownCapture, true)
       }
 
       // Assign initial tab indexes so that we can set initial focus as appropriate.
       this.updateTabIndexes()
 
-      if (defaultTabbableElement) {
-        const initialActiveElement = defaultTabbableElement(this._root.current)
-        initialActiveElement && this.setActiveElement(initialActiveElement)
-      }
-
-      if (shouldFocusOnMount) {
+      if (this.props.shouldFocusOnMount) {
         this.focus()
       }
     }
   }
 
   public componentWillUnmount() {
     delete _allInstances[this._id]
-    if (this.windowElement && this.props.shouldHandleKeyDownCapture) {
+    if (this.windowElement) {
       this.windowElement.removeEventListener('keydown', this.onKeyDownCapture, true)
     }
   }
@@ -490,6 +482,8 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
             if (focusChanged) {
               break
             }
+          } else if (this.props.shouldResetActiveElementWhenTabFromZone) {
+            this._activeElement = null
           }
           return undefined
 
@@ -885,6 +879,11 @@ export class FocusZone extends React.Component<FocusZoneProps> implements IFocus
 
   private updateTabIndexes(onElement?: HTMLElement) {
     let element = onElement
+
+    if (!this._activeElement && this.props.defaultTabbableElement) {
+      this._activeElement = this.props.defaultTabbableElement(this._root.current)
+    }
+
     if (!element && this._root.current) {
       this._defaultFocusElement = null
       element = this._root.current

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

@@ -60,9 +60,9 @@ export interface FocusZoneProps extends React.HTMLAttributes<HTMLElement | Focus
   shouldFocusInnerElementWhenReceivedFocus?: boolean
 
   /**
-   * If global onKeyDownCapture should be handled and updating tab indexes.
+   * If true and handleTab is false, resets current activeElement to null value.
    */
-  shouldHandleKeyDownCapture?: boolean
+  shouldResetActiveElementWhenTabFromZone?: boolean
 
   /**
    * If set, the FocusZone will not be tabbable and keyboard navigation will be disabled.