A11y: Add focus state to pagination current page (#52237)

Author: heiskr

src/search/components/SearchResults.module.scss

@@ -6,3 +6,11 @@
 
   word-wrap: break-word;
 }
+
+.paginationFocus
+  a[aria-current]:not([rel]):not(:disabled):not(:focus-visible):focus,
+.paginationFocus a[aria-current]:not([rel]):not(:disabled):focus-visible {
+  outline: 2px solid var(--fgColor-accent, var(--color-accent-fg));
+  outline-offset: -2px;
+  box-shadow: 0 0 0 4px inset;
+}

src/search/components/SearchResults.tsx

@@ -143,29 +143,31 @@ function ResultsPagination({ page, totalPages }: { page: number; totalPages: num
   }
 
   return (
-    <Box borderRadius={2} p={2}>
-      <Pagination
-        pageCount={Math.min(totalPages, 10)}
-        currentPage={page}
-        hrefBuilder={hrefBuilder}
-        onPageChange={(event, page) => {
-          event.preventDefault()
+    <div className={styles.paginationFocus}>
+      <Box borderRadius={2} p={2}>
+        <Pagination
+          pageCount={Math.min(totalPages, 10)}
+          currentPage={page}
+          hrefBuilder={hrefBuilder}
+          onPageChange={(event, page) => {
+            event.preventDefault()
 
-          const [asPathRoot, asPathQuery = ''] = router.asPath.split('#')[0].split('?')
-          const params = new URLSearchParams(asPathQuery)
-          if (page !== 1) {
-            params.set('page', `${page}`)
-          } else {
-            params.delete('page')
-          }
-          let asPath = `/${router.locale}${asPathRoot}`
-          if (params.toString()) {
-            asPath += `?${params}`
-          }
-          setAsPath(asPath)
-          router.push(asPath)
-        }}
-      />
-    </Box>
+            const [asPathRoot, asPathQuery = ''] = router.asPath.split('#')[0].split('?')
+            const params = new URLSearchParams(asPathQuery)
+            if (page !== 1) {
+              params.set('page', `${page}`)
+            } else {
+              params.delete('page')
+            }
+            let asPath = `/${router.locale}${asPathRoot}`
+            if (params.toString()) {
+              asPath += `?${params}`
+            }
+            setAsPath(asPath)
+            router.push(asPath)
+          }}
+        />
+      </Box>
+    </div>
   )
 }