address PR feedback

primer · Dec 14, 2023 · cce5678 · cce5678
1 parent 96d963d
commit cce5678
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.module.css b/packages/react/src/SubdomainNavBar/SubdomainNavBar.module.css
@@ -651,9 +651,9 @@
 
 .SubdomainNavBar-skip-to-content {
   position: fixed;
-
-  top: var(--base-size-12);
-  left: var(--base-size-12);
+  top: 75px;
+  border-radius: 0px;
+  width: 100vw;
   z-index: 100;
 }
 

diff --git a/packages/react/src/SubdomainNavBar/SubdomainNavBar.tsx b/packages/react/src/SubdomainNavBar/SubdomainNavBar.tsx
@@ -105,6 +105,9 @@ function Root({
     document.body.style.overflow = newOverflowState
   }, [menuHidden])
 
+  const setStartOfContentButtonFocusedTrue = useCallback(() => setStartOfContentButtonFocused(true), [])
+  const setStartOfContentButtonFocusedFalse = useCallback(() => setStartOfContentButtonFocused(false), [])
+
   const hasLinks =
     useMemo(
       () =>
@@ -139,22 +142,22 @@ function Root({
 
   return (
     <>
-      <Button
-        as="a"
-        href={`#${startOfContentID}`}
-        variant="primary"
-        className={clsx(styles['SubdomainNavBar-skip-to-content'], !startOfContentButtonFocused && 'visually-hidden')}
-        onFocus={() => setStartOfContentButtonFocused(true)}
-        onBlur={() => setStartOfContentButtonFocused(false)}
-      >
-        Skip to content
-      </Button>
       <div
         className={clsx(
           styles['SubdomainNavBar-outer-container'],
           fixed && styles['SubdomainNavBar-outer-container--fixed'],
         )}
       >
+        <Button
+          as="a"
+          href={`#${startOfContentID}`}
+          variant="primary"
+          className={clsx(styles['SubdomainNavBar-skip-to-content'], !startOfContentButtonFocused && 'visually-hidden')}
+          onFocus={setStartOfContentButtonFocusedTrue}
+          onBlur={setStartOfContentButtonFocusedFalse}
+        >
+          Skip to content
+        </Button>
         <header className={clsx(styles['SubdomainNavBar'], className)} data-testid={testIds.root} {...rest}>
           <div
             ref={focusTrapRef}