Merge pull request #195 from indiana-university/feature/fix-skip-to-c…

…ontent fix(Accessibility): Fix "Skip To Content" Link
indiana-university · Apr 12, 2019 · cf94cf2 · cf94cf2
2 parents 9466bec + 5908c6d
commit cf94cf2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/components/Header/Header.test.tsx b/src/components/Header/Header.test.tsx
@@ -35,7 +35,7 @@ describe('<Header />', () => {
             const skipLink = cut.find('.rvt-skip-link')
             expect(skipLink).toHaveLength(1);
             expect(skipLink.props().href).toEqual(`${document.URL}#main-content`);
-        })
+        });
     });
 
     describe('Including header navigation', () => {

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -23,9 +23,21 @@ const componentClass = "rvt-header";
 const HeaderComponent: React.SFC<HeaderProps & React.HTMLAttributes<HTMLDivElement>> = ({ children, className, title, ...attrs }) => {
     const identity = findFirstChildOfType(children, Identity.displayName);
     const navigation = findFirstChildOfType(children, Navigation.displayName);
+    let mainContentUrl = document.URL;
+    const anchorCharacter = '#';
+    const mainContentAnchor = 'main-content'
+    if (mainContentUrl.indexOf(anchorCharacter) >= 0) {
+        // Split on any anchors and filter them out
+        const [baseUrl, ...params] = mainContentUrl.split(/\s?(#[a-zA-Z0-9-]+)/).filter(string => !string.startsWith(anchorCharacter));
+        // Rejoin the URL with our anchor and any params
+        mainContentUrl = [baseUrl, `${anchorCharacter}${mainContentAnchor}`, ...params].join('');
+    } else {
+        mainContentUrl = `${mainContentUrl}${anchorCharacter}${mainContentAnchor}`;
+    }
+
     return (
         <header {...attrs} className={classNames(componentClass, className)} role="banner">
-            <a className="rvt-skip-link" href={`${document.URL}#main-content`}>Skip to content</a>
+            <a className="rvt-skip-link" href={mainContentUrl}>Skip to content</a>
             <div className="rvt-header__trident">
                 <Icon name="trident-header" />
             </div>