fix single tab stop nav

Author: pan-kot

src/internal/components/chart-legend/index.tsx

@@ -196,7 +196,7 @@ export const ChartLegend = ({
             title={defaultTitle}
             items={defaultItems}
             ariaLabel={"Default legend"}
-            scrolableContainerRef={containerRef}
+            scrollableContainerRef={containerRef}
             {...legendGroupProps}
           />
           {oppositeItems.length > 0 && (
@@ -207,7 +207,7 @@ export const ChartLegend = ({
                 title={oppositeTitle}
                 items={oppositeItems}
                 ariaLabel={"Opposite legend"}
-                scrolableContainerRef={containerRef}
+                scrollableContainerRef={containerRef}
                 {...legendGroupProps}
               />
             </>
@@ -251,7 +251,7 @@ interface LegendItemsProps {
   highlightControl: DebouncedCall;
   items: readonly LegendItem[];
   tooltipRef: React.RefObject<HTMLElement>;
-  scrolableContainerRef?: React.RefObject<HTMLElement>;
+  scrollableContainerRef?: React.RefObject<HTMLElement>;
   position: "bottom" | "bottom-default" | "bottom-opposite" | "side";
   elementsByIdRef: React.MutableRefObject<Record<string, HTMLElement>>;
   onItemHighlightExit: () => void;
@@ -273,7 +273,7 @@ const LegendGroup = ({
   someHighlighted,
   elementsByIdRef,
   highlightControl,
-  scrolableContainerRef,
+  scrollableContainerRef,
   onToggleItem,
   onSelectItem,
   onShowTooltip,
@@ -303,7 +303,7 @@ const LegendGroup = ({
       if (isMouseInContainer.current) {
         return;
       }
-      const container = scrolableContainerRef?.current ?? containerRef.current;
+      const container = scrollableContainerRef?.current ?? containerRef.current;
       const element = elementsByIdRef.current?.[highlightedId];
       if (!container || !element) {
         return;
@@ -425,7 +425,7 @@ const LegendGroup = ({
     if (containerRef.current) {
       const highlightedIndex = items.findIndex((item) => item.highlighted);
       const buttons: HTMLButtonElement[] = Array.from(containerRef.current.querySelectorAll(`.${styles.item}`));
-      return buttons[highlightedIndex] ?? null;
+      return buttons[highlightedIndex] ?? buttons[0];
     }
     return null;
   }