Tweak roving tab index focus behaviour (#7254)

t3chguy · web-flow · commit 68604e350536 · 2021-12-02T10:24:55.000Z
diff --git a/src/accessibility/RovingTabIndex.tsx b/src/accessibility/RovingTabIndex.tsx
@@ -130,7 +130,10 @@ export const reducer = (state: IState, action: IAction) => {
                     state.activeRef = findSiblingElement(state.refs, oldIndex)
                         || findSiblingElement(state.refs, oldIndex, true);
                 }
-                state.activeRef?.current?.focus();
+                if (document.activeElement === document.body) {
+                    // if the focus got reverted to the body then the user was likely focused on the unmounted element
+                    state.activeRef?.current?.focus();
+                }
             }
 
             // update the refs list

Original file line number	Diff line number	Diff line change
`@@ -130,7 +130,10 @@ export const reducer = (state: IState, action: IAction) => {`
`130`	`130`	`state.activeRef = findSiblingElement(state.refs, oldIndex)`
`131`	`131`	`\|\| findSiblingElement(state.refs, oldIndex, true);`
`132`	`132`	`}`
`133`		`- state.activeRef?.current?.focus();`
	`133`	`+ if (document.activeElement === document.body) {`
	`134`	`+ // if the focus got reverted to the body then the user was likely focused on the unmounted element`
	`135`	`+ state.activeRef?.current?.focus();`
	`136`	`+ }`
`134`	`137`	`}`
`135`	`138`
`136`	`139`	`// update the refs list`