Merge branch 'develop'

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({
+export const Sound = forwardRef<HTMLDivElement, SoundProps>(function Sound(
-  functional,
+  { functional, hidden, icon, id, label, selectHidden, src, unselectHidden },
-  hidden,
+  ref,
-  icon,
+) {
-  id,
-  label,
-  selectHidden,
-  src,
-  unselectHidden,
-}: SoundProps) {
   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,17 @@ interface SoundsProps {
 export function Sounds({ functional, id, sounds }: SoundsProps) {
   const [showAll, setShowAll] = useLocalStorage(`${id}-show-more`, false);
 
+  const firstNewSound = useRef<HTMLDivElement>(null);
+
+  const showMoreButton = useRef<HTMLButtonElement>(null);
+  const [exitComplete, setExitComplete] = useState(false);
+
+  useEffect(() => {
+    if (showAll) {
+      firstNewSound.current?.focus();
+    }
+  }, [showAll]);
+
   const [hiddenSelections, setHiddenSelections] = useState<{
     [key: string]: boolean;
   }>({});
@@ -54,6 +65,7 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
             {...sound}
             functional={functional}
             hidden={!showAll && index > 5}
+            ref={index === 6 ? firstNewSound : undefined}
             selectHidden={selectHidden}
             unselectHidden={unselectHidden}
           />
@@ -66,12 +78,17 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
       </div>
 
       {sounds.length > 6 && (
-        <AnimatePresence initial={false} mode="wait">
+        <AnimatePresence
+          initial={false}
+          mode="wait"
+          onExitComplete={() => setExitComplete(true)}
+        >
           <motion.button
             animate="show"
             exit="hidden"
             initial="hidden"
             key={showAll ? `${id}-show-less` : `${id}-show-more`}
+            ref={showMoreButton}
             transition={{ duration: 0.2 }}
             variants={variants}
             className={cn(
@@ -79,6 +96,12 @@ export function Sounds({ functional, id, sounds }: SoundsProps) {
               hasHiddenSelection && !showAll && styles.active,
             )}
             onClick={() => setShowAll(prev => !prev)}
+            onAnimationComplete={() => {
+              if (!showAll && exitComplete) {
+                setExitComplete(false);
+                showMoreButton.current?.focus();
+              }
+            }}
           >
             {showAll ? 'Show Less' : 'Show More'}
           </motion.button>