Migrate initSkipLink to typescript, add unit tests & JSDOC

- Additionally clean up the exports and imports to be sorted & align with named export usage
- Fixes #9541

CHANGELOG.txt

@@ -18,6 +18,7 @@ Changelog
  * Clean up Prettier & Eslint usage for search promotions formset JS file (LB (Ben Johnston))
  * Ensure that translation file generation ignores JavaScript unit tests and clean up unit tests for Django gettext utils (LB (Ben Johnston))
  * Migrated `initButtonSelects` from core.js to own TypesScript file and add unit tests (Loveth Omokaro)
+ * Migrated `initSkipLink` util to TypeScript and add JSDoc & unit tests (Juliet Adeboye)
  * Clean up some unused utility classes and migrate `unlist` to Tailwind utility class `w-list-none` (Loveth Omokaro)
  * Ensure that the `rebuild_references_index` command can run without console output if called with `--verbosity 0` (Omerzahid Ali, Aman Pandey)
  * Fix: Make sure workflow timeline icons are visible in high-contrast mode (Loveth Omokaro)

client/src/entrypoints/admin/wagtailadmin.js

@@ -4,8 +4,8 @@ import {
   Icon,
   Portal,
   initDismissibles,
-  initUpgradeNotification,
   initSkipLink,
+  initUpgradeNotification,
 } from '../..';
 import { initModernDropdown, initTooltips } from '../../includes/initTooltips';
 import { initTabs } from '../../includes/tabs';

client/src/includes/initSkipLink.test.js

@@ -0,0 +1,22 @@
+import { initSkipLink } from './initSkipLink';
+
+describe('initSkipLink', () => {
+  document.body.innerHTML = `
+  <div><a id="test" class="skiplink button" href="#main" data-skiplink="">Skip to main content</a></div>
+  <main id="main">Main content</main>
+  `;
+
+  it('should add tabindex to make focusable and remove again', () => {
+    const mainElement = document.getElementById('main');
+
+    expect(document.activeElement).toBe(document.body);
+    expect(mainElement.getAttribute('tabindex')).toEqual(null);
+
+    initSkipLink();
+
+    document.getElementById('test').click();
+
+    expect(mainElement.getAttribute('tabindex')).toEqual('-1');
+    expect(document.activeElement).toEqual(mainElement);
+  });
+});

client/src/includes/initSkipLink.ts

@@ -1,17 +1,25 @@
+/**
+ * Appears at the top left corner of the admin page with the tab button is clicked.
+ * Used to provide an accessible skip button for keyboard control so that users can
+ * easily navigate to the main content without having to navigate a long list of navigation links.
+ *
+ * Inspired by https://github.com/selfthinker/dokuwiki_template_writr/blob/master/js/skip-link-focus-fix.js
+ *
+ */
 const initSkipLink = () => {
-  // Inspired by https://github.com/selfthinker/dokuwiki_template_writr/blob/master/js/skip-link-focus-fix.js
-
   const skiplink = document.querySelector('[data-skiplink]');
   const main = document.querySelector('main');
 
   const handleBlur = () => {
+    if (!main) return;
     main.removeAttribute('tabindex');
     main.removeEventListener('blur', handleBlur);
     main.removeEventListener('focusout', handleBlur);
   };
 
   const handleClick = () => {
-    main.setAttribute('tabindex', -1);
+    if (!main) return;
+    main.setAttribute('tabindex', '-1');
     main.addEventListener('blur', handleBlur);
     main.addEventListener('focusout', handleBlur);
     main.focus();
@@ -22,4 +30,4 @@ const initSkipLink = () => {
   }
 };
 
-export default initSkipLink;
+export { initSkipLink };

client/src/index.ts

@@ -9,6 +9,6 @@ export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSp
 export { default as Portal } from './components/Portal/Portal';
 export { default as PublicationStatus } from './components/PublicationStatus/PublicationStatus';
 export { default as Transition } from './components/Transition/Transition';
-export { default as initSkipLink } from './includes/initSkipLink';
 export { initDismissibles } from './includes/initDismissibles';
+export { initSkipLink } from './includes/initSkipLink';
 export { initUpgradeNotification } from './includes/initUpgradeNotification';

docs/releases/4.2.md

@@ -27,6 +27,7 @@ depth: 1
  * Add documentation for [`register_user_listing_buttons`](register_user_listing_buttons) hook (LB (Ben Johnston))
  * Ensure that translation file generation ignores JavaScript unit tests and clean up unit tests for Django gettext utils (LB (Ben Johnston))
  * Migrated `initButtonSelects` from core.js to own TypesScript file and add unit tests (Loveth Omokaro)
+ * Migrated `initSkipLink` util to TypeScript and add JSDoc & unit tests (Juliet Adeboye)
  * Clean up some unused utility classes and migrate `unlist` to Tailwind utility class `w-list-none` (Loveth Omokaro)
  * Ensure that the `rebuild_references_index` command can run without console output if called with `--verbosity 0` (Omerzahid Ali, Aman Pandey)