Fix data-focus for nested containers

bbc · Jan 22, 2024 · cfe28e0 · cfe28e0
1 parent b6605d4
commit cfe28e0
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/lib/lrud.js b/lib/lrud.js
@@ -317,7 +317,9 @@ export const getNextFocus = (elem, keyOrKeyCode, scope) => {
     const isNestedContainer = parentContainer?.contains(candidateContainer);
     const isAnscestorContainer = candidateContainer?.contains(parentContainer);
 
-    if (elem.id) parentContainer?.setAttribute('data-focus', elem.id);
+    const candidateActiveChild = candidateContainer?.getAttribute('data-focus');
+    parentContainer?.setAttribute('data-focus', elem.id);
+    candidateContainer?.setAttribute('data-focus', bestCandidate.id);
 
     if (!isCurrentContainer && (!isNestedContainer || isBestCandidateAContainer)) {
       const blockedExitDirs = getBlockedExitDirs(parentContainer, candidateContainer);
@@ -326,14 +328,15 @@ export const getNextFocus = (elem, keyOrKeyCode, scope) => {
       if (candidateContainer && !isAnscestorContainer) {
         // Ignore active child behaviour when moving into a container that we
         // are already nested in
-        const lastActiveChild = document.getElementById(candidateContainer.getAttribute('data-focus'));
+        const lastActiveChild = document.getElementById(candidateActiveChild);
 
-        return lastActiveChild || getFocusables(candidateContainer)?.[0];
+        const newFocus = lastActiveChild || getFocusables(candidateContainer)?.[0];
+        candidateContainer?.setAttribute('data-focus', newFocus?.id);
+        return newFocus;
       }
     }
   }
 
-  if (bestCandidate?.id) parentContainer?.setAttribute('data-focus', bestCandidate.id);
   return bestCandidate;
 };
 

diff --git a/test/lrud.test.js b/test/lrud.test.js
@@ -678,5 +678,25 @@ describe('LRUD spatial', () => {
       await page.keyboard.press('ArrowUp');
       expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-6');
     });
+
+    it('should only store the last active child ID if the child is not inside another container', async () => {
+      const getParentContainerDataFocus = (id) => page.evaluate((id) => document.getElementById(id).parentElement.getAttribute('data-focus'), id);
+      await page.goto(`${testPath}/4c-v-5f-nested.html`);
+      await page.evaluate(() => document.getElementById('item-1').focus());
+      await page.keyboard.press('ArrowDown');
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-2');
+      expect(await getParentContainerDataFocus('item-1')).toEqual('item-1');
+      expect(await getParentContainerDataFocus('item-2')).toEqual('item-2');
+      await page.keyboard.press('ArrowDown');
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-3');
+      expect(await getParentContainerDataFocus('item-1')).toEqual('item-3');
+      expect(await getParentContainerDataFocus('item-2')).toEqual('item-2');
+      await page.keyboard.press('ArrowUp');
+      expect(await getParentContainerDataFocus('item-1')).toEqual('item-3');
+      expect(await getParentContainerDataFocus('item-2')).toEqual('item-2');
+      await page.keyboard.press('ArrowUp');
+      expect(await getParentContainerDataFocus('item-1')).toEqual('item-1');
+      expect(await getParentContainerDataFocus('item-2')).toEqual('item-2');
+    });
   });
 });