diff --git a/ui/.storybook/preview-head.html b/ui/.storybook/preview-head.html
index bd6bd0f..f623362 100644
--- a/ui/.storybook/preview-head.html
+++ b/ui/.storybook/preview-head.html
@@ -6,13 +6,3 @@
 
 <!-- Overrides for Storybook Docs and UI. -->
 <link href="storybook-overrides.css" rel="stylesheet" />
-
-<script>
-    // Custom event for Parcel UI to listen to in order to instantiate UI component JavaScript when Storybook iframe loads for each story.
-    const eventStorybook = new Event('StorybookLoaded');
-
-    document.addEventListener('DOMContentLoaded', () => {
-        console.log('Storybook DOMContentLoaded... ');
-        window.dispatchEvent(eventStorybook);
-    }, false);
-</script>
diff --git a/ui/package.json b/ui/package.json
index 7606dc7..78dd7a5 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -2,7 +2,7 @@
     "name": "web-ui-boilerplate",
     "description": "UI boilerplate for websites/webapps using vanilla HTML/CSS/JavaScript, powered by Storybook, bundled by Parcel.",
     "author": "basher",
-    "version": "3.1.3",
+    "version": "3.1.4",
     "license": "ISC",
     "repository": {
         "type": "git",
diff --git a/ui/src/javascript/index.ts b/ui/src/javascript/index.ts
index 86f88af..cc2989e 100644
--- a/ui/src/javascript/index.ts
+++ b/ui/src/javascript/index.ts
@@ -14,11 +14,3 @@ if (browserSupportsAllFeatures()) {
         .then(() => uiInit())
         .catch((e) => console.error(e));
 }
-
-// Run UI module instantition ONCE when each Storybook story has loaded.
-const storybookUIinit = (): void => {
-    console.log('Storybook custom event fired...');
-    uiInit();
-};
-// 'StorybookLoaded' is an event that is dispatched from Storybook.
-window.addEventListener('StorybookLoaded', storybookUIinit, false);
diff --git a/ui/stories/1. Storybook Intro/1-Introduction.mdx b/ui/stories/1. Storybook Intro/1-Introduction.mdx
index 17a78aa..ef10c4a 100644
--- a/ui/stories/1. Storybook Intro/1-Introduction.mdx	
+++ b/ui/stories/1. Storybook Intro/1-Introduction.mdx	
@@ -18,7 +18,7 @@ Just plain vanilla code. 😜
 
 ## Code authoring guidelines & accessibility
 - All UI components are authored with **semantic HTML5** markup.
-- Some components are **progressively enhanced** with JavaScript and `WAI-ARIA` as appropriate. <sup>1</sup>
+- Some components are **progressively enhanced** with JavaScript and `WAI-ARIA` as appropriate. <sup>1, 2</sup>
 - The HTML markup uses the `BEM` methodology to provide CSS namespacing.
 - Visual styling is minimal & unopinionated.
 - The CSS is authored with as little code as necessary, making full use of the CSS cascade and inheritance.
@@ -27,6 +27,9 @@ Just plain vanilla code. 😜
 > <sup>1</sup>
 > The JavaScript-enhanced components have been authored as [HTML Web Components](/docs/web-components-or-custom-elements-using-web-components--docs), also known as `custom elements`.
 
+> <sup>2</sup>
+> To test how these enhanced components behave with JavaScript disabled, comment out the call to `uiInit()` in `src/javascript/index.ts`.
+
 ### Accessibility testing
 Storybook comes with 2 default accessibility testing tools:
 - `Accessibility addon`. This is in the Storybook `addons` toolbar, and is built on the same [AxeCore API](https://www.deque.com/axe/) that Lighthouse uses.
diff --git a/ui/stories/1. Storybook Intro/2-known-Issues.mdx b/ui/stories/1. Storybook Intro/2-known-Issues.mdx
deleted file mode 100644
index 3d7ea5d..0000000
--- a/ui/stories/1. Storybook Intro/2-known-Issues.mdx	
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Web UI Storybook/Known Storybook Issues" />
-
-# Known Storybook issues
-
-## 1. Component JavaScript doesn't always fire in `docs` mode.
-That's actually OK, as it shows what is rendered if JavaScript is disabled or broken.
-
-## 2. Storybook fires `DOMContentLoaded` event more than once.
-See [this issue on Github](https://github.com/storybookjs/storybook/issues/15753).
-
-To mitigate this, a `custom Storybook event` is fired in `.storybook\preview-head.html`. This event is handled in `src/javascript/index.ts` in order to re-initialise the JavaScript modules for some of the components.
-
-If JavaScript appears not to be working correctly, open the `docs` page then go back to `story` page.
diff --git a/ui/stories/2. Design System/Colours/Colours.stories.js b/ui/stories/2. Design System/Colours/Colours.stories.js
index a600266..823010f 100644
--- a/ui/stories/2. Design System/Colours/Colours.stories.js	
+++ b/ui/stories/2. Design System/Colours/Colours.stories.js	
@@ -80,8 +80,7 @@ ${
 </div>
 
 ${
-    // Output computed HSL colours when 'StorybookLoaded' custom event has fired.
-    window.addEventListener('StorybookLoaded',
+    window.addEventListener('DOMContentLoaded',
         () => {
             const styledSpan = document.querySelectorAll('.styled');
             styledSpan.forEach((span) => {
diff --git a/ui/stories/6. Web Components Or Custom Elements/WebComponents.mdx b/ui/stories/6. Web Components Or Custom Elements/WebComponents.mdx
index 0fb3c35..10d3ce2 100644
--- a/ui/stories/6. Web Components Or Custom Elements/WebComponents.mdx	
+++ b/ui/stories/6. Web Components Or Custom Elements/WebComponents.mdx	
@@ -10,7 +10,7 @@ import { Meta } from '@storybook/blocks';
 > <sup>1</sup>
 > Global CSS is inherited by the Web Components because they contain regular HTML markup. Additional CSS scoping & encapsulation is provided by the custom element names, enabling styles not to "leak" out into the global scope.
 
-> <sup>2</sup> <sup>3</sup>
+> <sup>2, 3</sup>
 > The [`<webui-ajax-loader>`](/docs/web-components-or-custom-elements-webui-ajax-loader--docs) Web Component is entirely constructed via JavaScript, and uses the shadow DOM.
 
 ## Additional reading