enhance: programmaticaly focus active tab only for keyboard users

owid · Nov 6, 2023 · bd75d68 · bd75d68
1 parent 1ddf052
commit bd75d68
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/packages/@ourworldindata/components/src/Tabs/Tabs.tsx b/packages/@ourworldindata/components/src/Tabs/Tabs.tsx
@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef } from "react"
+import React, { useRef } from "react"
 import cx from "classnames"
 
 export const Tabs = ({
@@ -36,16 +36,14 @@ export const Tabs = ({
     function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {
         const nextIndex = getNextIndex(event.key)
         setActiveIndex(nextIndex)
-    }
 
-    // programmatically focus the active tab
-    useLayoutEffect(() => {
+        // programmatically focus the next active tab
         if (!container.current) return
         const activeTabElement = container.current.children[
-            activeIndex
+            nextIndex
         ] as HTMLButtonElement
         if (activeTabElement) activeTabElement.focus()
-    }, [activeIndex])
+    }
 
     return (
         <div

diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx b/packages/@ourworldindata/grapher/src/modal/SourcesModal.tsx
@@ -2,7 +2,6 @@ import {
     Bounds,
     DEFAULT_BOUNDS,
     uniq,
-    sortBy,
     sum,
     zip,
     getAttributionFragmentsFromVariable,
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,6 @@ import { @@
         Bounds,
         DEFAULT_BOUNDS,
         uniq,
-        sortBy,
         sum,
         zip,
         getAttributionFragmentsFromVariable,
@@ Expand Down @@