From 18af12e134d74908abd84f91f603403ead2e11f0 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Wed, 15 May 2024 13:32:56 +0200 Subject: [PATCH 1/3] Enhance `nav-grid` functionality to focus on next item after "show more" click --- src/stories/Library/nav-grid/init-nav-grid.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/stories/Library/nav-grid/init-nav-grid.js b/src/stories/Library/nav-grid/init-nav-grid.js index 769551b5d..b4365fefe 100644 --- a/src/stories/Library/nav-grid/init-nav-grid.js +++ b/src/stories/Library/nav-grid/init-nav-grid.js @@ -13,6 +13,15 @@ window.addEventListener("load", () => { button.addEventListener("click", () => { grid.classList.remove("nav-grid--folded"); + + // The 7th item is the first one that is initially hidden. + // For more details, refer to the ".nav-grid--folded" class in design-system src/stories/Library/nav-grid/nav-grid.scss + const seventhNavGridItem = grid.querySelector( + ".nav-grid__item:nth-child(7)" + ); + if (seventhNavGridItem) { + seventhNavGridItem.querySelector("a").focus(); + } }); }); }); From bf3ae095cd35b86c6c6ac44f4fb57582ed4e068d Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Wed, 22 May 2024 09:45:07 +0200 Subject: [PATCH 2/3] Refactor `focus` logic for `nav-grid` This is to avoid magic numbers in the selector and will work if the CSS that determines the number of hidden items should be changed. --- src/stories/Library/nav-grid/init-nav-grid.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/stories/Library/nav-grid/init-nav-grid.js b/src/stories/Library/nav-grid/init-nav-grid.js index b4365fefe..c61e9925c 100644 --- a/src/stories/Library/nav-grid/init-nav-grid.js +++ b/src/stories/Library/nav-grid/init-nav-grid.js @@ -11,16 +11,15 @@ window.addEventListener("load", () => { return; } + const firstHiddenLink = Array.from(grid.querySelectorAll(".nav-grid__item")) + .find((item) => window.getComputedStyle(item).display === "none") + ?.querySelector("a"); + button.addEventListener("click", () => { grid.classList.remove("nav-grid--folded"); - // The 7th item is the first one that is initially hidden. - // For more details, refer to the ".nav-grid--folded" class in design-system src/stories/Library/nav-grid/nav-grid.scss - const seventhNavGridItem = grid.querySelector( - ".nav-grid__item:nth-child(7)" - ); - if (seventhNavGridItem) { - seventhNavGridItem.querySelector("a").focus(); + if (firstHiddenLink) { + firstHiddenLink.focus(); } }); }); From 3608c621149f3a5f3a5e84c840fecb35178f7f2b Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Wed, 22 May 2024 11:33:33 +0200 Subject: [PATCH 3/3] Trigger chromatic