fix: random aria errors on sidebar fullcompositions

twilio-labs · Aug 30, 2023 · 77c1313 · 77c1313
1 parent b3153ba
commit 77c1313
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 2 deletions.
diff --git a/packages/paste-core/components/sidebar/stories/full-composition/components/Console.tsx b/packages/paste-core/components/sidebar/stories/full-composition/components/Console.tsx
@@ -58,6 +58,7 @@ export const Console: React.FC<React.PropsWithChildren<{collapsed: boolean; setC
     <Box minWidth="1200px">
       {/* Can be placed anywhere - position fixed */}
       <Sidebar
+        aria-label={id}
         collapsed={collapsed}
         variant="compact"
         sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}

diff --git a/packages/paste-core/components/sidebar/stories/full-composition/components/Flex.tsx b/packages/paste-core/components/sidebar/stories/full-composition/components/Flex.tsx
@@ -47,6 +47,7 @@ export const Flex: React.FC<React.PropsWithChildren<{collapsed: boolean; setColl
   return (
     <Box minWidth="1200px">
       <Sidebar
+        aria-label={id}
         sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
         topbarSkipLinkID={topbarSkipLinkID}
         mainContentSkipLinkID={mainContentSkipLinkID}

diff --git a/packages/paste-core/components/sidebar/stories/full-composition/components/Segment.tsx b/packages/paste-core/components/sidebar/stories/full-composition/components/Segment.tsx
@@ -57,6 +57,7 @@ export const Segment: React.FC<React.PropsWithChildren<{collapsed: boolean; setC
     <Box minWidth="1200px">
       {/* Can be placed anywhere - position fixed */}
       <Sidebar
+        aria-label={id}
         sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
         topbarSkipLinkID={topbarSkipLinkID}
         mainContentSkipLinkID={mainContentSkipLinkID}

diff --git a/packages/paste-core/components/sidebar/stories/full-composition/docs.stories.tsx b/packages/paste-core/components/sidebar/stories/full-composition/docs.stories.tsx
@@ -49,6 +49,7 @@ export const Docs: StoryFn = () => {
     <Box minWidth="1200px">
       {/* Can be placed anywhere - position fixed */}
       <Sidebar
+        aria-label={id}
         sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
         topbarSkipLinkID={topbarSkipLinkID}
         mainContentSkipLinkID={mainContentSkipLinkID}
@@ -107,8 +108,8 @@ export const Docs: StoryFn = () => {
       {/* Must wrap content area */}
       <SidebarPushContentWrapper collapsed={pushSidebarCollapsed} variant="compact">
         <Topbar id={topbarSkipLinkID}>
-          <TopbarActions justify="start">
-            <InPageNavigation aria-label="Product" marginBottom="space0">
+          <TopbarActions justify="start" aria-label={topbarSkipLinkID}>
+            <InPageNavigation aria-label={`Product ${topbarSkipLinkID}`} marginBottom="space0">
               <InPageNavigationItem href="#" currentPage>
                 Messaging
               </InPageNavigationItem>