feat(RovingTabIndex): improvements

components/core/Filter/Filters.js

@@ -108,6 +108,8 @@ const FilterSection = React.forwardRef(({ title, children, ...props }, ref) => {
         </Tooltip.Root>
       )}
       {isExpanded ? (
+        <RovingTabIndex.Provider axis="vertical">
+          <RovingTabIndex.List>
             <motion.ul
               layoutId={title + "section"}
               initial={{ opacity: 0 }}
@@ -116,6 +118,8 @@ const FilterSection = React.forwardRef(({ title, children, ...props }, ref) => {
             >
               {children}
             </motion.ul>
+          </RovingTabIndex.List>
+        </RovingTabIndex.Provider>
       ) : null}
     </div>
   );
@@ -151,8 +155,6 @@ function Tags({ viewer, data, onAction, ...props }) {
   const [, { hidePopup }] = useFilterContext();
 
   return (
-    <RovingTabIndex.Provider axis="vertical">
-      <RovingTabIndex.List>
     <FilterSection title="Tags" {...props}>
       {viewer.slates.map((slate, index) => (
         <li key={slate.id}>
@@ -170,8 +172,6 @@ function Tags({ viewer, data, onAction, ...props }) {
         </li>
       ))}
     </FilterSection>
-      </RovingTabIndex.List>
-    </RovingTabIndex.Provider>
   );
 }
 

components/core/RovingTabIndex.js

@@ -1,7 +1,8 @@
 import * as React from "react";
 
+import { jsx } from "@emotion/react";
 import { mergeRefs } from "~/common/utilities";
-import { useEventListener, useMounted } from "~/common/hooks";
+import { useEventListener } from "~/common/hooks";
 
 /* -------------------------------------------------------------------------------------------------
  * RovingTabIndex Provider
@@ -16,28 +17,37 @@ export function Provider({ axis, children }) {
   const [focusedIndex, setFocusedIndex] = React.useState(initialIndex);
 
   const registerItem = ({ index, ref }) => (focusedElementsRefs.current[index] = ref);
-  const cleanupItem = (index) => delete focusedElementsRefs.current[index];
+  const cleanupItem = (index) => {
+    if (index === focusedIndex) {
+      setFocusedIndex(initialIndex);
+    }
+    delete focusedElementsRefs.current[index];
+  };
+
+  const focusElement = (index) => {
+    const focusedElementRef = focusedElementsRefs.current[index];
+    focusedElementRef?.current?.focus();
+  };
 
   const setIndexToNextElement = () => {
     const nextIndex = focusedIndex + 1;
     const elementsExists = focusedElementsRefs.current[nextIndex];
-    setFocusedIndex(elementsExists ? nextIndex : initialIndex);
+    const nextFocusedIndex = elementsExists ? nextIndex : initialIndex;
+    setFocusedIndex(nextFocusedIndex);
+    focusElement(nextFocusedIndex);
   };
   const setIndexPreviousElement = () => {
     const prevIndex = focusedIndex - 1;
+    let prevFocusedIndex = null;
     if (prevIndex >= initialIndex) {
-      setFocusedIndex(prevIndex);
-      return;
+      prevFocusedIndex = prevIndex;
+    } else {
+      prevFocusedIndex = Math.max(...Object.keys(focusedElementsRefs.current));
     }
-    const lastIndex = Math.max(...Object.keys(focusedElementsRefs.current));
-    setFocusedIndex(lastIndex);
+    setFocusedIndex(prevFocusedIndex);
+    focusElement(prevFocusedIndex);
   };
 
-  useMounted(() => {
-    const focusedElementRef = focusedElementsRefs.current[focusedIndex];
-    focusedElementRef?.current?.focus();
-  }, [focusedIndex]);
-
   const contextValue = React.useMemo(
     () => [
       { focusedIndex, axis },
@@ -71,13 +81,11 @@ const useRovingHandler = ({ ref }) => {
   });
 };
 
-export const List = React.forwardRef(({ children }, forwardedRef) => {
+export const List = React.forwardRef(({ as = "div", children, ...props }, forwardedRef) => {
   const ref = React.useRef();
   useRovingHandler({ ref });
 
-  return React.cloneElement(React.Children.only(children), {
-    ref: mergeRefs([ref, children.ref, forwardedRef]),
-  });
+  return jsx(as, { ...props, ref: mergeRefs([ref, forwardedRef]) }, children);
 });
 
 /* -------------------------------------------------------------------------------------------------

components/system/components/GlobalCarousel/jumpers/EditChannels.js

@@ -203,8 +203,7 @@ function Channels({
 
       <AnimateSharedLayout>
         <RovingTabIndex.Provider axis="horizontal">
-          <RovingTabIndex.List>
-            <div css={STYLES_CHANNEL_BUTTONS_WRAPPER}>
+          <RovingTabIndex.List css={STYLES_CHANNEL_BUTTONS_WRAPPER}>
             {channels.map((channel, index) => (
               <motion.div layoutId={`jumper-${channel.id}`} initial={false} key={channel.id}>
                 <RovingTabIndex.Item index={index}>
@@ -222,6 +221,7 @@ function Channels({
 
             <Show when={isCreatingChannel}>
               <motion.div initial={{ opacity: 0.5, y: 4 }} animate={{ opacity: 1, y: 0 }}>
+                <RovingTabIndex.Item index={channels.length}>
                   <ChannelButton
                     css={Styles.HORIZONTAL_CONTAINER_CENTERED}
                     onClick={(e) => (e.stopPropagation(), onCreateChannel(searchQuery))}
@@ -240,9 +240,9 @@ function Channels({
                     />
                     <span style={{ marginLeft: 4 }}>{searchQuery}</span>
                   </ChannelButton>
+                </RovingTabIndex.Item>
               </motion.div>
             </Show>
-            </div>
           </RovingTabIndex.List>
         </RovingTabIndex.Provider>
       </AnimateSharedLayout>