@digigov/ui 2.0.0-8e254888 → 2.0.0-a32ad9b2

package/src/navigation/Breadcrumbs/BreadcrumbsListItemLink.tsx

@@ -0,0 +1,22 @@
+export * from '@digigov/react-core/BreadcrumbsListItemLinkBase';
+import React from 'react';
+import {
+  BreadcrumbsListItemLinkBase,
+  BreadcrumbsListItemLinkBaseProps,
+} from '@digigov/react-core/BreadcrumbsListItemLinkBase';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export interface BreadcrumbsListItemLinkProps
+  extends BreadcrumbsListItemLinkBaseProps {}
+
+export const BreadcrumbsListItemLink = React.forwardRef<
+  HTMLAnchorElement,
+  BreadcrumbsListItemLinkProps
+>(function BreadcrumbsListItemLink({ children, ...props }, ref) {
+  return (
+    <BreadcrumbsListItemLinkBase as={Link} ref={ref} {...props}>
+      {children}
+    </BreadcrumbsListItemLinkBase>
+  );
+});
+export default BreadcrumbsListItemLink;

package/src/navigation/Breadcrumbs/index.test.tsx

@@ -30,6 +30,10 @@ test('renders the All Breadcrumbs variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/Breadcrumbs/index.tsx

@@ -1,7 +1,7 @@
 export * from '@digigov/react-core/Breadcrumbs';
 export * from '@digigov/react-core/BreadcrumbsList';
 export * from '@digigov/react-core/BreadcrumbsListItemWrapper';
-export * from '@digigov/react-core/BreadcrumbsListItemLink';
+export * from '@digigov/ui/navigation/Breadcrumbs/BreadcrumbsListItemLink';
 import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
 
 export * from '@digigov/ui/navigation/Breadcrumbs/BreadcrumbsListItem';

package/src/navigation/Breadcrumbs/interaction.test.tsx

@@ -8,6 +8,10 @@ import { WithHook } from '@digigov/ui/navigation/Breadcrumbs/__stories__/WithHoo
 test('renders the Default Hover and click', async ({ mount, page }) => {
   await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>nav>ol>li:nth-child(1)>a').hover();
   await page.locator('#root>nav>ol>li:nth-child(1)>a').click();
   await page.keyboard.press('Tab');
@@ -22,6 +26,10 @@ test('renders the Default Hover and click', async ({ mount, page }) => {
 test('renders the WithHook click', async ({ mount, page }) => {
   await mount(<WithHook />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.click("[id='Εγχειρίδια Νομοθεσίας Πυρασφάλειας']");
 
   const screenshot = await page.screenshot({
@@ -34,6 +42,10 @@ test('renders the WithHook click', async ({ mount, page }) => {
 test('renders the Auto click', async ({ mount, page }) => {
   await mount(<Auto />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.click("[id='Εγχειρίδια Νομοθεσίας Πυρασφάλειας']");
 
   const screenshot = await page.screenshot({

package/src/navigation/Drawer/hooks.ts

@@ -28,12 +28,12 @@ export interface UseDrawerReturn {
 
 export const useDrawer = (): UseDrawerReturn => {
   const [currentOpen, setCurrentOpen] = useState<DrawerId | null>(null);
-  const drawersRef = useRef<Map<DrawerId, React.RefObject<HTMLDivElement>>>(
-    new Map()
-  );
-  const buttonsRef = useRef<Map<DrawerId, React.RefObject<HTMLButtonElement>>>(
-    new Map()
-  );
+  const drawersRef = useRef<
+    Map<DrawerId, React.RefObject<HTMLDivElement | null>>
+  >(new Map());
+  const buttonsRef = useRef<
+    Map<DrawerId, React.RefObject<HTMLButtonElement | null>>
+  >(new Map());
 
   const open = useCallback((id: DrawerId) => {
     setCurrentOpen(id);

package/src/navigation/Drawer/index.test.tsx

@@ -22,6 +22,10 @@ test('renders the All Drawer variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/Dropdown/doc.mdx

@@ -7,22 +7,28 @@ title: Dropdown
 
 ## How to use
 
-<code src="@digigov/ui/navigation/Dropdown/__stories__/Default.tsx" />
-
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/Default.tsx" />
+</div>
 ### Dropdown with align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
-<code src="@digigov/ui/navigation/Dropdown/__stories__/AlignRight.tsx" />
-
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/AlignRight.tsx" />
+</div>
 ### Dropdown with placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
-<code src="@digigov/ui/navigation/Dropdown/__stories__/PlacementTop.tsx" />
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/PlacementTop.tsx" />
+</div>
 
 ## API
 
-See below for a complete reference to all of the props  available to the components mentioned here.
+See below for a complete reference to all of the props available to the components mentioned here.
 
-<ComponentProps componentName={["DropdownBase","DropdownButton","DropdownContent"]} /> 
+<ComponentProps
+  componentName={['DropdownBase', 'DropdownButton', 'DropdownContent']}
+/>

package/src/navigation/Dropdown/index.test.tsx

@@ -54,6 +54,10 @@ test('renders the All Dropdown variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/Dropdown/interaction.test.tsx

@@ -10,6 +10,10 @@ import { ScrollableContent } from '@digigov/ui/navigation/Dropdown/__stories__/S
 test('renders the AlignRight Align right action', async ({ mount, page }) => {
   await mount(<AlignRight />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>div>details>summary').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -21,6 +25,10 @@ test('renders the AlignRight Align right action', async ({ mount, page }) => {
 test('renders the Default Open dropdown action', async ({ mount, page }) => {
   await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>details>summary').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -32,6 +40,10 @@ test('renders the Default Open dropdown action', async ({ mount, page }) => {
 test('renders the Dense Open dropdown action', async ({ mount, page }) => {
   await mount(<Dense />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>details>summary').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -46,6 +58,10 @@ test('renders the PlacementTop Placement top action', async ({
 }) => {
   await mount(<PlacementTop />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>div>details>summary').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -57,6 +73,10 @@ test('renders the PlacementTop Placement top action', async ({
 test('renders the ScrollableContent open content', async ({ mount, page }) => {
   await mount(<ScrollableContent />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>details>summary').click();
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/navigation/Link/index.test.tsx

@@ -38,6 +38,10 @@ test('renders the All Link variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/Link/index.tsx

@@ -1,17 +1,22 @@
 import React from 'react';
 import LinkBase, { LinkBaseProps } from '@digigov/react-core/LinkBase';
-
 export interface LinkComponentContextProps {
   component: React.ElementType<LinkProps>;
   children?: React.ReactNode;
 }
 
-export const CommonLink: React.FC<LinkProps> = (props) => (
-  <LinkBase {...props}>{props.children}</LinkBase>
-);
+export const CommonLink: React.FC<LinkProps> = (props) => {
+  const defaultStyle = !props.className;
+  const underline = props.className ? !defaultStyle : defaultStyle;
+  return (
+    <LinkBase defaultStyle={defaultStyle} underline={underline} {...props}>
+      {props.children}
+    </LinkBase>
+  );
+};
 
 const LinkComponentContext =
-  React.createContext<React.ElementType<LinkProps>>(LinkBase);
+  React.createContext<React.ElementType<LinkProps>>(CommonLink);
 export const LinkProvider: React.FC<LinkComponentContextProps> = (props) => {
   return (
     <LinkComponentContext.Provider value={props.component}>

package/src/navigation/Link/interaction.test.tsx

@@ -8,6 +8,10 @@ import { NoUnderline } from '@digigov/ui/navigation/Link/__stories__/NoUnderline
 test('renders the DarkBackground Hover and focus', async ({ mount, page }) => {
   await mount(<DarkBackground />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>section>a').hover();
   await page.locator('#root>section>a').click();
 
@@ -21,6 +25,10 @@ test('renders the DarkBackground Hover and focus', async ({ mount, page }) => {
 test('renders the Default Focus', async ({ mount, page }) => {
   await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.keyboard.press('Tab');
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -32,6 +40,10 @@ test('renders the Default Focus', async ({ mount, page }) => {
 test('renders the NoUnderline Hover and focus', async ({ mount, page }) => {
   await mount(<NoUnderline />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>a').hover();
   await page.locator('#root>a').click();
 

package/src/navigation/NavList/NavListAuto/index.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
-import NavList from '@digigov/react-core/NavList';
-import NavListItemAction from '@digigov/react-core/NavListItemAction';
-import NavMenuContainer from '@digigov/react-core/NavMenuContainer';
-import NavMenuContent from '@digigov/react-core/NavMenuContent';
-import NavMenuContentListItem from '@digigov/react-core/NavMenuContentListItem';
-import NavMenuTitle from '@digigov/react-core/NavMenuTitle';
 import { Link } from '@digigov/ui/navigation/Link';
+import {
+  NavList,
+  NavListItemAction,
+  NavMenuContentList,
+  NavMenuContentListItem,
+  NavMenuContent,
+  NavMenuContainer,
+  NavMenuTitle,
+} from '@digigov/ui/navigation/NavList';
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
-import Nav from '@digigov/ui/navigation/NavList/Nav';
-import NavMenuContentList from '@digigov/ui/navigation/NavList/NavMenuContentList';
+import { Nav } from '@digigov/ui/navigation/NavList/Nav';
 import { NavListAutoProps } from '@digigov/ui/navigation/NavList/types';
 
 export const NavListAuto: React.FC<NavListAutoProps> = ({

package/src/navigation/NavList/NavListItemAction.tsx

@@ -0,0 +1,69 @@
+export * from '@digigov/react-core/NavListItemActionBase';
+import React, { ForwardedRef } from 'react';
+import {
+  NavListItemButton,
+  NavListItemButtonProps,
+  NavListItemBadge,
+  NavListItemActionContainer,
+} from '@digigov/ui/navigation/NavList';
+import {
+  NavListItemLink,
+  NavListItemLinkProps,
+} from '@digigov/ui/navigation/NavList/NavListItemLink';
+
+export type LinkButtonJoinProps = NavListItemLinkProps & NavListItemButtonProps;
+export interface NavListItemActionBaseProps extends LinkButtonJoinProps {
+  /**
+   * label is optional.
+   * The label for the NavListItemActionBase.
+   */
+  label?: string;
+
+  /**
+   * arrow is optional.
+   * use arrow prop if you want to have arrow at the nav list item.
+   * @value true
+   * @value false
+   * @default false
+   */
+  arrow?: boolean;
+  badgeText?: string;
+}
+/**
+ * NavListItemAction must be inside the NavList.
+ * This component has a items of NavListItemLink component inside.
+ */
+export const NavListItemAction = React.forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  NavListItemActionBaseProps
+>(function NavListItemAction(
+  { label, arrow = false, href, className, children, ...props },
+  ref
+) {
+  return (
+    <NavListItemActionContainer>
+      {href ? (
+        <NavListItemLink
+          {...props}
+          href={href}
+          className={className}
+          ref={ref as ForwardedRef<HTMLAnchorElement>}
+        >
+          {children || label}
+        </NavListItemLink>
+      ) : (
+        <NavListItemButton
+          {...props}
+          arrow={arrow}
+          className={className}
+          ref={ref as ForwardedRef<HTMLButtonElement>}
+        >
+          {children || label}
+        </NavListItemButton>
+      )}
+      {props.badgeText && <NavListItemBadge text={props.badgeText} />}
+    </NavListItemActionContainer>
+  );
+});
+
+export default NavListItemAction;

package/src/navigation/NavList/NavListItemLink.tsx

@@ -0,0 +1,22 @@
+export * from '@digigov/react-core/NavListItemLinkBase';
+import React from 'react';
+import {
+  NavListItemLinkBase,
+  NavListItemLinkBaseProps,
+} from '@digigov/react-core/NavListItemLinkBase';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export interface NavListItemLinkProps extends NavListItemLinkBaseProps {}
+
+export const NavListItemLink = React.forwardRef<
+  HTMLAnchorElement,
+  NavListItemLinkProps
+>(function NavListItemLink({ children, ...props }, ref) {
+  return (
+    <NavListItemLinkBase as={Link} ref={ref} {...props}>
+      {children}
+    </NavListItemLinkBase>
+  );
+});
+
+export default NavListItemLink;

package/src/navigation/NavList/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ForwardRef(NavList2)>
-  this is some random warning text
-</ForwardRef(NavList2)>
+Object {
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": Object {},
+  "key": null,
+  "props": Object {
+    "children": "this is some random warning text",
+  },
+  "type": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+}
 `;

package/src/navigation/NavList/doc.mdx

@@ -19,7 +19,6 @@ import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
 
 <code src="@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer.tsx" />
 
-
 ### Vertical NavList with submenu
 
 <code src="@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer.tsx" />
@@ -27,7 +26,7 @@ import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
 ### Auto
 
 <PhaseBanner>
-    <PhaseBannerTag>EXPERIMENTAL</PhaseBannerTag>
+  <PhaseBannerTag>EXPERIMENTAL</PhaseBannerTag>
 </PhaseBanner>
 
 This is an implementation of NavList, utilizing the `useNavList` hook to register each item along with its associated content.
@@ -42,16 +41,19 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={
-  [ "Nav",
-    "NavList",
-    "NavListAction",
-    "NavListItemActionContainer",
-    "NavListItemButton",
-    "NavListItemLink",
-    "NavMenuContainer",
-    "NavMenuContentListBase",
-    "NavMenuContentListItem",
-    "NavMenuTitle",]} /> 
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps
+  componentName={[
+    'Nav',
+    'NavList',
+    'NavListAction',
+    'NavListItemActionContainer',
+    'NavListItemButton',
+    'NavListItemLinkBase',
+    'NavMenuContainer',
+    'NavMenuContentListBase',
+    'NavMenuContentListItem',
+    'NavMenuTitle',
+  ]}
+/>{' '}

package/src/navigation/NavList/index.test.tsx

@@ -46,6 +46,10 @@ test('renders the All NavList variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/NavList/index.tsx

@@ -12,8 +12,9 @@ export * from '@digigov/react-core/NavMenuContentListBase';
 export * from '@digigov/react-core/NavMenuContentListItem';
 export * from '@digigov/react-core/NavMenuTitle';
 export * from '@digigov/react-core/NavListItemActionContainer';
-export * from '@digigov/react-core/NavListItemAction';
+export * from '@digigov/ui/navigation/NavList/NavListItemAction';
 export * from '@digigov/react-core/NavListItemBadge';
 export * from '@digigov/react-core/NavListItemButton';
-export * from '@digigov/react-core/NavListItemLink';
+export * from '@digigov/ui/navigation/NavList/NavListItemLink';
+
 export default NavList;

package/src/navigation/NavList/interaction.test.tsx

@@ -11,6 +11,10 @@ test('renders the HorizontalWithoutDrawer Open submenu', async ({
 }) => {
   await mount(<HorizontalWithoutDrawer />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>nav>ul>li:nth-child(2)>button').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -25,6 +29,10 @@ test('renders the VerticalWithoutDrawer Open submenu', async ({
 }) => {
   await mount(<VerticalWithoutDrawer />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>nav>ul>li:nth-child(2)>button').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -36,6 +44,10 @@ test('renders the VerticalWithoutDrawer Open submenu', async ({
 test('renders the UsingHeaderButton menu', async ({ mount, page }) => {
   await mount(<UsingHeaderButton />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('button:text("Επιλογές")').click();
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/navigation/Pagination/doc.mdx

@@ -3,6 +3,10 @@ id: pagination
 title: Pagination
 ---
 
+# Pagination
+
+pagination component displays a list of page numbers, and allows the user to navigate to a specific page.
+
 ## How to use
 
 <code src="@digigov/ui/navigation/Pagination/__stories__/Default.tsx" />
@@ -21,12 +25,13 @@ title: Pagination
 
 ## API
 
-See below for a complete reference to all of the props  available to the components mentioned here.
+See below for a complete reference to all of the props available to the components mentioned here.
 
-<ComponentProps componentName={
-  [
-  "Pagination",
-  "PaginationLabel",
-  "PaginationList",
-  "PaginationListItem",
-  ]} /> 
+<ComponentProps
+  componentName={[
+    'Pagination',
+    'PaginationLabel',
+    'PaginationList',
+    'PaginationListItem',
+  ]}
+/>{' '}

package/src/navigation/Pagination/hooks.ts

@@ -53,8 +53,8 @@ export const usePagination = ({
       ? currentPage * currentResultsPerPage
       : total;
 
-  const labelRef = useRef<React.RefObject<HTMLDivElement>>();
-  const selectLabelRef = useRef<React.RefObject<HTMLLabelElement>>();
+  const labelRef = useRef<React.RefObject<HTMLDivElement>>(undefined);
+  const selectLabelRef = useRef<React.RefObject<HTMLLabelElement>>(undefined);
 
   useEffect(() => {
     setCurrentPage(totalPages < currentPage ? totalPages : currentPage);

package/src/navigation/Pagination/index.test.tsx

@@ -38,6 +38,10 @@ test('renders the All Pagination variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/Pagination/interaction.test.tsx

@@ -6,6 +6,10 @@ import { Default } from '@digigov/ui/navigation/Pagination/__stories__/Default';
 test('renders the Default Hover and click no3', async ({ mount, page }) => {
   await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   await page.locator('#root>nav:nth-child(1)>ul>li:nth-child(4)>a').hover();
   await page.locator('#root>nav:nth-child(1)>ul>li:nth-child(4)>a').click();
 

package/src/navigation/SkipLink/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All SkipLink variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });