[refs #96] Refactor skip link JS to an ES6 module

Refactor the skip link JavaScript so that it can be imported as a module, using ES6 syntax.
nhsuk · mcheung-nhs · Dec 17, 2018 · Nov 27, 2018 · Nov 27, 2018 · Nov 28, 2018
commit 67743a1fcb96cb8811d4e9307db30208615f4fe8
diff --git a/gulpfile.js b/gulpfile.js
@@ -64,7 +64,6 @@ function compileJS() {
       'packages/components/header/typeahead.bundle.min.js',
       'packages/components/header/nhs.typeahead.js',
       'packages/components/header/header.js',
-      'packages/components/skip-link/skip-link.js'
     ])
     .pipe(concat('nhsuk.js'))
     .pipe(gulp.dest('dist/'));

diff --git a/packages/components/skip-link/skip-link.js b/packages/components/skip-link/skip-link.js
@@ -1,38 +1,40 @@
-// When using VoiceOver on iOS, focus remains on the skip link anchor when
-// selected so the next focusable element is not at the jumped to area.
-// This Javascript hack focuses on the first H1 header (if one exists, which it
-// should) by adding tabindex = -1 to it and then removes it when focus is
-// off it.
-
-document.addEventListener('DOMContentLoaded', function() {
-
-  var skip = {
-
-    link: document.querySelector('.nhsuk-skip-link'),
-    header: document.getElementsByTagName('H1')[0],
-
-    doFocus: function(e) {
-      this.header.setAttribute('tabIndex', '-1');
-      this.header.focus();
-    },
-
-    doLeave: function(e) {
-      this.header.removeAttribute('tabIndex');
-    }
-
+/*
+ * Skip link
+ *
+ * When using VoiceOver on iOS, focus remains on the skip link anchor
+ * when elected so the next focusable element is not at the jumped to area.
+ * This Javascript hack focuses on the first page <h1> element
+ * (if one exists, which it should) by adding tabindex = -1 to it and
+ * then removes it when focus is off it.
+ */
+
+const skipLinkElement = document.querySelector('.nhsuk-skip-link');
+const headingElement = document.getElementsByTagName('H1')[0];
+
+function addFocus() {
+  headingElement.setAttribute('tabIndex', '-1');
+  headingElement.focus();
+}
+
+function removeFocus() {
+  headingElement.removeAttribute('tabIndex');
+}
+
+function handleSkipLink() {
+  if (skipLinkElement && headingElement) {
+    skipLinkElement.addEventListener('click', addFocus);
   }
+}
 
-  if (skip.link && skip.header) {
-
-    skip.link.addEventListener('click', function(e) {
-      e.preventDefault();
-      skip.doFocus(e);
-    });
-
-    skip.header.addEventListener('blur', function(e) {
-      skip.doLeave(e);
-    });
-
+function handleHeader() {
+  if (skipLinkElement && headingElement) {
+    headingElement.addEventListener('blur', removeFocus);
   }
+}
+
+function skipLink() {
+  handleSkipLink();
+  handleHeader();
+}
 
-})
+export default skipLink;
diff --git a/packages/nhsuk.js b/packages/nhsuk.js
@@ -1,3 +1,7 @@
+// Component imports
 import feedbackBanner from './components/feedback-banner/feedback-banner';
+import skipLink from './components/skip-link/skip-link';
 
+// Initialize components
 feedbackBanner(3000);
+skipLink();