fix: focus on the first new sound

src/components/sound/sound.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, forwardRef } from 'react';
 import { ImSpinner9 } from 'react-icons/im/index';
 
 import { Range } from './range';
@@ -10,27 +10,21 @@ import { cn } from '@/helpers/styles';
 
 import styles from './sound.module.css';
 
-import type { Sound } from '@/data/types';
+import type { Sound as SoundType } from '@/data/types';
 
 import { useKeyboardButton } from '@/hooks/use-keyboard-button';
 
-interface SoundProps extends Sound {
+interface SoundProps extends SoundType {
   functional: boolean;
   hidden: boolean;
   selectHidden: (key: string) => void;
   unselectHidden: (key: string) => void;
 }
 
-export function Sound({
-  functional,
-  hidden,
-  icon,
-  id,
-  label,
-  selectHidden,
-  src,
-  unselectHidden,
-}: SoundProps) {
+export const Sound = forwardRef<HTMLDivElement, SoundProps>(function Sound(
+  { functional, hidden, icon, id, label, selectHidden, src, unselectHidden },
+  ref,
+) {
   const isPlaying = useSoundStore(state => state.isPlaying);
   const play = useSoundStore(state => state.play);
   const select = useSoundStore(state => state.select);
@@ -82,6 +76,7 @@ export function Sound({
   return (
     <div
       aria-label={`${label} sound`}
+      ref={ref}
       role="button"
       tabIndex={0}
       className={cn(
@@ -108,4 +103,4 @@ export function Sound({
       <Range id={id} label={label} />
     </div>
   );
-}
+});

src/components/sounds/sounds.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo, useCallback } from 'react';
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import { Sound } from '@/components/sound';
@@ -19,6 +19,14 @@ interface SoundsProps {
 export function Sounds({ functional, id, sounds }: SoundsProps) {
   const [showAll, setShowAll] = useLocalStorage(`${id}-show-more`, false);
 
+  const firstNewSound = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (showAll) {
+      firstNewSound.current?.focus();
+    }
+  }, [showAll]);
+
   const [hiddenSelections, setHiddenSelections] = useState<{
     [key: string]: boolean;
   }>({});
@@ -54,6 +62,7 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
             {...sound}
             functional={functional}
             hidden={!showAll && index > 5}
+            ref={index === 6 ? firstNewSound : undefined}
             selectHidden={selectHidden}
             unselectHidden={unselectHidden}
           />