Fix index page links on /design (#370)

* fix-a11y-link-on-index Update accessibility link on primer.style/design index page * fixed top level links * fixed index and accessibility page
primer · Jan 27, 2023 · f61cbcc · f61cbcc
1 parent fd230c2
commit f61cbcc
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 31 deletions.
diff --git a/content/guides/accessibility/index.mdx b/content/guides/accessibility/index.mdx
@@ -8,19 +8,19 @@ import {Box, Link, Text, Label} from '@primer/react'
   <Box display="grid" gridTemplateColumns="1fr" gridGap={4}>
     <h2>General</h2>
     <div>
-      <Link href="/guides/accessibility/accessibility-at-github" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/accessibility-at-github" sx={{fontWeight: 'bold'}}>
         Accessibility at GitHub
       </Link>
       <Text as="p">Get started with accessibility at GitHub.</Text>
     </div>
     <div>
-      <Link href="/guides/accessibility/guidelines" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/guidelines" sx={{fontWeight: 'bold'}}>
         Guidelines
       </Link>
       <Text as="p">Basic guidelines for designers when creating or updating features.</Text>
     </div>
     <div>
-      <Link href="/guides/accessibility/tools" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/tools" sx={{fontWeight: 'bold'}}>
         Tools
       </Link>
       <Text as="p">A selection of tools to help designers create accessible designs.</Text>
@@ -29,7 +29,7 @@ import {Box, Link, Text, Label} from '@primer/react'
   <Box display="grid" gridTemplateColumns="1fr" gridGap={4}>
     <h2>Specific</h2>
     <div>
-      <Link href="/guides/accessibility/alternative-text-for-images" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/alternative-text-for-images" sx={{fontWeight: 'bold'}}>
         Alternative text for images
       </Link>
       <Text as="p">
@@ -38,7 +38,7 @@ import {Box, Link, Text, Label} from '@primer/react'
       </Text>
     </div>
     <div>
-      <Link href="/guides/accessibility/announcements" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/announcements" sx={{fontWeight: 'bold'}}>
         Assistive technology announcements
       </Link>
       <Text as="p">
@@ -48,7 +48,7 @@ import {Box, Link, Text, Label} from '@primer/react'
       </Text>
     </div>
     <div>
-      <Link href="/guides/accessibility/descriptive-buttons" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/descriptive-buttons" sx={{fontWeight: 'bold'}}>
         Descriptive buttons
       </Link>
       <Text as="p">
@@ -57,7 +57,7 @@ import {Box, Link, Text, Label} from '@primer/react'
       </Text>
     </div>
     <div>
-      <Link href="/guides/accessibility/focus-management" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/focus-management" sx={{fontWeight: 'bold'}}>
         Focus management
       </Link>
       <Text as="p">
@@ -66,7 +66,7 @@ import {Box, Link, Text, Label} from '@primer/react'
       </Text>
     </div>
     <div>
-      <Link href="/guides/accessibility/headings" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/headings" sx={{fontWeight: 'bold'}}>
         Headings
       </Link>
       <Text as="p">
@@ -75,23 +75,23 @@ import {Box, Link, Text, Label} from '@primer/react'
       </Text>
     </div>
     <div>
-      <Link href="/guides/accessibility/links" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/links" sx={{fontWeight: 'bold'}}>
         Links
       </Link>
       <Text as="p">
         Links help us navigate a website. Learn how to style links appropriately to keep them usable by all.
       </Text>
     </div>
     <div>
-      <Link href="/guides/accessibility/semantic-html" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/semantic-html" sx={{fontWeight: 'bold'}}>
         Semantic HTML
       </Link>
       <Text as="p">
         Understand when and how to use semantic HTML to improve the experience of the largest number of users possible.
       </Text>
     </div>
     <div>
-      <Link href="/guides/accessibility/text-resize-and-respacing" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/text-resize-and-respacing" sx={{fontWeight: 'bold'}}>
         Text resize and respacing
       </Link>
       <Text as="p">
@@ -100,7 +100,7 @@ import {Box, Link, Text, Label} from '@primer/react'
       </Text>
     </div>
     <div>
-      <Link href="/guides/accessibility/tooltip-alternatives" sx={{fontWeight: 'bold'}}>
+      <Link href="/design/guides/accessibility/tooltip-alternatives" sx={{fontWeight: 'bold'}}>
         Tooltip alternatives
       </Link>
       <Text as="p">

diff --git a/content/guides/index.mdx b/content/guides/index.mdx
@@ -6,43 +6,43 @@ import {Box, Link, Text} from '@primer/react'
 
 <Box display="grid" gridTemplateColumns={['1fr', null, null, null]} gridGap={4}>
   <div>
-    <Link href="/guides/introduction" sx={{fontWeight: 'bold'}}>
+    <Link href="/design/guides/introduction" sx={{fontWeight: 'bold'}}>
       Introduction
     </Link>
     <Text as="p">Get started with the principles of Primer, standards, and recommendations for designing Github.</Text>
   </div>
   <div>
-    <Link href="/guides/content" sx={{fontWeight: 'bold'}}>
+    <Link href="/design/guides/content" sx={{fontWeight: 'bold'}}>
       Content
     </Link>
     <Text as="p">How to create interfaces that follow GitHub's content guidelines.</Text>
   </div>
     <div>
-    <Link href="/guides/zen" sx={{fontWeight: 'bold'}}>
+    <Link href="/design/guides/zen" sx={{fontWeight: 'bold'}}>
       Zen
     </Link>
     <Text as="p">How to create interfaces that follow GitHub's content guidelines.</Text>
   </div>
     <div>
-    <Link href="/guides/figma" sx={{fontWeight: 'bold'}}>
+    <Link href="/design/guides/figma" sx={{fontWeight: 'bold'}}>
       Figma
     </Link>
     <Text as="p">Getting started with Figma for GitHub.</Text>
   </div>
     <div>
-    <Link href="/guides/component-lifecycle" sx={{fontWeight: 'bold'}}>
+    <Link href="/design/guides/component-lifecycle" sx={{fontWeight: 'bold'}}>
       Component lifecycle
     </Link>
     <Text as="p">Milestones that summarize the maturity lifecycle of UI components in Primer.</Text>
   </div>
     <div>
-    <Link href="/guides/accessibility" sx={{fontWeight: 'bold'}}>
+    <Link href="/design/guides/accessibility" sx={{fontWeight: 'bold'}}>
       Accessibility
     </Link>
     <Text as="p">How to create accessible interfaces for GitHub.</Text>
   </div>
     <div>
-    <Link href="/guides/contribute" sx={{fontWeight: 'bold'}}>
+    <Link href="/design/guides/contribute" sx={{fontWeight: 'bold'}}>
       Contribute
     </Link>
     <Text as="p">How to contribute to Primer.</Text>

diff --git a/content/index.mdx b/content/index.mdx
@@ -12,19 +12,19 @@ export default HeroLayout
     interfaces.
   </Text>
   <div>
+  <div>
+    <Link href="/design/guides" sx={{fontWeight: 'bold'}}>
+      Guides
+    </Link>
+    <Text as="p">Standards, guidelines, and tools to getting started with Primer.</Text>
+  </div>
     <Link href="/design/foundations" sx={{fontWeight: 'bold'}}>
       Foundations
     </Link>
     <Text as="p">
       The fundamental parts of the design system that underpin all GitHub interfaces, such as color and typography.
     </Text>
   </div>
-  <div>
-    <Link href="/design/accessibility" sx={{fontWeight: 'bold'}}>
-      Accessibility
-    </Link>
-    <Text as="p">Standards, guidelines, and tools to design accessible GitHub interfaces.</Text>
-  </div>
   <div>
     <Link href="/design/ui-patterns" sx={{fontWeight: 'bold'}}>
       UI patterns
@@ -37,12 +37,6 @@ export default HeroLayout
     </Link>
     <Text as="p">Design and usage guidelines for individual Primer components.</Text>
   </div>
-  <div>
-    <Link href="/design/guides/figma" sx={{fontWeight: 'bold'}}>
-      Using Figma
-    </Link>
-    <Text as="p">A guide on how to get started using Figma to design interfaces at GitHub.</Text>
-  </div>
 </Box>
 
 ## Need help?