fix(Navigation): apply targetId to first link for skiplink accessibility

.changeset/itchy-monkeys-repeat.md

@@ -0,0 +1,7 @@
+---
+"@frameless/ui": patch
+---
+
+Verbeterde toegankelijkheid: skiplinks naar het hoofdmenu focussen nu direct op de eerste menulink, waardoor toetsenbordnavigatie soepeler verloopt.
+
+([GitHub Issue Frameless/strapi#761](https://github.com/frameless/strapi/issues/761))

packages/ui/src/components/Navigation/NavigationList/index.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { NavigationList } from './index';
 import { NavigationListType } from '../index';
@@ -106,23 +106,17 @@ describe('NavigationList', () => {
     expect(navigationList).toBeInTheDocument();
     expect(navigationList).toHaveClass('utrecht-navigation__list--sub-list');
   });
-  test('focuses on the first link when the list receives focus', () => {
-    render(<NavigationList list={listData} />);
+  test('applies targetId to first link when provided', () => {
+    const targetId = 'main-nav';
+    render(<NavigationList list={listData} targetId={targetId} />);
     const firstLink = screen.getByText('Home');
-    const navList = firstLink.closest('ul');
-    expect(navList).toHaveAttribute('tabIndex', '-1');
-
-    fireEvent.focus(navList as HTMLUListElement);
-    expect(firstLink).toHaveFocus();
+    expect(firstLink.getAttribute('id')).toEqual(targetId);
   });
-  test('does not focus the first link on mobile focus', () => {
-    render(<NavigationList list={listData} mobile />);
-    const firstLink = screen.getByText('Home');
-    const navList = firstLink.closest('ul');
-    expect(navList).toHaveAttribute('tabIndex', '-1');
 
-    fireEvent.focus(navList as HTMLUListElement);
-    // Ensure the focus behavior is explicitly prevented in mobile mode
-    expect(firstLink).not.toHaveFocus();
+  test('does not apply id to other links', () => {
+    const targetId = 'main-nav';
+    render(<NavigationList list={listData} targetId={targetId} />);
+    const secondLink = screen.getByText('About');
+    expect(secondLink).not.toHaveAttribute('id');
   });
 });

packages/ui/src/components/Navigation/NavigationList/index.tsx

@@ -1,6 +1,5 @@
 import classnames from 'classnames/bind';
-import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, useRef } from 'react';
-import { FocusEvent } from 'react';
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from 'react';
 import styles from './index.module.scss';
 import { NavigationItem } from '../NavigationItem';
 import { NavigationLink } from '../NavigationLink';
@@ -11,6 +10,7 @@ export interface NavigationListProps extends DetailedHTMLProps<HTMLAttributes<HT
   mobile?: boolean;
   sideNav?: boolean;
   subList?: boolean;
+  targetId?: string;
 }
 
 const css = classnames.bind(styles);
@@ -38,31 +38,16 @@ export const NavigationList = ({
   sideNav,
   children,
   subList,
+  targetId,
   ...restProps
 }: PropsWithChildren<NavigationListProps>) => {
-  const navListRef = useRef<HTMLUListElement>(null);
-  const navLinkRef = useRef<HTMLAnchorElement>(null);
-
-  // focus on first link in list when list is focused
-  const onNavListLinkFocusHandler = (event: FocusEvent<HTMLUListElement, Element>) => {
-    if (mobile) return; // prevent behavior on mobile
-    if (event.target !== navListRef.current) return; // ignore bubbling focus event in React
-
-    if (navListRef.current && navLinkRef?.current) {
-      navLinkRef.current.focus();
-    }
-  };
-
   return (
     <ul
       className={css('utrecht-navigation__list', {
         'utrecht-navigation__list--mobile': mobile,
         'utrecht-navigation__list--side-nav': sideNav,
         'utrecht-navigation__list--sub-list': subList,
       })}
-      ref={navListRef}
-      tabIndex={-1}
-      onFocus={onNavListLinkFocusHandler}
       {...restProps}
     >
       {children}
@@ -76,7 +61,7 @@ export const NavigationList = ({
                 mobile={mobile}
                 href={item.href}
                 isCurrent={item.isCurrent}
-                ref={isTheFirstElement ? navLinkRef : null}
+                id={isTheFirstElement ? targetId : undefined}
                 marker={mobile && <NavigationMarker isCurrent={item.isCurrent} />}
               >
                 {item.textContent}

packages/ui/src/components/Navigation/index.tsx

@@ -82,7 +82,7 @@ export const Navigation = forwardRef(
           {...restProps}
         >
           {!visible ? (
-            <NavigationList id={targetId} list={list} mobile={visible} />
+            <NavigationList list={list} mobile={visible} targetId={targetId} />
           ) : (
             <NavToggleButton
               id={targetId}