From bb742bedf23a983f707c340b2df213ee76541c6c Mon Sep 17 00:00:00 2001
From: omsaggau <omsaggau@gmail.com>
Date: Fri, 23 Feb 2024 12:39:49 +0100
Subject: [PATCH] Add ref to PictureCard. Focus on fifth card when using
 keyboard to press show more

---
 package-lock.json                             | 14 ++++++------
 package.json                                  |  2 +-
 .../parts/relatedFactPage/relatedFactPage.jsx | 22 +++++++++----------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bf5fc499c..4cfeb75fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,7 +62,7 @@
         "@item-enonic-types/lib-thymeleaf": "~2.1.0",
         "@item-enonic-types/lib-time": "~1.0.3",
         "@reduxjs/toolkit": "~1.9.7",
-        "@statisticsnorway/ssb-component-library": "~2.0.97",
+        "@statisticsnorway/ssb-component-library": "~2.0.98",
         "@types/ramda": "~0.29.10",
         "@types/react": "~18.2.56",
         "@types/uuid": "~9.0.8",
@@ -5006,9 +5006,9 @@
       "dev": true
     },
     "node_modules/@statisticsnorway/ssb-component-library": {
-      "version": "2.0.97",
-      "resolved": "https://registry.npmjs.org/@statisticsnorway/ssb-component-library/-/ssb-component-library-2.0.97.tgz",
-      "integrity": "sha512-WR8ghyn14p60YAVsMg+IRJ4b1vj8TgmqYTVydJfpv+/Y/NqUk7TLWppLAiPOcjalbrPangFC99Cye5FqYfG79g==",
+      "version": "2.0.98",
+      "resolved": "https://registry.npmjs.org/@statisticsnorway/ssb-component-library/-/ssb-component-library-2.0.98.tgz",
+      "integrity": "sha512-D3412g2RLyHp5g2Itms8+WQBoFrop7a2TCV6jSIRugPjBUowzB4Sp0qUWUff4OVo2LQejU+wG7yZJ8bM9ItJRA==",
       "dev": true,
       "dependencies": {
         "prismjs": "^1.29.0",
@@ -23965,9 +23965,9 @@
       "dev": true
     },
     "@statisticsnorway/ssb-component-library": {
-      "version": "2.0.97",
-      "resolved": "https://registry.npmjs.org/@statisticsnorway/ssb-component-library/-/ssb-component-library-2.0.97.tgz",
-      "integrity": "sha512-WR8ghyn14p60YAVsMg+IRJ4b1vj8TgmqYTVydJfpv+/Y/NqUk7TLWppLAiPOcjalbrPangFC99Cye5FqYfG79g==",
+      "version": "2.0.98",
+      "resolved": "https://registry.npmjs.org/@statisticsnorway/ssb-component-library/-/ssb-component-library-2.0.98.tgz",
+      "integrity": "sha512-D3412g2RLyHp5g2Itms8+WQBoFrop7a2TCV6jSIRugPjBUowzB4Sp0qUWUff4OVo2LQejU+wG7yZJ8bM9ItJRA==",
       "dev": true,
       "requires": {
         "prismjs": "^1.29.0",
diff --git a/package.json b/package.json
index e0f6c9f43..f6578362d 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "@item-enonic-types/lib-thymeleaf": "~2.1.0",
     "@item-enonic-types/lib-time": "~1.0.3",
     "@reduxjs/toolkit": "~1.9.7",
-    "@statisticsnorway/ssb-component-library": "~2.0.97",
+    "@statisticsnorway/ssb-component-library": "~2.0.98",
     "@types/ramda": "~0.29.10",
     "@types/react": "~18.2.56",
     "@types/uuid": "~9.0.8",
diff --git a/src/main/resources/site/parts/relatedFactPage/relatedFactPage.jsx b/src/main/resources/site/parts/relatedFactPage/relatedFactPage.jsx
index 100a537d5..9710a9b94 100644
--- a/src/main/resources/site/parts/relatedFactPage/relatedFactPage.jsx
+++ b/src/main/resources/site/parts/relatedFactPage/relatedFactPage.jsx
@@ -20,12 +20,12 @@ function RelatedBoxes(props) {
   )
   const [total, setTotal] = useState(firstRelatedContents ? firstRelatedContents.total : 0)
   const [loading, setLoading] = useState(false)
-  const [focusElement, setFocusElement] = useState(false)
-  const currentElement = useRef(null)
+  const [wasClicked, setWasClicked] = useState(false)
+  const cards = useRef([])
 
   useEffect(() => {
-    if (focusElement && currentElement.current) {
-      currentElement.current.firstChild.focus()
+    if (cards.current.length > 4 && cards.current[4] && !wasClicked) {
+      cards.current[4].focus()
     }
   }, [relatedFactPages])
 
@@ -47,7 +47,6 @@ function RelatedBoxes(props) {
         }
       })
       .finally(() => {
-        setFocusElement(false)
         setLoading(false)
       })
   }
@@ -56,11 +55,12 @@ function RelatedBoxes(props) {
     setLoading(true)
     setRelatedFactPages(firstRelatedContents.relatedFactPages)
     setTotal(firstRelatedContents.total)
-    setFocusElement(false)
     setLoading(false)
   }
 
-  function handleButtonOnClick() {
+  function handleButtonOnClick(wasClicked) {
+    setWasClicked(wasClicked)
+
     if (total > relatedFactPages.length) {
       fetchAllRelatedFactPages()
     } else {
@@ -90,8 +90,9 @@ function RelatedBoxes(props) {
               aria-label={`${showingPhrase.replace('{0}', relatedFactPages.length)} ${total} ${factpagePluralName}`}
             >
               {relatedFactPages.map((relatedFactPageContent, index) => (
-                <li key={index} ref={index === 4 ? currentElement : null}>
+                <li key={index}>
                   <PictureCard
+                    ref={(element) => (cards.current[index] = element)}
                     className='mb-3'
                     imageSrc={relatedFactPageContent.image}
                     altText={relatedFactPageContent.imageAlt ?? ''}
@@ -107,12 +108,11 @@ function RelatedBoxes(props) {
               <div className='col-auto'>
                 <Button
                   ariaLabel={total > relatedFactPages.length && `${showAll} - ${total} ${factpagePluralName}`}
-                  onClick={handleButtonOnClick}
+                  onClick={() => handleButtonOnClick(true)}
                   onKeyDown={(e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
                       e.preventDefault()
-                      setFocusElement((prev) => !prev)
-                      handleButtonOnClick()
+                      handleButtonOnClick(false)
                     }
                   }}
                 >