@semiont/react-ui 0.5.4 → 0.5.6

package/dist/test-utils.d.ts

@@ -1,30 +1,48 @@
+import React, { ReactElement } from 'react';
+import { RenderOptions, RenderResult } from '@testing-library/react';
+export * from '@testing-library/react';
+import { SemiontBrowser, SemiontClient } from '@semiont/sdk';
+import { EventBus } from '@semiont/core';
+export { vi } from 'vitest';
+
+/**
+ * Translation management interface
+ * Apps implement this to provide translations using their preferred i18n library
+ */
+interface TranslationManager {
+    /**
+     * Translate a key within a namespace
+     * @param namespace - Translation namespace (e.g., 'Toolbar', 'ResourceViewer')
+     * @param key - Translation key within the namespace
+     * @param params - Optional parameters for interpolation
+     * @returns Translated string
+     */
+    t: (namespace: string, key: string, params?: Record<string, any>) => string;
+}
+
 /**
  * Test utilities for @semiont/react-ui
  *
  * Provides a renderWithProviders helper that wraps components with all necessary providers
  * for testing, with customizable mock implementations.
  */
-import React, { ReactElement } from 'react';
-import { RenderOptions, RenderResult } from '@testing-library/react';
-import { SemiontClient, type SemiontBrowser } from '@semiont/sdk';
-import { EventBus } from '@semiont/core';
-import type { TranslationManager } from './types/TranslationManager';
+
 /**
  * Default mock implementations
  */
-export declare const defaultMocks: {
+declare const defaultMocks: {
     translationManager: TranslationManager;
 };
 /**
  * Options for renderWithProviders
  */
-export interface TestProvidersOptions {
+interface TestProvidersOptions {
     translationManager?: TranslationManager;
     apiBaseUrl?: string;
     /** Inject a specific SemiontBrowser (e.g. one seeded with a kbs list). */
     browser?: SemiontBrowser;
 }
-export interface RenderWithProvidersOptions extends TestProvidersOptions, Omit<RenderOptions, 'wrapper'> {
+interface RenderWithProvidersOptions extends TestProvidersOptions, Omit<RenderOptions, 'wrapper'> {
     /**
      * If true, returns the session (client) EventBus — session-scoped
      * channels (mark:*, beckon:*, gather:*, match:*, bind:*, yield:*,
@@ -37,20 +55,20 @@ export interface RenderWithProvidersOptions extends TestProvidersOptions, Omit<R
      */
     returnShellBus?: boolean;
 }
-export interface RenderWithProvidersResult extends RenderResult {
+interface RenderWithProvidersResult extends RenderResult {
     /** Session-scoped bus (from the fake client inside the fake browser). */
     eventBus?: EventBus;
     /** App-scoped bus (the fake browser's own bus). */
     shellBus?: EventBus;
 }
-export declare function renderWithProviders(ui: ReactElement, options?: RenderWithProvidersOptions): RenderWithProvidersResult;
+declare function renderWithProviders(ui: ReactElement, options?: RenderWithProvidersOptions): RenderWithProvidersResult;
 /**
  * Build a minimal `<SemiontProvider>` wrapper for tests that roll their
  * own render wrapper (instead of `renderWithProviders`). The returned
  * `eventBus` is the bus backing the fake session's client — same
  * reference production code pokes via `session.client.emit(...)`.
  */
-export declare function createTestSemiontWrapper(apiBaseUrl?: string): {
+declare function createTestSemiontWrapper(apiBaseUrl?: string): {
     SemiontWrapper: React.ComponentType<{
         children: React.ReactNode;
     }>;
@@ -64,14 +82,14 @@ export declare function createTestSemiontWrapper(apiBaseUrl?: string): {
 /**
  * Create a mock translation manager with custom translations
  */
-export declare function createMockTranslationManager(translations: Record<string, Record<string, string>>): TranslationManager;
+declare function createMockTranslationManager(translations: Record<string, Record<string, string>>): TranslationManager;
 /**
  * Build a fake SemiontBrowser with the active SessionSignals
  * observables pre-populated. Used by SessionExpiredModal and
  * PermissionDeniedModal tests that need to control the modal flags
  * without driving a real session through its state machine.
  */
-export declare function createMockKnowledgeBaseSession(overrides?: {
+declare function createMockKnowledgeBaseSession(overrides?: {
     permissionDeniedAt?: number | null;
     permissionDeniedMessage?: string | null;
     sessionExpiredAt?: number | null;
@@ -79,6 +97,6 @@ export declare function createMockKnowledgeBaseSession(overrides?: {
     acknowledgePermissionDenied?: () => void;
     acknowledgeSessionExpired?: () => void;
 }): SemiontBrowser;
-export * from '@testing-library/react';
-export { vi } from 'vitest';
-//# sourceMappingURL=test-utils.d.ts.map
+
+export { createMockKnowledgeBaseSession, createMockTranslationManager, createTestSemiontWrapper, defaultMocks, renderWithProviders };
+export type { RenderWithProvidersOptions, RenderWithProvidersResult, TestProvidersOptions };

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.5.4",
+  "version": "0.5.6",
+  "engines": {
+    "node": ">=24.0.0"
+  },
   "description": "React components and hooks for Semiont",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,9 +48,9 @@
   ],
   "scripts": {
     "lint:css": "stylelint 'src/**/*.css' --config ../../.stylelintrc.json",
-    "build": "npm run lint:css && npm run typecheck && tsup && tsc -p tsconfig.build.json",
+    "build": "npm run lint:css && npm run typecheck && tsup && tsc -p tsconfig.build.json && rollup -c rollup.dts.config.mjs && rm -rf dist-types",
     "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist",
+    "clean": "rm -rf dist dist-types",
     "audit:compliance": "./scripts/generate-compliance-report.sh",
     "audit:compliance:tests": "./scripts/generate-test-compliance-report.sh",
     "test": "npm run test:split",
@@ -74,23 +77,26 @@
     "test:split:coverage": "npm run test:coverage"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^16.1.0",
-    "@types/react": "^19",
+    "@types/react": "^19.2.16",
     "@types/react-dom": "^19",
-    "@vitest/coverage-v8": "^4.1.0",
-    "autoprefixer": "^10.4.23",
-    "axe-core": "^4.11.0",
-    "cssnano": "^7.1.2",
+    "@vitest/coverage-v8": "^4.1.8",
+    "autoprefixer": "^10.5.0",
+    "axe-core": "^4.11.4",
+    "cssnano": "^8.0.1",
     "jest-axe": "^10.0.0",
-    "jsdom": "^28.0.0",
+    "jsdom": "^29.1.1",
     "postcss-import": "^16.1.1",
+    "rollup": "^4.61.0",
+    "rollup-plugin-dts": "^6.4.1",
     "tsup": "^8.0.1",
-    "typescript": "^6.0.2"
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.8"
   },
   "publishConfig": {
     "access": "public"
@@ -106,6 +112,6 @@
     "@semiont/api-client": "*",
     "@semiont/core": "*",
     "@semiont/sdk": "*",
-    "react-error-boundary": "^4.1.2"
+    "react-error-boundary": "^6.1.2"
   }
 }

package/src/components/Button/__tests__/Button.test.tsx

@@ -157,7 +157,6 @@ describe('Button Component', () => {
       const icon = <span data-testid="left-icon">←</span>;
       render(<Button leftIcon={icon}>Button</Button>);
 
-      const button = screen.getByRole('button');
       const leftIcon = screen.getByTestId('left-icon');
       const iconWrapper = leftIcon.parentElement;
 
@@ -169,7 +168,6 @@ describe('Button Component', () => {
       const icon = <span data-testid="right-icon">→</span>;
       render(<Button rightIcon={icon}>Button</Button>);
 
-      const button = screen.getByRole('button');
       const rightIcon = screen.getByTestId('right-icon');
       const iconWrapper = rightIcon.parentElement;
 

package/src/components/CodeMirrorRenderer.tsx

@@ -81,6 +81,8 @@ function buildAnnotationDecorations(
       attributes: {
         'data-annotation-id': meta.annotationId,
         'data-annotation-type': meta.annotationType,
+        ...(meta.strategy ? { 'data-anchor-strategy': meta.strategy } : {}),
+        ...(meta.confidence ? { 'data-anchor-confidence': meta.confidence } : {}),
         title: meta.tooltip,
       },
     });

package/src/components/ErrorBoundary.tsx

@@ -11,7 +11,6 @@ interface Props {
 interface State {
   hasError: boolean;
   error: Error | null;
-  errorInfo: ErrorInfo | null;
 }
 
 /**
@@ -24,7 +23,6 @@ export class ErrorBoundary extends Component<Props, State> {
     this.state = {
       hasError: false,
       error: null,
-      errorInfo: null,
     };
   }
 
@@ -33,7 +31,6 @@ export class ErrorBoundary extends Component<Props, State> {
     return {
       hasError: true,
       error,
-      errorInfo: null,
     };
   }
 
@@ -48,11 +45,6 @@ export class ErrorBoundary extends Component<Props, State> {
       this.props.onError(error, errorInfo);
     }
 
-    // Update state with error info
-    this.setState({
-      errorInfo,
-    });
-
     // In production, you might want to log to an error reporting service
     // Example: logErrorToService(error, errorInfo);
   }
@@ -61,7 +53,6 @@ export class ErrorBoundary extends Component<Props, State> {
     this.setState({
       hasError: false,
       error: null,
-      errorInfo: null,
     });
   };
 

package/src/components/ProtectedErrorBoundary.tsx

@@ -45,6 +45,10 @@ export function ProtectedErrorBoundary({
 }
 
 function ProtectedErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
+  // react-error-boundary v6 types `error` as `unknown` — a thrown value can be
+  // anything, so narrow before reading Error fields.
+  const message = error instanceof Error ? error.message : String(error);
+  const stack = error instanceof Error ? error.stack : undefined;
   return (
     <div className="min-h-[400px] flex items-center justify-center p-4">
       <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
@@ -69,8 +73,8 @@ function ProtectedErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
               Error details (development only)
             </summary>
             <pre className="mt-2 text-xs bg-gray-100 dark:bg-gray-900 p-2 rounded-sm overflow-auto">
-              {error.message}
-              {error.stack}
+              {message}
+              {stack}
             </pre>
           </details>
         )}

package/src/components/__tests__/AnnotateReferencesProgressWidget.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../test-utils';

package/src/components/__tests__/ErrorBoundary.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import React from 'react';
+import type { ReactNode } from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ErrorBoundary, AsyncErrorBoundary } from '../ErrorBoundary';
@@ -146,7 +146,7 @@ describe('ErrorBoundary Component', () => {
     });
 
     it('should not render default fallback when custom fallback is provided', () => {
-      const customFallback = (error: Error) => <div>Custom Fallback</div>;
+      const customFallback = () => <div>Custom Fallback</div>;
 
       render(
         <ErrorBoundary fallback={customFallback}>
@@ -223,7 +223,7 @@ describe('ErrorBoundary Component', () => {
 
     it('should call custom reset handler in custom fallback', () => {
       const resetHandler = vi.fn();
-      const customFallback = (error: Error, reset: () => void) => (
+      const customFallback = (_error: Error, reset: () => void) => (
         <div>
           <button onClick={() => { resetHandler(); reset(); }}>Reset</button>
         </div>
@@ -242,9 +242,9 @@ describe('ErrorBoundary Component', () => {
     });
 
     it('should clear error state when reset is called', () => {
-      let resetFn: (() => void) | null = null;
+      const resetRef: { current: (() => void) | null } = { current: null };
       const customFallback = (error: Error, reset: () => void) => {
-        resetFn = reset;
+        resetRef.current = reset;
         return <div>Error: {error.message}</div>;
       };
 
@@ -255,11 +255,11 @@ describe('ErrorBoundary Component', () => {
       );
 
       expect(screen.getByText('Error: Initial error')).toBeInTheDocument();
-      expect(resetFn).not.toBeNull();
+      expect(resetRef.current).not.toBeNull();
 
       // Call reset
-      if (resetFn) {
-        resetFn();
+      if (resetRef.current) {
+        resetRef.current();
       }
 
       // Rerender with non-throwing component after reset
@@ -286,8 +286,11 @@ describe('ErrorBoundary Component', () => {
 
     it('should navigate to home when Go Home button clicked', () => {
       const originalLocation = window.location;
-      delete (window as any).location;
-      window.location = { href: '' } as any;
+      Object.defineProperty(window, 'location', {
+        value: { href: '' },
+        writable: true,
+        configurable: true,
+      });
 
       render(
         <ErrorBoundary>
@@ -300,7 +303,11 @@ describe('ErrorBoundary Component', () => {
 
       expect(window.location.href).toBe('/');
 
-      window.location = originalLocation;
+      Object.defineProperty(window, 'location', {
+        value: originalLocation,
+        writable: true,
+        configurable: true,
+      });
     });
   });
 
@@ -336,7 +343,7 @@ describe('ErrorBoundary Component', () => {
 
   describe('Edge Cases', () => {
     it('should handle error with no message', () => {
-      function ThrowEmptyError() {
+      function ThrowEmptyError(): ReactNode {
         throw new Error();
       }
 
@@ -433,7 +440,7 @@ describe('AsyncErrorBoundary Component', () => {
     });
 
     it('should handle error with no message', () => {
-      function ThrowEmptyError() {
+      function ThrowEmptyError(): ReactNode {
         throw new Error();
       }
 

package/src/components/__tests__/LiveRegion.hooks.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 import React from 'react';
 import { renderHook, act } from '@testing-library/react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import {
   LiveRegionProvider,

package/src/components/__tests__/ProtectedErrorBoundary.test.tsx

@@ -186,7 +186,8 @@ describe('ProtectedErrorBoundary', () => {
         // Multiple console.error calls happen (React's own logs, plus ours).
         // Look for the boundary's prefix specifically.
         const ourCall = consoleErrorSpy.mock.calls.find(
-          call => typeof call[0] === 'string' && call[0].includes('ProtectedErrorBoundary caught:')
+          (call: Parameters<typeof console.error>) =>
+            typeof call[0] === 'string' && call[0].includes('ProtectedErrorBoundary caught:')
         );
         expect(ourCall).toBeDefined();
       } finally {

package/src/components/__tests__/ResizeHandle.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { ResizeHandle } from '../ResizeHandle';

package/src/components/__tests__/SessionExpiryBanner.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../test-utils';

package/src/components/__tests__/StatusDisplay.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
-import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import { BehaviorSubject } from 'rxjs';
 import '@testing-library/jest-dom';

package/src/components/__tests__/Toast.test.tsx

@@ -1,7 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen, waitFor, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { ToastProvider, useToast, ToastContainer, type ToastMessage } from '../Toast';
+import { render, screen } from '@testing-library/react';
+import { ToastProvider, useToast } from '../Toast';
 
 describe('Toast System', () => {
   beforeEach(() => {

package/src/components/__tests__/Toolbar.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../test-utils';

package/src/components/annotation/annotations.css

@@ -36,6 +36,20 @@
   position: relative;
 }
 
+/* Low-confidence anchor affordance.
+ *
+ * Annotations whose anchor was resolved by something other than a clean
+ * fast-path or unique-occurrence match (i.e. `confidence !== 'high'`)
+ * get a dotted underline so operators can see at a glance which
+ * highlights were rescued by score-resolved tiebreaking, fuzzy matching,
+ * or a position-fallback. The hover tooltip (added by
+ * `getAnnotationDecorationMeta`) names the strategy. */
+.annotation-low-confidence {
+  text-decoration: underline dotted var(--semiont-color-warning-500, #d97706);
+  text-decoration-thickness: 2px;
+  text-underline-offset: 2px;
+}
+
 /* Print styles */
 @media print {
   .annotation-highlight,

package/src/components/annotation-popups/__tests__/JsonLdView.test.tsx

@@ -1,11 +1,9 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
-import type { components } from '@semiont/core';
 
-import type { Annotation } from '@semiont/core';
+import type { Annotation, AnnotationId } from '@semiont/core';
 
 // Mock CodeMirror modules
 vi.mock('@codemirror/view', () => {
@@ -57,10 +55,10 @@ import { JsonLdView } from '../JsonLdView';
 
 const createMockAnnotation = (overrides?: Partial<Annotation>): Annotation => ({
   '@context': 'http://www.w3.org/ns/anno.jsonld',
-  id: 'anno-1',
+  id: 'anno-1' as AnnotationId,
   type: 'Annotation',
   motivation: 'highlighting',
-  creator: { name: 'user@example.com' },
+  creator: { '@type': 'Person', name: 'user@example.com' },
   created: '2024-01-01T10:00:00Z',
   target: {
     source: 'resource-1',

package/src/components/annotation-popups/__tests__/SharedPopupElements.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { renderWithProviders } from '../../../test-utils';

package/src/components/branding/__tests__/SemiontBranding.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { SemiontBranding } from '../SemiontBranding';
@@ -305,7 +304,7 @@ describe('SemiontBranding Component', () => {
 
   describe('Edge Cases', () => {
     it('should handle missing translation gracefully', () => {
-      const emptyTranslate = vi.fn((key: string) => '');
+      const emptyTranslate = vi.fn(() => '');
 
       render(<SemiontBranding t={emptyTranslate} />);
 

package/src/components/layout/__tests__/LeftSidebar.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { LeftSidebar } from '../LeftSidebar';
@@ -159,7 +158,7 @@ describe('LeftSidebar Component', () => {
     });
 
     it('should save collapsed state to localStorage', () => {
-      const mockChildren = vi.fn((isCollapsed, toggleCollapsed) => (
+      const mockChildren = vi.fn((_isCollapsed, toggleCollapsed) => (
         <button onClick={toggleCollapsed} data-testid="toggle-btn">Toggle</button>
       ));
 
@@ -183,7 +182,7 @@ describe('LeftSidebar Component', () => {
     });
 
     it('should not collapse when collapsible is false', () => {
-      const mockChildren = vi.fn((isCollapsed, toggleCollapsed) => (
+      const mockChildren = vi.fn((_isCollapsed, toggleCollapsed) => (
         <button onClick={toggleCollapsed} data-testid="toggle-btn">Toggle</button>
       ));
 
@@ -208,7 +207,7 @@ describe('LeftSidebar Component', () => {
     });
 
     it('should use default storage key', () => {
-      const mockChildren = vi.fn((isCollapsed, toggleCollapsed) => (
+      const mockChildren = vi.fn((_isCollapsed, toggleCollapsed) => (
         <button onClick={toggleCollapsed} data-testid="toggle-btn">Toggle</button>
       ));
 
@@ -233,7 +232,7 @@ describe('LeftSidebar Component', () => {
 
   describe('Navigation Menu Helper', () => {
     it('should provide navigationMenu helper to function children', () => {
-      const mockChildren = vi.fn((isCollapsed, toggleCollapsed, navigationMenu) => {
+      const mockChildren = vi.fn((_isCollapsed, _toggleCollapsed, navigationMenu) => {
         // Test that navigationMenu helper returns NavigationMenu component
         const menuElement = navigationMenu(() => {});
         return <div data-testid="children-content">{menuElement}</div>;
@@ -259,7 +258,7 @@ describe('LeftSidebar Component', () => {
 
     it('should pass onClose callback to NavigationMenu', () => {
       const mockOnClose = vi.fn();
-      const mockChildren = vi.fn((isCollapsed, toggleCollapsed, navigationMenu) => {
+      const mockChildren = vi.fn((_isCollapsed, _toggleCollapsed, navigationMenu) => {
         const menuElement = navigationMenu(mockOnClose);
         return <div>{menuElement}</div>;
       });

package/src/components/layout/__tests__/PageLayout.test.tsx

@@ -1,5 +1,4 @@
 import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { PageLayout } from '../PageLayout';
@@ -247,7 +246,6 @@ describe('PageLayout Component', () => {
       );
 
       // Real Footer renders copyright with dynamic year
-      const currentYear = new Date().getFullYear();
       expect(screen.getByText(`translated.copyright`)).toBeInTheDocument();
     });
   });
@@ -270,7 +268,7 @@ describe('PageLayout Component', () => {
     });
 
     it('should render with CookiePreferences component', () => {
-      const MockCookiePreferences = ({ isOpen, onClose }: any) => (
+      const MockCookiePreferences = ({  }: any) => (
         <div data-testid="cookie-prefs">Cookie Preferences</div>
       );
 

package/src/components/layout/__tests__/SkipLinks.a11y.test.tsx

@@ -63,7 +63,7 @@ describe('SkipLinks - Accessibility', () => {
 
     it('should become visible on focus', async () => {
       const user = userEvent.setup();
-      const { container } = render(<SkipLinks />);
+      render(<SkipLinks />);
 
       const firstLink = screen.getAllByRole('link')[0];
 
@@ -76,12 +76,12 @@ describe('SkipLinks - Accessibility', () => {
 
     it('should hide when focus leaves', async () => {
       const user = userEvent.setup();
-      const { container } = render(
-        <div>
-          <SkipLinks />
-          <button>Next focusable element</button>
-        </div>
-      );
+      render(
+<div>
+<SkipLinks />
+<button>Next focusable element</button>
+</div>
+);
 
       // Tab to first skip link
       await user.tab();
@@ -239,7 +239,7 @@ describe('SkipLinks - Accessibility', () => {
 
     it('should maintain focus management with multiple links', async () => {
       const user = userEvent.setup();
-      const { container } = render(<SkipLinks />);
+      render(<SkipLinks />);
 
       // Tab to first link
       await user.tab();