From a721df410c66ddc6bca8b1658d88154e6a2ecaff Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Tue, 15 Aug 2023 10:29:35 -0500
Subject: [PATCH 1/2] feat: reset focus to top on each account step

---
 lib/components/user/sequential-pane-display.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
index 1939d67af..adf171e21 100644
--- a/lib/components/user/sequential-pane-display.tsx
+++ b/lib/components/user/sequential-pane-display.tsx
@@ -50,6 +50,12 @@ class SequentialPaneDisplay<T> extends Component<Props<T>> {
     routeTo(`${parentPath}/${nextId}`)
   }
 
+  h1Ref = React.createRef<HTMLHeadingElement>()
+
+  _handleFocus = () => {
+    this.h1Ref?.current?.focus()
+  }
+
   _handleToNextPane = async (e: MouseEvent<Button>) => {
     const { activePane, activePaneIndex, panes } = this.props
     const { invalid, invalidMessage } = activePane
@@ -70,6 +76,7 @@ class SequentialPaneDisplay<T> extends Component<Props<T>> {
         this._routeTo(nextId)
       }
     }
+    this._handleFocus()
   }
 
   _handleToPrevPane = () => {
@@ -78,6 +85,11 @@ class SequentialPaneDisplay<T> extends Component<Props<T>> {
       const prevId = panes[activePaneIndex - 1].id
       prevId && this._routeTo(prevId)
     }
+    this._handleFocus()
+  }
+
+  componentDidMount(): void {
+    this._handleFocus()
   }
 
   render() {
@@ -86,7 +98,7 @@ class SequentialPaneDisplay<T> extends Component<Props<T>> {
 
     return (
       <>
-        <h1>
+        <h1 aria-live="assertive" ref={this.h1Ref} tabIndex={-1}>
           <StepNumber>
             <FormattedMessage
               id="components.SequentialPaneDisplay.stepNumber"

From 381f9edbc4184644da2b5b91fa4725d12d8d7fcf Mon Sep 17 00:00:00 2001
From: miles-grant-ibigroup <miles.grant@ibigroup.com>
Date: Wed, 30 Aug 2023 12:36:02 -0400
Subject: [PATCH 2/2] refactor: address pr feedback

---
 lib/components/user/sequential-pane-display.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/components/user/sequential-pane-display.tsx b/lib/components/user/sequential-pane-display.tsx
index adf171e21..e41a953b7 100644
--- a/lib/components/user/sequential-pane-display.tsx
+++ b/lib/components/user/sequential-pane-display.tsx
@@ -52,7 +52,7 @@ class SequentialPaneDisplay<T> extends Component<Props<T>> {
 
   h1Ref = React.createRef<HTMLHeadingElement>()
 
-  _handleFocus = () => {
+  _focusHeader = () => {
     this.h1Ref?.current?.focus()
   }
 
@@ -76,7 +76,7 @@ class SequentialPaneDisplay<T> extends Component<Props<T>> {
         this._routeTo(nextId)
       }
     }
-    this._handleFocus()
+    this._focusHeader()
   }
 
   _handleToPrevPane = () => {
@@ -85,11 +85,11 @@ class SequentialPaneDisplay<T> extends Component<Props<T>> {
       const prevId = panes[activePaneIndex - 1].id
       prevId && this._routeTo(prevId)
     }
-    this._handleFocus()
+    this._focusHeader()
   }
 
   componentDidMount(): void {
-    this._handleFocus()
+    this._focusHeader()
   }
 
   render() {