feat(react): add skip link to 2 column panel (#621)

dequelabs · Apr 12, 2022 · ee347cd · ee347cd
1 parent acd760d
commit ee347cd
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 1 deletion.
diff --git a/docs/patterns/components/TwoColumnPanel/index.js b/docs/patterns/components/TwoColumnPanel/index.js
@@ -320,6 +320,10 @@ function TwoColumnPanelDemo() {
               description: 'Label hide panel toggle',
               default: 'Hide Panel'
             },
+            skipLink: {
+              type: 'SkipLink',
+              description: 'A "Skip to Content" link',
+            },
             children
           }}
         />

diff --git a/packages/react/__tests__/src/components/TwoColumnPanel/index.js b/packages/react/__tests__/src/components/TwoColumnPanel/index.js
@@ -9,6 +9,7 @@ import {
   ColumnHeader,
   ColumnGroupHeader
 } from 'src/components/TwoColumnPanel';
+import SkipLink from 'src/components/SkipLink';
 import axe from '../../../axe';
 
 const sandbox = createSandbox();
@@ -103,6 +104,35 @@ test('should render collapsed TwoColumnPanel', () => {
   ).toBeFalsy();
 });
 
+test('should accept a skip link', () => {
+  const wrapper = mount(
+    <TwoColumnPanel skipLink={<SkipLink target="#my-target" />}>
+      <ColumnLeft>
+        <ColumnHeader>Sidebar</ColumnHeader>
+        <nav>
+          <ul>
+            <li>
+              <a href="/one">1</a>
+            </li>
+            <li>
+              <a href="/two">2</a>
+            </li>
+            <li>
+              <a href="/three">3</a>
+            </li>
+          </ul>
+        </nav>
+      </ColumnLeft>
+      <ColumnRight>
+        <ColumnHeader>Column Header</ColumnHeader>
+        <div id="my-target">1</div>
+      </ColumnRight>
+    </TwoColumnPanel>
+  );
+
+  expect(wrapper.find('.SkipLink').exists()).toBeTruthy();
+});
+
 test('should return no axe violations', async () => {
   const wrapper = mount(
     <TwoColumnPanel>

diff --git a/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx b/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx
@@ -12,13 +12,16 @@ import FocusTrap from 'focus-trap-react';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
 import ClickOutsideListener from '../ClickOutsideListener';
-import { ColumnLeft, ColumnRight } from './';
+import ColumnLeft from './ColumnLeft';
+import ColumnRight from './ColumnRight';
 import classnames from 'classnames';
+import SkipLink from '../SkipLink';
 
 interface TwoColumnPanelProps extends React.HTMLAttributes<HTMLDivElement> {
   initialCollapsed?: boolean;
   showCollapsedPanelLabel?: string;
   hideCollapsedPanelLabel?: string;
+  skipLink?: SkipLink;
 }
 
 const TwoColumnPanel = forwardRef<HTMLDivElement, TwoColumnPanelProps>(
@@ -29,6 +32,7 @@ const TwoColumnPanel = forwardRef<HTMLDivElement, TwoColumnPanelProps>(
       initialCollapsed = false,
       showCollapsedPanelLabel = 'Show Panel',
       hideCollapsedPanelLabel = 'Hide Panel',
+      skipLink = null,
       ...props
     },
     ref
@@ -240,6 +244,7 @@ const TwoColumnPanel = forwardRef<HTMLDivElement, TwoColumnPanelProps>(
           onClickOutside={handleClickOutside}
           target={columnLeftRef.current as HTMLElement}
         />
+        {isCollapsed ? null : skipLink}
         {showPanel ? ColumnLeftComponent : null}
         {ColumnRightComponent}
       </div>

diff --git a/packages/styles/two-column-panel.css b/packages/styles/two-column-panel.css
@@ -276,4 +276,8 @@
   .TwoColumnPanel--hide .TwoColumnPanel__Left {
     transform: translateX(-10vw);
   }
+
+  .TwoColumnPanel > .SkipLink {
+    display: none;
+  }
 }