chore: make side navigation bar trap focus

INSTUI-4266

Author: ToMESSKa

packages/__docs__/src/App/index.tsx

@@ -76,6 +76,7 @@ import type {
 } from '../../buildScripts/DataTypes.mjs'
 import { logError } from '@instructure/console'
 import type { Spacing } from '@instructure/emotion'
+import { FocusRegion } from '@instructure/ui-a11y-utils'
 
 type AppContextType = {
   themeKey: keyof MainDocsData['themes']
@@ -94,6 +95,9 @@ class App extends Component<AppProps, AppState> {
   static propTypes = propTypes
   static allowedProps = allowedProps
 
+  private navRef = createRef<HTMLElement>()
+  private focusRegion: FocusRegion | null = null
+
   static defaultProps = {
     trayWidth: 300
   }
@@ -222,10 +226,18 @@ class App extends Component<AppProps, AppState> {
         })
       })
       .catch(errorHandler)
+    document.addEventListener('focusin', this.handleFocusChange)
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(_prevProps: AppProps, prevState: AppState) {
     this.props.makeStyles?.()
+
+    if (
+      prevState.showMenu !== this.state.showMenu ||
+      prevState.layout !== this.state.layout
+    ) {
+      this.handleNavigationFocusRegion()
+    }
   }
 
   componentWillUnmount() {
@@ -236,6 +248,8 @@ class App extends Component<AppProps, AppState> {
     if (this._mediaQueryListener) {
       this._mediaQueryListener.remove()
     }
+    document.removeEventListener('focusin', this.handleFocusChange)
+    this.focusRegion?.deactivate()
   }
 
   trackPage(page: string) {
@@ -359,6 +373,32 @@ class App extends Component<AppProps, AppState> {
     }
   }
 
+  handleNavigationFocusRegion() {
+    if (this.focusRegion) {
+      this.focusRegion.deactivate()
+    }
+
+    if (this.navRef.current) {
+      this.focusRegion = new FocusRegion(this.navRef.current, {
+        shouldContainFocus: true,
+        shouldCloseOnEscape: true,
+        shouldReturnFocus: false,
+        onDismiss: this.handleMenuClose
+      })
+      this.focusRegion.activate()
+    }
+  }
+
+  handleFocusChange = (e: FocusEvent) => {
+    const isFocusInsideNav = this.navRef.current?.contains(e.target as Node)
+    if (isFocusInsideNav) {
+      this.handleNavigationFocusRegion()
+    } else {
+      this.focusRegion?.deactivate()
+      this.focusRegion = null
+    }
+  }
+
   renderThemeSelect() {
     const themeKeys = Object.keys(this.state.docsData!.themes)
     const smallScreen = this.state.layout === 'small'
@@ -712,7 +752,9 @@ class App extends Component<AppProps, AppState> {
     )
 
     return layout !== 'small' ? (
-      <nav css={this.props.styles?.inlineNavigation}>{navContent}</nav>
+      <nav css={this.props.styles?.inlineNavigation} ref={this.navRef}>
+        {navContent}
+      </nav>
     ) : (
       <Tray label="Navigation" open={showMenu} onDismiss={this.handleMenuClose}>
         {navContent}