chore: pr feedback

twilio-labs · Jul 12, 2023 · 55fdff1 · 55fdff1
1 parent 78e7903
commit 55fdff1
Show file tree

Hide file tree

Showing 14 changed files with 73 additions and 87 deletions.
diff --git a/packages/paste-core/components/sidebar/__tests__/sidebarNavigation.spec.tsx b/packages/paste-core/components/sidebar/__tests__/sidebarNavigation.spec.tsx
@@ -51,7 +51,7 @@ const MockPushSidebarWithNavigation = ({
           </SidebarHeaderIconButton>
           <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
         </SidebarHeader>
-        <SidebarNavigation aria-label="main" sidebarNavigationSkipLinkID="nav">
+        <SidebarNavigation aria-label="main">
           <SidebarNavigationItem
             href="https://google.com"
             data-testid="nav-item-button"
@@ -237,7 +237,7 @@ describe('SidebarNavigation', () => {
             variant="compact"
             data-testid="aaa"
           >
-            <SidebarNavigation aria-label="main" sidebarNavigationSkipLinkID="nav">
+            <SidebarNavigation aria-label="main">
               <SidebarNavigationItem href="http://www.google.com" selected>
                 AnchorItem Selected
               </SidebarNavigationItem>
@@ -302,7 +302,7 @@ describe('SidebarNavigation', () => {
             variant="compact"
             data-testid="aaa"
           >
-            <SidebarNavigation aria-label="main" sidebarNavigationSkipLinkID="nav" element="NAVIGATION">
+            <SidebarNavigation aria-label="main" element="NAVIGATION">
               <SidebarNavigationItem element="NAVIGATION_ITEM_ANCHOR" href="http://www.google.com" selected>
                 AnchorItem Selected
               </SidebarNavigationItem>

diff --git a/packages/paste-core/components/sidebar/src/Sidebar.tsx b/packages/paste-core/components/sidebar/src/Sidebar.tsx
@@ -106,17 +106,15 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
     const styles = useSpring(springConfig);
 
     return (
-      <SidebarContext.Provider value={{collapsed, variant, sidebarId}}>
+      <SidebarContext.Provider value={{collapsed, variant, sidebarId, sidebarNavigationSkipLinkID}}>
         <SidebarSkipLinks
           element={`${element}_SKIPLINKS`}
-          {...{
-            mainContentSkipLinkID,
-            sidebarNavigationSkipLinkID,
-            topbarSkipLinkID,
-            i18nMainContentSkipLinkText,
-            i18nNavigationSkipLinkText,
-            i18nTopbarSkipLinkText,
-          }}
+          mainContentSkipLinkID={mainContentSkipLinkID}
+          sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
+          topbarSkipLinkID={topbarSkipLinkID}
+          i18nMainContentSkipLinkText={i18nMainContentSkipLinkText}
+          i18nNavigationSkipLinkText={i18nNavigationSkipLinkText}
+          i18nTopbarSkipLinkText={i18nTopbarSkipLinkText}
         />
         <AnimatedStyledSidebar
           {...safelySpreadBoxProps(props)}
@@ -141,4 +139,7 @@ Sidebar.propTypes = {
   mainContentSkipLinkID: PropTypes.string,
   sidebarNavigationSkipLinkID: PropTypes.string,
   topbarSkipLinkID: PropTypes.string,
+  i18nMainContentSkipLinkText: PropTypes.string,
+  i18nNavigationSkipLinkText: PropTypes.string,
+  i18nTopbarSkipLinkText: PropTypes.string,
 };
diff --git a/packages/paste-core/components/sidebar/src/SidebarContext.tsx b/packages/paste-core/components/sidebar/src/SidebarContext.tsx
@@ -6,6 +6,7 @@ interface SidebarState {
   sidebarId: string;
   collapsed: boolean;
   variant: Variants;
+  sidebarNavigationSkipLinkID: string;
 }
 
 export const SidebarContext = React.createContext<SidebarState>({} as SidebarState);
diff --git a/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx b/packages/paste-core/components/sidebar/src/navigation/SidebarNavigation.tsx
@@ -52,22 +52,11 @@ export interface SidebarNavigationProps extends React.HTMLAttributes<HTMLDivElem
   element?: BoxProps['element'];
   hideItemsOnCollapse?: boolean;
   hierarchical?: boolean;
-  sidebarNavigationSkipLinkID: string;
 }
 
 export const SidebarNavigation = React.forwardRef<HTMLDivElement, SidebarNavigationProps>(
-  (
-    {
-      element = 'SIDEBAR_NAVIGATION',
-      hideItemsOnCollapse = false,
-      hierarchical = false,
-      sidebarNavigationSkipLinkID,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const {collapsed} = React.useContext(SidebarContext);
+  ({element = 'SIDEBAR_NAVIGATION', hideItemsOnCollapse = false, hierarchical = false, children, ...props}, ref) => {
+    const {collapsed, sidebarNavigationSkipLinkID} = React.useContext(SidebarContext);
 
     return (
       <SidebarNavigationContext.Provider
@@ -104,5 +93,4 @@ SidebarNavigation.propTypes = {
   'aria-label': PropTypes.string.isRequired,
   hideItemsOnCollapse: PropTypes.bool,
   hierarchical: PropTypes.bool,
-  sidebarNavigationSkipLinkID: PropTypes.string.isRequired,
 };
diff --git a/packages/paste-core/components/sidebar/stories/customization.stories.tsx b/packages/paste-core/components/sidebar/stories/customization.stories.tsx
@@ -19,6 +19,7 @@ import {
   SidebarOverlayContentWrapper,
   SidebarBetaBadge,
   SidebarBody,
+  SidebarNavigation,
 } from '../src';
 
 // eslint-disable-next-line import/no-default-export
@@ -84,7 +85,9 @@ export const WithDefaultElementName: StoryFn = (_args, {parameters: {isTestEnvir
             <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
           </SidebarHeader>
           <SidebarBody>
-            <div id={sidebarNavigationSkipLinkID} />
+            <SidebarNavigation aria-label="main">
+              <></>
+            </SidebarNavigation>
             <SidebarBetaBadge as="span">Beta</SidebarBetaBadge>
           </SidebarBody>
           <SidebarFooter>
@@ -172,7 +175,9 @@ export const WithCustomElementName: StoryFn = (_args, {parameters: {isTestEnviro
             <SidebarHeaderLabel element="SIDECAR_HEADER_LABEL">Twilio Flex</SidebarHeaderLabel>
           </SidebarHeader>
           <SidebarBody element="SIDECAR_NAVIGATION">
-            <div id={sidebarNavigationSkipLinkID} />
+            <SidebarNavigation aria-label="main">
+              <></>
+            </SidebarNavigation>
             <SidebarBetaBadge as="button" element="SIDECAR_BETA_BADGE">
               Beta
             </SidebarBetaBadge>

diff --git a/packages/paste-core/components/sidebar/stories/full-composition/console.stories.tsx b/packages/paste-core/components/sidebar/stories/full-composition/console.stories.tsx
@@ -76,12 +76,7 @@ export const Console: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <SidebarNavigation
-            aria-label={id}
-            hierarchical
-            hideItemsOnCollapse
-            sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
-          >
+          <SidebarNavigation aria-label={id} hierarchical hideItemsOnCollapse>
             <SidebarNavigationDisclosure>
               <SidebarNavigationDisclosureHeadingWrapper>
                 <SidebarNavigationDisclosureHeading icon={<ProductMessagingIcon decorative />} selected>

diff --git a/packages/paste-core/components/sidebar/stories/full-composition/flex.stories.tsx b/packages/paste-core/components/sidebar/stories/full-composition/flex.stories.tsx
@@ -59,7 +59,7 @@ export const Flex: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <SidebarNavigation aria-label={id} sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}>
+          <SidebarNavigation aria-label={id}>
             <SidebarNavigationItem
               href="https://google.com"
               selected

diff --git a/packages/paste-core/components/sidebar/stories/full-composition/segment.stories.tsx b/packages/paste-core/components/sidebar/stories/full-composition/segment.stories.tsx
@@ -69,12 +69,7 @@ export const Segment: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Segment</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <SidebarNavigation
-            aria-label={id}
-            hierarchical
-            hideItemsOnCollapse
-            sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
-          >
+          <SidebarNavigation aria-label={id} hierarchical hideItemsOnCollapse>
             <SidebarNavigationItem href="https://google.com" icon={<ProductHomeIcon decorative />}>
               Home
             </SidebarNavigationItem>

diff --git a/packages/paste-core/components/sidebar/stories/navigation.stories.tsx b/packages/paste-core/components/sidebar/stories/navigation.stories.tsx
@@ -78,12 +78,7 @@ export const Default: StoryFn = () => {
         </SidebarHeader>
         <SidebarBody>
           {/* Nav */}
-          <SidebarNavigation
-            aria-label={id}
-            sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
-            hierarchical
-            hideItemsOnCollapse
-          >
+          <SidebarNavigation aria-label={id} hierarchical hideItemsOnCollapse>
             <SidebarNavigationItem
               href="https://www.google.com"
               onClick={() => {
@@ -276,7 +271,7 @@ export const FlatCompact: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <SidebarNavigation aria-label={id} sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}>
+          <SidebarNavigation aria-label={id}>
             <SidebarNavigationItem
               href="https://www.google.com"
               onClick={() => {
@@ -364,12 +359,7 @@ export const HierarchicalCompact: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <SidebarNavigation
-            aria-label={id}
-            sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
-            hierarchical
-            hideItemsOnCollapse
-          >
+          <SidebarNavigation aria-label={id} hierarchical hideItemsOnCollapse>
             <SidebarNavigationItem
               href="https://www.google.com"
               onClick={() => {
@@ -528,7 +518,7 @@ export const StateHookDisclosure: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <SidebarNavigation aria-label={id} sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}>
+          <SidebarNavigation aria-label={id}>
             <SidebarNavigationDisclosure state={disclosure}>
               <SidebarNavigationDisclosureHeadingWrapper>
                 <SidebarNavigationDisclosureHeading icon={<ProductContactCenterTasksIcon decorative />} selected>
@@ -602,7 +592,7 @@ export const FlexExample: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <SidebarNavigation aria-label={id} sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}>
+          <SidebarNavigation aria-label={id}>
             <SidebarNavigationItem
               href="https://google.com"
               selected
@@ -691,12 +681,7 @@ export const SegmentExample: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Segment</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <SidebarNavigation
-            aria-label={id}
-            sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
-            hierarchical
-            hideItemsOnCollapse
-          >
+          <SidebarNavigation aria-label={id} hierarchical hideItemsOnCollapse>
             <SidebarNavigationItem href="https://google.com" icon={<ProductHomeIcon decorative />}>
               Home
             </SidebarNavigationItem>

diff --git a/packages/paste-core/components/sidebar/stories/overlay.stories.tsx b/packages/paste-core/components/sidebar/stories/overlay.stories.tsx
@@ -15,6 +15,7 @@ import {
   SidebarFooter,
   SidebarOverlayContentWrapper,
   SidebarBody,
+  SidebarNavigation,
 } from '../src';
 
 // eslint-disable-next-line import/no-default-export
@@ -44,7 +45,9 @@ export const Default: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <div id={sidebarNavigationSkipLinkID} />
+          <SidebarNavigation aria-label="main">
+            <></>
+          </SidebarNavigation>
         </SidebarBody>
         <SidebarFooter>
           <SidebarCollapseButton
@@ -92,7 +95,9 @@ export const Compact: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <div id={sidebarNavigationSkipLinkID} />
+          <SidebarNavigation aria-label="main">
+            <></>
+          </SidebarNavigation>
         </SidebarBody>
         <SidebarFooter>
           <Box padding="space70">

diff --git a/packages/paste-core/components/sidebar/stories/push.stories.tsx b/packages/paste-core/components/sidebar/stories/push.stories.tsx
@@ -15,6 +15,7 @@ import {
   SidebarFooter,
   SidebarPushContentWrapper,
   SidebarBody,
+  SidebarNavigation,
 } from '../src';
 
 // eslint-disable-next-line import/no-default-export
@@ -44,7 +45,9 @@ export const Default: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <div id={sidebarNavigationSkipLinkID} />
+          <SidebarNavigation aria-label="main">
+            <></>
+          </SidebarNavigation>
         </SidebarBody>
         <SidebarFooter>
           <SidebarCollapseButton
@@ -93,7 +96,9 @@ export const Compact: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Console</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <div id={sidebarNavigationSkipLinkID} />
+          <SidebarNavigation aria-label="main">
+            <></>
+          </SidebarNavigation>
         </SidebarBody>
         <SidebarFooter>
           <SidebarCollapseButton

diff --git a/packages/paste-core/components/topbar/stories/topbar.stories.tsx b/packages/paste-core/components/topbar/stories/topbar.stories.tsx
@@ -16,6 +16,7 @@ import {
   SidebarCollapseButton,
   SidebarFooter,
   SidebarBody,
+  SidebarNavigation,
 } from '@twilio-paste/sidebar';
 import {
   UserDialog,
@@ -62,7 +63,9 @@ export const PushDefaultTopbar: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <div id={sidebarNavigationSkipLinkID} />
+          <SidebarNavigation aria-label="main">
+            <></>
+          </SidebarNavigation>
         </SidebarBody>
         <SidebarFooter>
           <SidebarCollapseButton
@@ -121,7 +124,9 @@ export const PushCompactTopbar: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <div id={sidebarNavigationSkipLinkID} />
+          <SidebarNavigation aria-label="main">
+            <></>
+          </SidebarNavigation>
         </SidebarBody>
         <SidebarFooter>
           <SidebarCollapseButton
@@ -173,7 +178,9 @@ export const OverlayDefaultTopbar: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <div id={sidebarNavigationSkipLinkID} />
+          <SidebarNavigation aria-label="main">
+            <></>
+          </SidebarNavigation>
         </SidebarBody>
         <SidebarFooter>
           <SidebarCollapseButton
@@ -229,7 +236,9 @@ export const OverlayCompactTopbar: StoryFn = () => {
           <SidebarHeaderLabel>Twilio Flex</SidebarHeaderLabel>
         </SidebarHeader>
         <SidebarBody>
-          <div id={sidebarNavigationSkipLinkID} />
+          <SidebarNavigation aria-label="main">
+            <></>
+          </SidebarNavigation>
         </SidebarBody>
         <SidebarFooter>
           <SidebarCollapseButton