diff --git a/packages/lab/src/__tests__/__e2e__/skip-link/SkipLink.cy.tsx b/packages/lab/src/__tests__/__e2e__/skip-link/SkipLink.cy.tsx index 5ff3e9e72f..f5ed90d025 100644 --- a/packages/lab/src/__tests__/__e2e__/skip-link/SkipLink.cy.tsx +++ b/packages/lab/src/__tests__/__e2e__/skip-link/SkipLink.cy.tsx @@ -52,7 +52,7 @@ describe("GIVEN a SkipLink", () => { }); it("THEN it should hide the skip link if ref is broken", () => { - cy.mount(); + cy.mount(); cy.findByText( "Click here and press the Tab key to see the Skip Link", ).click(); diff --git a/packages/lab/src/skip-link/SkipLink.tsx b/packages/lab/src/skip-link/SkipLink.tsx index 59552a14b0..cf3dd15705 100644 --- a/packages/lab/src/skip-link/SkipLink.tsx +++ b/packages/lab/src/skip-link/SkipLink.tsx @@ -18,14 +18,14 @@ interface SkipLinkProps extends ComponentPropsWithoutRef<"a"> { * The ID of the target element to apply focus when the link is clicked. * If the element with this ID is not found, the SkipLink will not be rendered. */ - target: string; + targetId: string; } const withBaseName = makePrefixer("saltSkipLink"); export const SkipLink = forwardRef( function SkipLink( - { className, target, children, onKeyUp, onBlur, onClick, ...rest }, + { className, targetId, children, onKeyUp, onBlur, onClick, ...rest }, ref, ) { const [isTargetAvailable, setIsTargetAvailable] = useState(false); @@ -39,9 +39,9 @@ export const SkipLink = forwardRef( const targetRef = useRef(null); useEffect(() => { - targetRef.current = document.getElementById(target); + targetRef.current = document.getElementById(targetId); setIsTargetAvailable(!!targetRef.current); - }, [target]); + }, [targetId]); const eventHandlers = useManageFocusOnTarget({ onKeyUp, @@ -55,7 +55,7 @@ export const SkipLink = forwardRef( return ( = (args) => { export const Default = DefaultStory.bind({}); Default.args = { - target: "main", + targetId: "main", }; Default.parameters = { layout: "fullscreen",