From bea240eee3131221e78342fc0c17f3b1c6f9bf30 Mon Sep 17 00:00:00 2001 From: Adrien Young <60076088+adriencyberspace@users.noreply.github.com> Date: Wed, 14 Aug 2024 13:06:54 -0700 Subject: [PATCH] Focus State Update (#140) * Update NavigationFocusReset only on top-level page changes not search query changes * edit so focus is reset on all page changes except filter and query changes * use location.search instead to only check if query string changes --- .../ui/Navigation/NavigationFocusReset.tsx | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/app/components/ui/Navigation/NavigationFocusReset.tsx b/app/components/ui/Navigation/NavigationFocusReset.tsx index 49558c258..446a29cbc 100644 --- a/app/components/ui/Navigation/NavigationFocusReset.tsx +++ b/app/components/ui/Navigation/NavigationFocusReset.tsx @@ -1,17 +1,28 @@ import React, { useEffect, useRef } from "react"; import { useLocation } from "react-router-dom"; -// Resets focus state for a11y, by focusing and unfocusing an off-screen element at the top of the page when page location changes - -export const NavigationFocusReset = () => { +/* + Resets focus state for a11y by focusing and unfocusing an off-screen element + at the top of the page when the page location changes. + The focus reset occurs on all page location changes except when only the query string changes. +*/ +export const NavigationFocusReset: React.FC = () => { const location = useLocation(); const hiddenInputRef = useRef(null); + const previousPathRef = useRef(""); useEffect(() => { - if (hiddenInputRef.current) { + const currentPath = location.pathname + location.search; + + const pathChanged = currentPath !== previousPathRef.current; + + // Focus reset should occur if the path changed and it's not just a query string change + if (pathChanged && !location.search && hiddenInputRef.current) { hiddenInputRef.current.focus(); hiddenInputRef.current.blur(); } + + previousPathRef.current = currentPath; }, [location]); return (