targetid

jpmorganchase · Dec 19, 2024 · 394ac35 · 394ac35
1 parent 1bea029
commit 394ac35
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git 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(<Default target="" />);
+      cy.mount(<Default targetId="" />);
       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
@@ -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<HTMLAnchorElement, SkipLinkProps>(
   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<HTMLAnchorElement, SkipLinkProps>(
     const targetRef = useRef<HTMLElement | null>(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<HTMLAnchorElement, SkipLinkProps>(
     return (
       <a
         className={clsx(withBaseName(), className)}
-        href={`#${target}`}
+        href={`#${targetId}`}
         ref={ref}
         target="_self"
         {...eventHandlers}

diff --git a/packages/lab/stories/skip-link/skip-link.stories.tsx b/packages/lab/stories/skip-link/skip-link.stories.tsx
@@ -134,7 +134,7 @@ const DefaultStory: StoryFn<typeof SkipLink> = (args) => {
 
 export const Default = DefaultStory.bind({});
 Default.args = {
-  target: "main",
+  targetId: "main",
 };
 Default.parameters = {
   layout: "fullscreen",