From 1231ff240e6913e5cb03b8c5b1cb5fc9f9637ce3 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Thu, 6 Jan 2022 22:16:31 +0000
Subject: [PATCH 01/49] Initial commit

---
 packages/gallery/.npmignore                   |   7 +
 packages/gallery/README.md                    | 163 ++++++++++++
 packages/gallery/example/src/favicon.ico      | Bin 0 -> 1150 bytes
 packages/gallery/example/src/index.html       |  34 +++
 packages/gallery/example/src/js/index.js      |   3 +
 packages/gallery/example/webpack.config.js    |  37 +++
 packages/gallery/jest.config.js               |  11 +
 packages/gallery/package.json                 |  32 +++
 packages/gallery/src/index.js                 |  27 ++
 packages/gallery/src/lib/constants.js         |  11 +
 packages/gallery/src/lib/defaults/index.js    |  10 +
 .../gallery/src/lib/defaults/templates.js     |  48 ++++
 packages/gallery/src/lib/dom.js               | 232 ++++++++++++++++++
 packages/gallery/src/lib/factory.js           |  25 ++
 packages/gallery/src/lib/store.js             |  25 ++
 packages/gallery/src/lib/utils.js             |   6 +
 16 files changed, 671 insertions(+)
 create mode 100644 packages/gallery/.npmignore
 create mode 100644 packages/gallery/README.md
 create mode 100644 packages/gallery/example/src/favicon.ico
 create mode 100644 packages/gallery/example/src/index.html
 create mode 100644 packages/gallery/example/src/js/index.js
 create mode 100644 packages/gallery/example/webpack.config.js
 create mode 100644 packages/gallery/jest.config.js
 create mode 100644 packages/gallery/package.json
 create mode 100644 packages/gallery/src/index.js
 create mode 100644 packages/gallery/src/lib/constants.js
 create mode 100644 packages/gallery/src/lib/defaults/index.js
 create mode 100644 packages/gallery/src/lib/defaults/templates.js
 create mode 100644 packages/gallery/src/lib/dom.js
 create mode 100644 packages/gallery/src/lib/factory.js
 create mode 100644 packages/gallery/src/lib/store.js
 create mode 100644 packages/gallery/src/lib/utils.js

diff --git a/packages/gallery/.npmignore b/packages/gallery/.npmignore
new file mode 100644
index 00000000..97d59ca6
--- /dev/null
+++ b/packages/gallery/.npmignore
@@ -0,0 +1,7 @@
+.DS_Store
+*.log
+src
+__tests__
+example
+coverage
+jest.config.js
\ No newline at end of file
diff --git a/packages/gallery/README.md b/packages/gallery/README.md
new file mode 100644
index 00000000..fdcdd6ff
--- /dev/null
+++ b/packages/gallery/README.md
@@ -0,0 +1,163 @@
+# Modal Gallery
+
+Accessible modal image gallery
+
+---
+
+## Usage
+
+Install the package
+```
+npm i -S @stormid/modal-gallery
+```
+
+A modal gallery can be created with DOM elements, or programmatically created from a JS Object.
+
+From HTML
+```
+<ul>
+    <li>
+        <a class="js-modal-gallery" href="//placehold.it/500x500" data-title="Image 1" data-description="Description 1" data-srcset="//placehold.it/800x800 800w, //placehold.it/500x500 320w">Image one</a>
+    </li>
+    <li>
+        <a class="js-modal-gallery" href="//placehold.it/300x800" data-title="Image 2" data-description="Description 2" data-srcset="//placehold.it/500x800 800w, //placehold.it/300x500 320w">Image two</a
+    ></li>
+</ul>
+```
+
+Initialise the module
+```
+import modalGallery from '@stormid/modal-gallery';
+
+const [ gallery ] = modalGallery('.js-modal-gallery');
+```
+
+Example MVP CSS
+```
+.modal-gallery__outer {
+    display: none;
+    opacity: 0;
+    position: fixed;
+    overflow: hidden;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background-color: rgba(0,0,0,.9);
+    transition: opacity 500ms ease;
+}
+.modal-gallery__outer.is--active {
+    display: block;
+    opacity: 1;
+}
+.modal-gallery__img-container {
+    text-align:center;
+}
+.modal-gallery__img {
+    margin:80px auto 0 auto;
+    max-width:80%;
+    max-height: 80vh;
+}
+.modal-gallery__item {
+    position: fixed;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    opacity:0;
+    visibility:hidden;
+}
+.modal-gallery__item.is--active {
+    opacity:1;
+    visibility:visible;
+}
+.modal-gallery__next {
+    position: fixed;
+    bottom:50%;
+    right:25px;
+}
+.modal-gallery__previous {
+    position: fixed;
+    bottom:50%;
+    left:25px;
+}
+.modal-gallery__close {
+    position: fixed;
+    top:15px;
+    right:25px;
+}
+.modal-gallery__close:hover svg,
+.modal-gallery__previous:hover svg,
+.modal-gallery__next:hover svg{
+    opacity:.8
+}
+.modal-gallery__total {
+    position: absolute;
+    bottom:25px;
+    right:25px;
+    color:#fff
+}
+.modal-gallery__details {
+    position: fixed;
+    bottom:0;
+    left:120px;
+    right:120px;
+    padding:0 0 40px 0;
+    color:#fff;
+}
+```
+
+
+To create from a JavaScript Object
+```
+import modalGallery from '@stormid/modal-gallery';
+
+const [ gallery ] = modalGallery([
+    {
+        src: '//placehold.it/500x500',
+        srcset:'//placehold.it/800x800 800w, //placehold.it/500x500 320w',
+        title: 'Image 1',
+        description: 'Description 1'
+    },
+    {
+        src: '//placehold.it/300x800',
+        srcset:'//placehold.it/500x800 800w, //placehold.it/300x500 320w',
+        title: 'Image 2',
+        description: 'Description 2'
+    }
+]);
+
+//e.g. Open the gallery at the second item (index 1) by clicking on a button with the className 'js-modal-gallery__trigger'
+document.querySelector('.js-modal-gallery__trigger').addEventListener('click', () => gallery.open(1));
+```
+
+## Options
+
+```
+{
+    fullscreen: false, //show gallery in fullscreen
+    preload: false, //preload all images
+    totals: true,   //show totals
+    scrollable: false, //modal is scrollable
+    single: false, //single image or gallery
+}
+```
+
+## API
+
+modalGallery() returns an array of instances. Each instance exposes the interface
+```
+{
+    getState, a Function that returns the current state Object
+    open, a Function that opens the modal gallery
+}
+```
+
+## Tests
+```
+npm t
+```
+
+## License
+MIT
\ No newline at end of file
diff --git a/packages/gallery/example/src/favicon.ico b/packages/gallery/example/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..23d3ceaa0662184438dc549f2066dab7b236eca7
GIT binary patch
literal 1150
zcmaJ<J&RgV5WTyK%PNYfq!Uw#7}ul`wGj~u!P2kFN?k-nv=VI0Uq}cc!O}+1A0Px_
zYXuQEB&dbL+FQiPE*MT`c6oB2k=)0;8RnidcfN$UpwDa;^nWdiS|MHuAzUQnBF~GT
zln``xdH@Jnrqk(7rBeCmcDujp_4;2dWZze-)ep1T?2U|-?frg#RVtM}U0z=Pp*L_&
z_>N;U_LLhAhll4l=X}v<^qU-`SS)^4aCW;LEJmXdi9`a0LIHli|DSv~56*$=^~yQt
zayhKmYmCQZ)M_=P(`mHZZS;CQXf&E*9O4|fA6&EYHtTx5j)#W_*le~Vmi@!w5UEs3
z<>Q{ZT&|xoztw6XpU<ms4u=D))e4P9L*@5)Joh@C?osBO&1P7wR!~pS?RK$PET~N2
z>FEhxuUEyV+5SG|n@lDwm&<3);c&owK1Zk1K_C!NarsT=JDpBd{+Ub$+wB&~WD*90
z;mBz=n@3y8mv>B_9s6Uk82bIb3L6XtpX*n6isl(kCX;va{Ipsv27>|0<uZIeA8v1N
zvDs`e8jVyjnM3otp+W^=zA7<UQ%{i1X2G-IK3Xgm#N%-lpXbh87TU$@P$+aK$M~Ne
ziA09-{&I}nZg)+2e35H8jlp-^uT!p)2W#rbTgLES@oZVh{=xb3uFF`qA00xhuY|bM
T2=V^nMd;nLN4aM#bC~-VJEF?X

literal 0
HcmV?d00001

diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
new file mode 100644
index 00000000..8baf553e
--- /dev/null
+++ b/packages/gallery/example/src/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+  <head>
+    <title>StormID</title>
+    <style>
+        * {
+            margin:0;
+            padding:0;
+            box-sizing:border-box;
+            font-family: sans-serif;
+        }
+        html,
+        body {
+            height:100%;
+        }
+        img {
+            display: block;
+        }
+		*:focus {
+			outline: 1px solid red;
+		}
+        button {
+            background:#191919;
+            color:#fff;
+            padding:8px;
+            display:inline-block;
+            font-size:1rem;
+            border:0 none;
+        }
+    </style>
+  </head>
+  <body>
+  </body>
+</html>
diff --git a/packages/gallery/example/src/js/index.js b/packages/gallery/example/src/js/index.js
new file mode 100644
index 00000000..dec2ee07
--- /dev/null
+++ b/packages/gallery/example/src/js/index.js
@@ -0,0 +1,3 @@
+import gallery from '../../../src';
+    
+gallery('.js-gallery');
\ No newline at end of file
diff --git a/packages/gallery/example/webpack.config.js b/packages/gallery/example/webpack.config.js
new file mode 100644
index 00000000..c6b42ad2
--- /dev/null
+++ b/packages/gallery/example/webpack.config.js
@@ -0,0 +1,37 @@
+const path = require('path');
+const webpack = require('webpack');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const pkg = require('../package.json');
+
+module.exports = {
+    entry: './example/src/js/index.js',
+    output: {
+        filename: 'app.js',
+        path: path.resolve(__dirname, './build')
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new CleanWebpackPlugin(['./build']),
+        new HtmlWebpackPlugin({
+            title: pkg.name,
+            template: './example/src/index.html',
+            filename: 'index.html'
+        })
+    ],
+    module: {
+        rules: [{
+            test: /\.js$/,
+            exclude: /(node_modules|bower_components)/,
+            use: {
+                loader: 'babel-loader',
+            }
+        },
+        {
+            test: /\.(ico)$/,
+            use: {
+                loader: 'file-loader'
+            }
+        }]
+    }
+};
diff --git a/packages/gallery/jest.config.js b/packages/gallery/jest.config.js
new file mode 100644
index 00000000..7b7f035b
--- /dev/null
+++ b/packages/gallery/jest.config.js
@@ -0,0 +1,11 @@
+const base = require('../../tools/jest/config.base.js');
+const pack = require('./package');
+
+module.exports = {
+    ...base,
+    transform: {
+        '^.+\\.js$': '../../tools/jest/babel-jest-wrapper.js'
+    },
+    displayName: pack.name,
+    name: pack.name
+};
\ No newline at end of file
diff --git a/packages/gallery/package.json b/packages/gallery/package.json
new file mode 100644
index 00000000..5b541a0b
--- /dev/null
+++ b/packages/gallery/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@stormid/modal-gallery",
+  "version": "1.0.0-y.0",
+  "description": "Accessible modal image gallery",
+  "author": "stormid",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": "https://github.com/stormid/components/tree/master/packages/modal-gallery",
+  "private": false,
+  "main": "dist/index.js",
+  "source": "src/index.js",
+  "module": "dist/index.modern.mjs",
+  "unpkg": "dist/index.umd.js",
+  "browser": "dist/index.umd.js",
+  "keywords": [
+    "stormid",
+    "component",
+    "ui",
+    "modal",
+    "gallery"
+  ],
+  "scripts": {
+    "build": "npx microbundle --name ModalGallery",
+    "test": "node_modules/.bin/jest --coverage",
+    "dev": "webpack-dev-server --config example/webpack.config.js --mode development",
+    "prod": "webpack --config example/webpack.config.js --mode production",
+    "prepublish": "npm run -s build"
+  },
+  "gitHead": "9042db4005411c4360ba3e8188e03333c10098f2"
+}
diff --git a/packages/gallery/src/index.js b/packages/gallery/src/index.js
new file mode 100644
index 00000000..60a5ed67
--- /dev/null
+++ b/packages/gallery/src/index.js
@@ -0,0 +1,27 @@
+import factory from './lib/factory';
+
+export default (src, options) => {
+    if (!src.length) return void console.warn('Gallery cannot be initialised, no images found');
+
+    let items;
+
+    if (typeof src === 'string'){
+        const els = [].slice.call(document.querySelectorAll(src));
+
+        if (!els.length) return void console.warn('Gallery cannot be initialised, no images found');
+		
+        items = els.map(el => ({
+            trigger: el,
+            src: el.getAttribute('href'),
+            srcset: el.getAttribute('data-srcset') || null,
+            sizes: el.getAttribute('data-sizes') || null,
+            title: el.getAttribute('data-title') || '',
+            description: el.getAttribute('data-description') || ''
+        }));
+    } else items = src;
+
+    return Object.create(factory({
+        items,
+        settings: { ...defaults, ...options }
+    }));
+};
\ No newline at end of file
diff --git a/packages/gallery/src/lib/constants.js b/packages/gallery/src/lib/constants.js
new file mode 100644
index 00000000..c6f1b11d
--- /dev/null
+++ b/packages/gallery/src/lib/constants.js
@@ -0,0 +1,11 @@
+/* istanbul ignore file */
+export const KEY_CODES = {
+    TAB: 9,
+    ESC: 27,
+    LEFT: 37,
+    RIGHT: 39
+};
+
+export const TRIGGER_EVENTS = ['click', 'keydown' ];
+
+export const FOCUSABLE_ELEMENTS = ['a[href]', 'area[href]', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex="-1"])'];
\ No newline at end of file
diff --git a/packages/gallery/src/lib/defaults/index.js b/packages/gallery/src/lib/defaults/index.js
new file mode 100644
index 00000000..00bd624e
--- /dev/null
+++ b/packages/gallery/src/lib/defaults/index.js
@@ -0,0 +1,10 @@
+/* istanbul ignore file */
+import * as templates from './templates';
+
+export default {
+    preload: false,
+    totals: true,
+    start: 0,
+    container: '.js-gallery__container',
+    templates
+};
\ No newline at end of file
diff --git a/packages/gallery/src/lib/defaults/templates.js b/packages/gallery/src/lib/defaults/templates.js
new file mode 100644
index 00000000..16c1a65c
--- /dev/null
+++ b/packages/gallery/src/lib/defaults/templates.js
@@ -0,0 +1,48 @@
+/* istanbul ignore file */
+import { sanitize } from '../utils';
+
+export const container = () => {
+    const container = document.createElement('div');
+    container.className = 'gallery__container';
+
+    return container;
+};
+
+export const overlayInner = (buttons, items) =>  `<div class="modal-gallery__inner js-modal-gallery__inner" role="group" aria-roledescription="carousel">
+                                    <div class="modal-gallery__content js-modal-gallery__content" aria-atomic="false" aria-live="polite">
+                                        ${items}
+                                    </div>
+                                </div>
+                                ${buttons}
+                                <button class="js-modal-gallery__close modal-gallery__close" aria-label="Close">
+                                    <svg focusable="false" aria-hidden="true" width="30" height="30" stroke="#fff">
+                                        <g stroke-width="4">
+                                            <line x1="5" y1="5" x2="25" y2="25"/>
+                                            <line x1="5" y1="25" x2="25" y2="5"/>
+                                        </g>
+                                    </svg>
+                                </button>
+                                <div class="modal-gallery__total js-gallery-totals"></div>`;
+
+export const buttons = () => `<button class="js-modal-gallery__next modal-gallery__next" aria-label="Next">
+    <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">
+        <polyline points="14 10 34 30 14 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>
+    </svg>
+    </button>
+    <button class="js-modal-gallery__previous modal-gallery__previous" aria-label="Previous">
+    <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">
+        <polyline points="30 10 10 30 30 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>
+    </svg>
+</button>`;
+
+export const item = items => (details, i) => `<div class="modal-gallery__item js-modal-gallery__item" role="group" aria-roledescription="slide" aria-label="Image ${i + 1} of ${items.length}${items[i].title ? `, ${items[i].title}` : ''}">
+                                    <div class="modal-gallery__img-container js-modal-gallery__img-container"></div>
+                                    ${details}
+                                </div>`;
+
+export const details = item => item.title || item.description
+    ? `<div class="modal-gallery__details">
+                                    ${item.title ? `<h1 class="modal-gallery__title">${sanitize(item.title)}</h1>` : ``}
+                                    ${item.description ? `<div class="modal-gallery__description">${sanitize(item.description)}</div>` : ``}
+                                </div>`
+    : '';
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
new file mode 100644
index 00000000..00244e07
--- /dev/null
+++ b/packages/gallery/src/lib/dom.js
@@ -0,0 +1,232 @@
+import { TRIGGER_EVENTS, KEY_CODES } from './constants';
+import { getFocusableChildren } from './utils';
+
+export const initTriggers = Store => state => {
+    const { items, settings } = state;
+    
+    items.map((item, i) => {
+        if (!item.trigger) return;
+        TRIGGER_EVENTS.map(ev => {
+            item.trigger.addEventListener(ev, e => {
+                if ((e.keyCode && e.keyCode !== KEY_CODES.ENTER) || (e.which && e.which === 3)) return;
+                e.preventDefault();
+                open(Store)(i);
+            });
+        });
+    });
+    if (settings.preload) items.map(loadImage(Store));
+};
+
+const loadImage = Store => (item, i) => {
+    try {
+        const img = new Image();
+        const loaded = () => {
+            const { imageCache } = Store.getState();
+            imageCache[i] = img;
+            Store.dispatch({ imageCache });
+            writeImage(Store.getState(), i);
+        };
+        img.onload = loaded;
+        img.src = item.src;
+        if (img.complete) loaded();
+    } catch (e) {
+        console.warn(e);
+    }
+};
+
+const loadImages = Store => i => {
+    const { imageCache, items, dom } = Store.getState();
+    const indexes = [i];
+
+    if (items.length > 1) indexes.push(i === 0 ? items.length - 1 : i - 1);
+    if (items.length > 2) indexes.push(i === items.length - 1 ? 0 : i + 1);
+    indexes.forEach(idx => {
+        if (imageCache[idx] === undefined) {
+            dom.items[idx].classList.add('loading');
+            loadImage(Store)(items[idx], idx);
+        }
+    });
+
+};
+
+export const initUI = Store => state => {
+    const { settings, items, keyListener } = Store.getState();
+    //write UI to target container
+    //persistent UI:
+        //buttons?
+        //menu?
+        //totals?
+        //list
+    //items with image container, title, description
+    const container = document.querySelector(settings.container);
+    if (!container) return void console.warn(`Gallery cannot be initialised, ${settings.container} not found`);
+    container.appendChild(settings.templates.container());
+
+
+
+    // Store.dispatch({ dom: {
+    //     container,
+    //     items,
+    //     totals,
+    //     focusableChildren: getFocusableChildren(container),
+    //     lastFocused: document.activeElement
+    // } }, [
+    //     load(Store),
+    //     initUIButtons(Store),
+    //     writeTotals
+    // ]);
+};
+
+const load = Store => state => {
+    const { imageCache, items, current } = Store.getState();
+    if (Object.keys(imageCache).length === items.length) imageCache.map((img, i) => { writeImage(state, i); });
+    else loadImages(Store)(current);
+};
+
+const writeImage = (state, i) => {
+    const { dom, settings, items } = state;
+    if (!dom) return;
+    const imageContainer = dom.items[i].querySelector('.js-modal-gallery__img-container');
+    const img = imageContainer.querySelector('.modal-gallery__img');
+    if (img) return;
+    const imageClassName = settings.scrollable ? 'modal-gallery__img modal-gallery__img--scrollable' : 'modal-gallery__img';
+    const srcsetAttribute = dom.items[i].srcset ? ` srcset="${dom.items[i].srcset}"` : '';
+    const sizesAttribute = dom.items[i].sizes ? ` sizes="${dom.items[i].sizes}"` : '';
+    
+    imageContainer.innerHTML = `<img class="${imageClassName}" src="${items[i].src}" alt="${items[i].title}"${srcsetAttribute}${sizesAttribute}>`;
+    dom.items[i].classList.remove('loading');
+};
+
+const initUIButtons = Store => state => {
+    const { dom } = Store.getState();
+    const closeBtn = dom.overlay.querySelector('.js-modal-gallery__close');
+    TRIGGER_EVENTS.forEach(ev => {
+        closeBtn.addEventListener(ev, e => {
+            if ((e.keyCode && e.keyCode !== KEY_CODES.ENTER) || (e.which && e.which === 3)) return;
+            close(Store);
+        });
+    });
+
+    const previousBtn = dom.overlay.querySelector('.js-modal-gallery__previous');
+    const nextBtn = dom.overlay.querySelector('.js-modal-gallery__next');
+    if (!previousBtn && !nextBtn) return;
+
+    TRIGGER_EVENTS.forEach(ev => {
+        previousBtn && previousBtn.addEventListener(ev, e => {
+            if (e.keyCode && e.keyCode !== KEY_CODES.ENTER) return;
+            previous(Store);
+        });
+        nextBtn && nextBtn.addEventListener(ev, e => {
+            if (e.keyCode && e.keyCode !== KEY_CODES.ENTER) return;
+            next(Store);
+        });
+    });
+};
+
+export const keyListener = Store => e => {
+    const { isOpen } = Store.getState();
+    if (!isOpen) return;
+    switch (e.keyCode) {
+        case KEY_CODES.ESC:
+            close(Store);
+            break;
+        case KEY_CODES.TAB:
+            trapTab(Store, e);
+            break;
+        case KEY_CODES.LEFT:
+            previous(Store);
+            break;
+        case KEY_CODES.RIGHT:
+            next(Store);
+            break;
+        default:
+            break;
+    }
+};
+
+const trapTab = (Store, e) => {
+    const { dom } = Store.getState();
+    const focusedIndex = dom.focusableChildren.indexOf(document.activeElement);
+    if (e.shiftKey && focusedIndex === 0) {
+        /* istanbul ignore next */
+        e.preventDefault();
+        dom.focusableChildren[dom.focusableChildren.length - 1].focus();
+    }
+    /* istanbul ignore next */
+    if (!e.shiftKey && focusedIndex === dom.focusableChildren.length - 1) {
+        e.preventDefault();
+        dom.focusableChildren[0].focus();
+    }
+};
+
+const toggle = Store => state => {
+    const { dom, current, isOpen, settings } = Store.getState();
+    dom.overlay.classList.toggle('is--active');
+    dom.overlay.setAttribute('aria-hidden', !isOpen);
+    dom.overlay.setAttribute('tabindex', isOpen ? '0' : '-1');
+    isOpen !== null && dom.items[current].classList.add('is--active');
+    if (dom.focusableChildren && dom.focusableChildren.length > 0) window.setTimeout(() => { dom.focusableChildren[0].focus(); }, 0);
+
+    settings.fullscreen && toggleFullScreen(state);
+};
+
+const writeTotals = ({ dom, current, items, settings }) => {
+    if (settings.totals) dom.totals.innerHTML = `${current + 1}/${items.length}`;
+};
+
+const toggleFullScreen = ({ isOpen, dom }) => {
+    if (isOpen){
+        dom.overlay.requestFullscreen && dom.overlay.requestFullscreen();
+        /* istanbul ignore next */
+        dom.overlay.webkitRequestFullscreen && dom.overlay.webkitRequestFullscreen();
+        /* istanbul ignore next */
+        dom.overlay.mozRequestFullScreen && dom.overlay.mozRequestFullScreen();
+    } else {
+        /* istanbul ignore next */
+        document.exitFullscreen && document.exitFullscreen();
+        /* istanbul ignore next */
+        document.mozCancelFullScreen && document.mozCancelFullScreen();
+        /* istanbul ignore next */
+        document.webkitExitFullscreen && document.webkitExitFullscreen();
+    }
+};
+
+export const previous = Store => {
+    const { current, dom } = Store.getState();
+    const next = current === 0 ? dom.items.length - 1 : current - 1;
+    Store.dispatch({ current: next }, [
+        () => dom.items[current].classList.remove('is--active'),
+        () => dom.items[next].classList.add('is--active'),
+        load(Store),
+        writeTotals
+    ]);
+};
+
+export const next = Store => {
+    const { current, dom } = Store.getState();
+    const next = current === dom.items.length - 1 ? 0 : current + 1;
+    Store.dispatch({ current: next }, [
+        () => dom.items[current].classList.remove('is--active'),
+        () => dom.items[next].classList.add('is--active'),
+        load(Store),
+        writeTotals
+    ]);
+};
+
+export const close = Store => {
+    const { keyListener, lastFocused, dom } = Store.getState();
+    Store.dispatch({ current: null, isOpen: false }, [
+        () => document.removeEventListener('keydown', keyListener),
+        () => { if (lastFocused) lastFocused.focus(); },
+        // () => dom.items[current].classList.remove('is--active'),
+        // toggle(Store),
+        () => dom.overlay.parentNode.removeChild(dom.overlay)
+    ]);
+};
+
+export const open = Store => (i = 0) => {
+    Store.dispatch(
+        { current: i, isOpen: true },
+        [ initUI(Store) ]
+    );
+};
\ No newline at end of file
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
new file mode 100644
index 00000000..5274f634
--- /dev/null
+++ b/packages/gallery/src/lib/factory.js
@@ -0,0 +1,25 @@
+import { createStore } from './store';
+import { initTriggers, keyListener, open } from './dom';
+
+/* 
+ * @param settings, Object, merged defaults + options passed in as instantiation config to module default
+ * @param items, HTMLElement, DOM node to be toggled
+ *
+ * @returns Object, Modal Gallery API
+ */
+export default ({ items, settings }) => {
+    const Store = createStore();
+
+    Store.dispatch({
+        settings,
+        items,
+        imageCache: [],
+        current: settings.start,
+        keyListener: keyListener(Store)
+    }, [ initUI(Store)/*, initTriggers(Store)*/ ]);
+
+    return {
+        getState: Store.getState,
+        open: open(Store)
+    };
+};
\ No newline at end of file
diff --git a/packages/gallery/src/lib/store.js b/packages/gallery/src/lib/store.js
new file mode 100644
index 00000000..a77d5d19
--- /dev/null
+++ b/packages/gallery/src/lib/store.js
@@ -0,0 +1,25 @@
+export const createStore = () => {
+    //shared centralised validator state
+    let state = {};
+
+    //state getter
+    const getState = () => state;
+
+    /**
+     * Create next state by invoking reducer on current state
+     * 
+     * Execute side effects of state update, as passed in the update
+     * 
+     * @param type [String] 
+     * @param nextState [Object] New slice of state to combine with current state to create next state
+     * @param effects [Array] Array of side effect functions to invoke after state update (DOM, operations, cmds...)
+     */
+    const dispatch = (nextState, effects) => {
+        state = nextState ? ({ ...state, ...nextState }) : state;
+        
+        if (!effects) return;
+        effects.forEach(effect => effect(state));
+    };
+
+    return { dispatch, getState };
+};
\ No newline at end of file
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
new file mode 100644
index 00000000..2552908a
--- /dev/null
+++ b/packages/gallery/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { FOCUSABLE_ELEMENTS } from './constants';
+
+export const sanitize = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+export const getFocusableChildren = node => [].slice.call(node.querySelectorAll(FOCUSABLE_ELEMENTS.join(',')));
+

From 8640a1d672ba0694afa7b62c49246cc549a5143e Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Thu, 6 Jan 2022 23:18:16 +0000
Subject: [PATCH 02/49] Updates dom and initialisation

---
 packages/gallery/src/lib/constants.js         | 12 +--
 .../gallery/src/lib/defaults/templates.js     | 48 ++---------
 packages/gallery/src/lib/dom.js               | 82 +++----------------
 packages/gallery/src/lib/factory.js           |  8 +-
 packages/gallery/src/lib/utils.js             |  4 -
 5 files changed, 24 insertions(+), 130 deletions(-)

diff --git a/packages/gallery/src/lib/constants.js b/packages/gallery/src/lib/constants.js
index c6f1b11d..713af1cc 100644
--- a/packages/gallery/src/lib/constants.js
+++ b/packages/gallery/src/lib/constants.js
@@ -1,11 +1 @@
-/* istanbul ignore file */
-export const KEY_CODES = {
-    TAB: 9,
-    ESC: 27,
-    LEFT: 37,
-    RIGHT: 39
-};
-
-export const TRIGGER_EVENTS = ['click', 'keydown' ];
-
-export const FOCUSABLE_ELEMENTS = ['a[href]', 'area[href]', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex="-1"])'];
\ No newline at end of file
+export const TRIGGER_EVENTS = ['click', 'keydown' ];
\ No newline at end of file
diff --git a/packages/gallery/src/lib/defaults/templates.js b/packages/gallery/src/lib/defaults/templates.js
index 16c1a65c..90c884e6 100644
--- a/packages/gallery/src/lib/defaults/templates.js
+++ b/packages/gallery/src/lib/defaults/templates.js
@@ -1,48 +1,18 @@
 /* istanbul ignore file */
 import { sanitize } from '../utils';
 
-export const container = () => {
+export const ui = () => {
     const container = document.createElement('div');
     container.className = 'gallery__container';
 
+    // container.insertAdjacentHTML('beforeend', );
+
     return container;
 };
 
-export const overlayInner = (buttons, items) =>  `<div class="modal-gallery__inner js-modal-gallery__inner" role="group" aria-roledescription="carousel">
-                                    <div class="modal-gallery__content js-modal-gallery__content" aria-atomic="false" aria-live="polite">
-                                        ${items}
-                                    </div>
-                                </div>
-                                ${buttons}
-                                <button class="js-modal-gallery__close modal-gallery__close" aria-label="Close">
-                                    <svg focusable="false" aria-hidden="true" width="30" height="30" stroke="#fff">
-                                        <g stroke-width="4">
-                                            <line x1="5" y1="5" x2="25" y2="25"/>
-                                            <line x1="5" y1="25" x2="25" y2="5"/>
-                                        </g>
-                                    </svg>
-                                </button>
-                                <div class="modal-gallery__total js-gallery-totals"></div>`;
-
-export const buttons = () => `<button class="js-modal-gallery__next modal-gallery__next" aria-label="Next">
-    <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">
-        <polyline points="14 10 34 30 14 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>
-    </svg>
-    </button>
-    <button class="js-modal-gallery__previous modal-gallery__previous" aria-label="Previous">
-    <svg focusable="false" aria-hidden="true" width="44" height="60" stroke="#fff">
-        <polyline points="30 10 10 30 30 50" stroke-width="4" stroke-linecap="butt" fill="none" stroke-linejoin="round"/>
-    </svg>
-</button>`;
-
-export const item = items => (details, i) => `<div class="modal-gallery__item js-modal-gallery__item" role="group" aria-roledescription="slide" aria-label="Image ${i + 1} of ${items.length}${items[i].title ? `, ${items[i].title}` : ''}">
-                                    <div class="modal-gallery__img-container js-modal-gallery__img-container"></div>
-                                    ${details}
-                                </div>`;
-
-export const details = item => item.title || item.description
-    ? `<div class="modal-gallery__details">
-                                    ${item.title ? `<h1 class="modal-gallery__title">${sanitize(item.title)}</h1>` : ``}
-                                    ${item.description ? `<div class="modal-gallery__description">${sanitize(item.description)}</div>` : ``}
-                                </div>`
-    : '';
\ No newline at end of file
+// export const details = item => item.title || item.description
+//     ? `<div class="modal-gallery__details">
+//                                     ${item.title ? `<h1 class="modal-gallery__title">${sanitize(item.title)}</h1>` : ``}
+//                                     ${item.description ? `<div class="modal-gallery__description">${sanitize(item.description)}</div>` : ``}
+//                                 </div>`
+//     : '';
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 00244e07..c8af87c3 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -1,22 +1,3 @@
-import { TRIGGER_EVENTS, KEY_CODES } from './constants';
-import { getFocusableChildren } from './utils';
-
-export const initTriggers = Store => state => {
-    const { items, settings } = state;
-    
-    items.map((item, i) => {
-        if (!item.trigger) return;
-        TRIGGER_EVENTS.map(ev => {
-            item.trigger.addEventListener(ev, e => {
-                if ((e.keyCode && e.keyCode !== KEY_CODES.ENTER) || (e.which && e.which === 3)) return;
-                e.preventDefault();
-                open(Store)(i);
-            });
-        });
-    });
-    if (settings.preload) items.map(loadImage(Store));
-};
-
 const loadImage = Store => (item, i) => {
     try {
         const img = new Image();
@@ -50,7 +31,7 @@ const loadImages = Store => i => {
 };
 
 export const initUI = Store => state => {
-    const { settings, items, keyListener } = Store.getState();
+    const { settings, items } = Store.getState();
     //write UI to target container
     //persistent UI:
         //buttons?
@@ -60,8 +41,10 @@ export const initUI = Store => state => {
     //items with image container, title, description
     const container = document.querySelector(settings.container);
     if (!container) return void console.warn(`Gallery cannot be initialised, ${settings.container} not found`);
-    container.appendChild(settings.templates.container());
+    container.appendChild(settings.templates.ui());
+    
 
+    //if (settings.preload) items.map(loadImage(Store));
 
 
     // Store.dispatch({ dom: {
@@ -123,64 +106,19 @@ const initUIButtons = Store => state => {
     });
 };
 
-export const keyListener = Store => e => {
-    const { isOpen } = Store.getState();
-    if (!isOpen) return;
-    switch (e.keyCode) {
-        case KEY_CODES.ESC:
-            close(Store);
-            break;
-        case KEY_CODES.TAB:
-            trapTab(Store, e);
-            break;
-        case KEY_CODES.LEFT:
-            previous(Store);
-            break;
-        case KEY_CODES.RIGHT:
-            next(Store);
-            break;
-        default:
-            break;
-    }
-};
-
-const trapTab = (Store, e) => {
-    const { dom } = Store.getState();
-    const focusedIndex = dom.focusableChildren.indexOf(document.activeElement);
-    if (e.shiftKey && focusedIndex === 0) {
-        /* istanbul ignore next */
-        e.preventDefault();
-        dom.focusableChildren[dom.focusableChildren.length - 1].focus();
-    }
-    /* istanbul ignore next */
-    if (!e.shiftKey && focusedIndex === dom.focusableChildren.length - 1) {
-        e.preventDefault();
-        dom.focusableChildren[0].focus();
-    }
-};
-
-const toggle = Store => state => {
-    const { dom, current, isOpen, settings } = Store.getState();
-    dom.overlay.classList.toggle('is--active');
-    dom.overlay.setAttribute('aria-hidden', !isOpen);
-    dom.overlay.setAttribute('tabindex', isOpen ? '0' : '-1');
-    isOpen !== null && dom.items[current].classList.add('is--active');
-    if (dom.focusableChildren && dom.focusableChildren.length > 0) window.setTimeout(() => { dom.focusableChildren[0].focus(); }, 0);
-
-    settings.fullscreen && toggleFullScreen(state);
-};
 
 const writeTotals = ({ dom, current, items, settings }) => {
     if (settings.totals) dom.totals.innerHTML = `${current + 1}/${items.length}`;
 };
 
-const toggleFullScreen = ({ isOpen, dom }) => {
-    if (isOpen){
-        dom.overlay.requestFullscreen && dom.overlay.requestFullscreen();
+export const toggleFullScreen = Store => {
+    const { isFullScreen, container } = Store.getState();
+    if (isFullScreen){
+        container.requestFullscreen && container.requestFullscreen();
         /* istanbul ignore next */
-        dom.overlay.webkitRequestFullscreen && dom.overlay.webkitRequestFullscreen();
+        container.webkitRequestFullscreen && container.webkitRequestFullscreen();
         /* istanbul ignore next */
-        dom.overlay.mozRequestFullScreen && dom.overlay.mozRequestFullScreen();
+        container.mozRequestFullScreen && container.mozRequestFullScreen();
     } else {
         /* istanbul ignore next */
         document.exitFullscreen && document.exitFullscreen();
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index 5274f634..00d183ec 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -1,5 +1,5 @@
 import { createStore } from './store';
-import { initTriggers, keyListener, open } from './dom';
+import { initUI, toggleFullScreen } from './dom';
 
 /* 
  * @param settings, Object, merged defaults + options passed in as instantiation config to module default
@@ -15,11 +15,11 @@ export default ({ items, settings }) => {
         items,
         imageCache: [],
         current: settings.start,
-        keyListener: keyListener(Store)
-    }, [ initUI(Store)/*, initTriggers(Store)*/ ]);
+        isFullScreen: false
+    }, [ initUI(Store) ]);
 
     return {
         getState: Store.getState,
-        open: open(Store)
+        toggleFullScreen: toggleFullScreen.bind(null, Store)
     };
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 2552908a..764190df 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -1,6 +1,2 @@
-import { FOCUSABLE_ELEMENTS } from './constants';
-
 export const sanitize = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
-export const getFocusableChildren = node => [].slice.call(node.querySelectorAll(FOCUSABLE_ELEMENTS.join(',')));
-

From ad57639edda3f3905dd3958fab7e9bc20ae46099 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Fri, 7 Jan 2022 00:02:11 +0000
Subject: [PATCH 03/49] Starts tests outline; updates dom

---
 packages/gallery/__tests__/initialisation.js   |  4 ++++
 packages/gallery/package.json                  | 14 ++++++--------
 packages/gallery/src/lib/defaults/index.js     |  1 +
 packages/gallery/src/lib/defaults/templates.js | 15 +++++++++++++--
 packages/gallery/src/lib/dom.js                |  6 ++----
 5 files changed, 26 insertions(+), 14 deletions(-)
 create mode 100644 packages/gallery/__tests__/initialisation.js

diff --git a/packages/gallery/__tests__/initialisation.js b/packages/gallery/__tests__/initialisation.js
new file mode 100644
index 00000000..6f8ea893
--- /dev/null
+++ b/packages/gallery/__tests__/initialisation.js
@@ -0,0 +1,4 @@
+//shoud return and Object of the expected shape, with expected API
+//should console.warn if nothing found
+//should generate DOM
+//should return expected initial state
diff --git a/packages/gallery/package.json b/packages/gallery/package.json
index 5b541a0b..04b1efc3 100644
--- a/packages/gallery/package.json
+++ b/packages/gallery/package.json
@@ -1,13 +1,13 @@
 {
-  "name": "@stormid/modal-gallery",
-  "version": "1.0.0-y.0",
-  "description": "Accessible modal image gallery",
+  "name": "@stormid/gallery",
+  "version": "1.0.0-rc.1",
+  "description": "Accessible image gallery",
   "author": "stormid",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
-  "repository": "https://github.com/stormid/components/tree/master/packages/modal-gallery",
+  "repository": "https://github.com/stormid/components/tree/master/packages/gallery",
   "private": false,
   "main": "dist/index.js",
   "source": "src/index.js",
@@ -18,15 +18,13 @@
     "stormid",
     "component",
     "ui",
-    "modal",
     "gallery"
   ],
   "scripts": {
-    "build": "npx microbundle --name ModalGallery",
+    "build": "npx microbundle --name Gallery",
     "test": "node_modules/.bin/jest --coverage",
     "dev": "webpack-dev-server --config example/webpack.config.js --mode development",
     "prod": "webpack --config example/webpack.config.js --mode production",
     "prepublish": "npm run -s build"
-  },
-  "gitHead": "9042db4005411c4360ba3e8188e03333c10098f2"
+  }
 }
diff --git a/packages/gallery/src/lib/defaults/index.js b/packages/gallery/src/lib/defaults/index.js
index 00bd624e..7a5627ab 100644
--- a/packages/gallery/src/lib/defaults/index.js
+++ b/packages/gallery/src/lib/defaults/index.js
@@ -5,6 +5,7 @@ export default {
     preload: false,
     totals: true,
     start: 0,
+    fullscreen: true,
     container: '.js-gallery__container',
     templates
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/defaults/templates.js b/packages/gallery/src/lib/defaults/templates.js
index 90c884e6..739907a2 100644
--- a/packages/gallery/src/lib/defaults/templates.js
+++ b/packages/gallery/src/lib/defaults/templates.js
@@ -1,15 +1,26 @@
 /* istanbul ignore file */
 import { sanitize } from '../utils';
 
-export const ui = () => {
+export const container = items => {
     const container = document.createElement('div');
     container.className = 'gallery__container';
 
-    // container.insertAdjacentHTML('beforeend', );
+    container.insertAdjacentHTML('beforeend', `${header(items)}${main(items)}${footer()}`);
 
     return container;
 };
 
+export const header = (items, settings) => `<div class="gallery__header">
+    <div class="gallery__totals"></div>
+    ${settings.fullscreen && <button class="gallery__fullscreen" aria-label="Full screen">
+        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+    </button>}
+</div>`;
+
+export const main = items => `<div class="gallery__main"></div>`;
+
+export const footer = items => `<div class="gallery__footer"></div>`;
+
 // export const details = item => item.title || item.description
 //     ? `<div class="modal-gallery__details">
 //                                     ${item.title ? `<h1 class="modal-gallery__title">${sanitize(item.title)}</h1>` : ``}
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index c8af87c3..10ee96c0 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -41,7 +41,7 @@ export const initUI = Store => state => {
     //items with image container, title, description
     const container = document.querySelector(settings.container);
     if (!container) return void console.warn(`Gallery cannot be initialised, ${settings.container} not found`);
-    container.appendChild(settings.templates.ui());
+    container.appendChild(settings.templates.container(items));
     
 
     //if (settings.preload) items.map(loadImage(Store));
@@ -50,9 +50,7 @@ export const initUI = Store => state => {
     // Store.dispatch({ dom: {
     //     container,
     //     items,
-    //     totals,
-    //     focusableChildren: getFocusableChildren(container),
-    //     lastFocused: document.activeElement
+    //     totals
     // } }, [
     //     load(Store),
     //     initUIButtons(Store),

From c2dd3683f869e8ae0496ff31c36d021e70b98824 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Fri, 7 Jan 2022 11:05:48 +0000
Subject: [PATCH 04/49] Starts gallery mark up

---
 packages/gallery/example/src/index.html       | 39 +++++++++++++++++++
 packages/gallery/src/index.js                 |  2 +-
 packages/gallery/src/lib/defaults/index.js    | 10 +++--
 .../gallery/src/lib/defaults/templates.js     | 21 +---------
 4 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 8baf553e..07dc22d6 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -30,5 +30,44 @@
     </style>
   </head>
   <body>
+      <div class="gallery js-gallery">
+        <div class="gallery__header">
+            <div class="gallery__total" data-gallery-total>1 of 10</div>
+            <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+            </button>
+        </div>
+        <div class="gallery__main">
+            <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+            </button>
+            <ul class="gallery__list">
+                <li
+                    class="gallery__item"
+                    data-gallery-item
+                    <!-- data-gallery-item-sources="[{ src: '', media: ''}]" -->
+
+                >
+                    <div class="gallery__item-img-container">
+                        <img 
+                            alt=""
+                            class=""
+                            decoding="async"
+                            src=""
+                        />
+                    </div>
+                    <div class="gallery__item-footer">
+                        <div class="gallery__item-meta">
+                            <div class="gallery__item-description" data-gallery-description></div>
+                            <div class="gallery__item-tags" data-gallery-tags></div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+            <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+            </button>
+        </div>
+      </div>
   </body>
 </html>
diff --git a/packages/gallery/src/index.js b/packages/gallery/src/index.js
index 60a5ed67..d8e1fb01 100644
--- a/packages/gallery/src/index.js
+++ b/packages/gallery/src/index.js
@@ -1,3 +1,4 @@
+import defaults from './lib/defaults';
 import factory from './lib/factory';
 
 export default (src, options) => {
@@ -11,7 +12,6 @@ export default (src, options) => {
         if (!els.length) return void console.warn('Gallery cannot be initialised, no images found');
 		
         items = els.map(el => ({
-            trigger: el,
             src: el.getAttribute('href'),
             srcset: el.getAttribute('data-srcset') || null,
             sizes: el.getAttribute('data-sizes') || null,
diff --git a/packages/gallery/src/lib/defaults/index.js b/packages/gallery/src/lib/defaults/index.js
index 7a5627ab..8d891b41 100644
--- a/packages/gallery/src/lib/defaults/index.js
+++ b/packages/gallery/src/lib/defaults/index.js
@@ -1,11 +1,13 @@
 /* istanbul ignore file */
-import * as templates from './templates';
 
 export default {
     preload: false,
     totals: true,
     start: 0,
-    fullscreen: true,
-    container: '.js-gallery__container',
-    templates
+    selectors: {
+        fullscreen: '[data-gallery-fullscreen]',
+        total: '[data-gallery-total]',
+        previous: '[data-gallery-previous]',
+        next: '[data-gallery-next]'
+    }
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/defaults/templates.js b/packages/gallery/src/lib/defaults/templates.js
index 739907a2..98b4e28d 100644
--- a/packages/gallery/src/lib/defaults/templates.js
+++ b/packages/gallery/src/lib/defaults/templates.js
@@ -1,25 +1,6 @@
 /* istanbul ignore file */
-import { sanitize } from '../utils';
+// import { sanitize } from '../utils';
 
-export const container = items => {
-    const container = document.createElement('div');
-    container.className = 'gallery__container';
-
-    container.insertAdjacentHTML('beforeend', `${header(items)}${main(items)}${footer()}`);
-
-    return container;
-};
-
-export const header = (items, settings) => `<div class="gallery__header">
-    <div class="gallery__totals"></div>
-    ${settings.fullscreen && <button class="gallery__fullscreen" aria-label="Full screen">
-        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
-    </button>}
-</div>`;
-
-export const main = items => `<div class="gallery__main"></div>`;
-
-export const footer = items => `<div class="gallery__footer"></div>`;
 
 // export const details = item => item.title || item.description
 //     ? `<div class="modal-gallery__details">

From 15dd1f2bc78dc3e04ae956d1ed628151c6f97da8 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Fri, 7 Jan 2022 17:33:16 +0000
Subject: [PATCH 05/49] Add basic functionality, add tests

---
 packages/gallery/__tests__/initialisation.js | 183 +++++++++++++++++-
 packages/gallery/example/src/index.html      | 159 ++++++++++++----
 packages/gallery/src/index.js                |  28 +--
 packages/gallery/src/lib/constants.js        |   9 +-
 packages/gallery/src/lib/defaults/index.js   |  12 +-
 packages/gallery/src/lib/dom.js              | 188 +++++++------------
 packages/gallery/src/lib/factory.js          |  23 ++-
 packages/gallery/src/lib/utils.js            |  24 ++-
 8 files changed, 433 insertions(+), 193 deletions(-)

diff --git a/packages/gallery/__tests__/initialisation.js b/packages/gallery/__tests__/initialisation.js
index 6f8ea893..f939bee3 100644
--- a/packages/gallery/__tests__/initialisation.js
+++ b/packages/gallery/__tests__/initialisation.js
@@ -1,4 +1,179 @@
-//shoud return and Object of the expected shape, with expected API
-//should console.warn if nothing found
-//should generate DOM
-//should return expected initial state
+import gallery from '../src';
+
+describe('Gallery > initialisation', () => {
+
+    it('Should console.warn if nothing found', () => {
+        document.body.innerHTML = ``;
+        console.warn = jest.fn();
+        gallery('.js-gallery');
+        expect(console.warn).toHaveBeenCalledWith('Gallery cannot be initialised, no galleries found');
+    });
+
+    it('Should return an array of gallery objects', () => {
+        document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container">
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container">
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/1200x1200"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        const instances = gallery('.js-gallery');
+        expect(Array.isArray(instances)).toBe(true);
+        expect(instances.length).toEqual(1);
+        expect(instances[0].getState).toBeDefined();
+        expect(instances[0].initialise).toBeDefined();
+    });
+
+    it('Should return an array of gallery objects with the DOM captured in state', () => {
+        document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container">
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container">
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/1200x1200"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        const [ instance ] = gallery('.js-gallery');
+        expect(instance.getState).toBeDefined();
+        expect(instance.initialise).toBeDefined();
+        const state = instance.getState();
+        expect(state.dom.total).toBeDefined();
+        expect(state.dom.fullscreen).toBeDefined();
+        expect(state.dom.previous).toBeDefined();
+        expect(state.dom.next).toBeDefined();
+
+        
+    });
+
+});
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 07dc22d6..318d5bf4 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -16,6 +16,17 @@
         img {
             display: block;
         }
+        .visually-hidden,
+        .gallery__item:not(.is--active) {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            border: 0;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+        }   
 		*:focus {
 			outline: 1px solid red;
 		}
@@ -30,44 +41,116 @@
     </style>
   </head>
   <body>
-      <div class="gallery js-gallery">
-        <div class="gallery__header">
-            <div class="gallery__total" data-gallery-total>1 of 10</div>
-            <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
-                <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
-            </button>
-        </div>
-        <div class="gallery__main">
-            <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
-                <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
-            </button>
-            <ul class="gallery__list">
-                <li
-                    class="gallery__item"
-                    data-gallery-item
-                    <!-- data-gallery-item-sources="[{ src: '', media: ''}]" -->
-
-                >
-                    <div class="gallery__item-img-container">
-                        <img 
-                            alt=""
-                            class=""
-                            decoding="async"
-                            src=""
-                        />
-                    </div>
-                    <div class="gallery__item-footer">
-                        <div class="gallery__item-meta">
-                            <div class="gallery__item-description" data-gallery-description></div>
-                            <div class="gallery__item-tags" data-gallery-tags></div>
+      <section class="gallery js-gallery">
+            <h2 class="visually-hidden">Gallery</h2>
+            <div class="gallery__header">
+                <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                    <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                </button>
+            </div>
+            <div class="gallery__main">
+                <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                    <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                </button>
+                <ul class="gallery__list">
+                    <!--
+                        data-gallery-item-sources="[{ src: '', media: ''}]"
+                        data-gallery-item-srcset="http://placehold.it/800x800 800w, http://placehold.it/500x500 320w"
+                        data-gallery-item-sizes="(max-width: 800px) 100vw, 800px"
+                        data-gallery-item
+                        data-gallery-item-src=""
+                        data-gallery-item-alt=""
+                        data-gallery-item-loaded
+                    -->
+                    <li
+                        class="gallery__item is--active"
+                        data-gallery-item
+                        data-gallery-item-loaded
+                    >
+                        <div class="gallery__item-img-container">
+                            <img 
+                                alt="Image one"
+                                class="gallery__item-img"
+                                decoding="async"
+                                src="http://placehold.it/800x800"
+                            />
                         </div>
-                    </div>
-                </li>
-            </ul>
-            <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
-            </button>
-        </div>
-      </div>
+                        <div class="gallery__item-footer">
+                            <div class="gallery__item-meta">
+                                <div class="gallery__item-description">
+                                    <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                    <div class="gallery__item-category">Architecture - March</div>
+                                    <div class="gallery__item-title">Example project name here</div>
+                                </div>
+                                <ul class="gallery__item-tags">
+                                    <li class="gallery__item-tag">Example tag</li>
+                                    <li class="gallery__item-tag">Example tag</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+                    <li
+                        class="gallery__item"
+                        data-gallery-item
+                        data-gallery-item-src="http://placehold.it/1200x1200"
+                        aria-hidden="true"
+                    >
+                        <div class="gallery__item-img-container">
+                            <img 
+                                alt="Image two"
+                                class="gallery__item-img"
+                                decoding="async"
+                                src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                            />
+                        </div>
+                        <div class="gallery__item-footer">
+                            <div class="gallery__item-meta">
+                                <div class="gallery__item-description">
+                                    <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                    <div class="gallery__item-category">Architecture - April</div>
+                                    <div class="gallery__item-title">Example project name here</div>
+                                </div>
+                                <ul class="gallery__item-tags">
+                                    <li class="gallery__item-tag">Example tag</li>
+                                    <li class="gallery__item-tag">Example tag</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+                    <li
+                        class="gallery__item"
+                        data-gallery-item
+                        data-gallery-item-src="http://placehold.it/600x600"
+                        aria-hidden="true"
+                    >
+                        <div class="gallery__item-img-container">
+                            <img 
+                                alt="Image three"
+                                class="gallery__item-img"
+                                decoding="async"
+                                src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                            />
+                        </div>
+                        <div class="gallery__item-footer">
+                            <div class="gallery__item-meta">
+                                <div class="gallery__item-description">
+                                    <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                    <div class="gallery__item-category">Architecture - May</div>
+                                    <div class="gallery__item-title">Example project name here</div>
+                                </div>
+                                <ul class="gallery__item-tags">
+                                    <li class="gallery__item-tag">Example tag</li>
+                                    <li class="gallery__item-tag">Example tag</li>
+                                </ul>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+                <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                    <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                </button>
+            </div>
+      </section>
   </body>
 </html>
diff --git a/packages/gallery/src/index.js b/packages/gallery/src/index.js
index d8e1fb01..07455617 100644
--- a/packages/gallery/src/index.js
+++ b/packages/gallery/src/index.js
@@ -1,27 +1,9 @@
 import defaults from './lib/defaults';
 import factory from './lib/factory';
 
-export default (src, options) => {
-    if (!src.length) return void console.warn('Gallery cannot be initialised, no images found');
-
-    let items;
-
-    if (typeof src === 'string'){
-        const els = [].slice.call(document.querySelectorAll(src));
-
-        if (!els.length) return void console.warn('Gallery cannot be initialised, no images found');
-		
-        items = els.map(el => ({
-            src: el.getAttribute('href'),
-            srcset: el.getAttribute('data-srcset') || null,
-            sizes: el.getAttribute('data-sizes') || null,
-            title: el.getAttribute('data-title') || '',
-            description: el.getAttribute('data-description') || ''
-        }));
-    } else items = src;
-
-    return Object.create(factory({
-        items,
-        settings: { ...defaults, ...options }
-    }));
+export default (selector, options) => {
+    const galleries = [].slice.call(document.querySelectorAll(selector));
+    if (galleries.length === 0) return void console.warn('Gallery cannot be initialised, no galleries found');
+    
+    return galleries.map(gallery => Object.create(factory(gallery, { ...defaults, ...options })));
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/constants.js b/packages/gallery/src/lib/constants.js
index 713af1cc..6810822f 100644
--- a/packages/gallery/src/lib/constants.js
+++ b/packages/gallery/src/lib/constants.js
@@ -1 +1,8 @@
-export const TRIGGER_EVENTS = ['click', 'keydown' ];
\ No newline at end of file
+export const ATTRIBUTE = {
+    SOURCES: 'data-gallery-item-sources',
+    SRCSET: 'data-gallery-item-srcset',
+    SIZES: 'data-gallery-item-sizes',
+    SRC: 'data-gallery-item-src',
+    ALT: 'data-gallery-item-alt',
+    LOADED: 'data-gallery-item-loaded'
+};
\ No newline at end of file
diff --git a/packages/gallery/src/lib/defaults/index.js b/packages/gallery/src/lib/defaults/index.js
index 8d891b41..1fc4e181 100644
--- a/packages/gallery/src/lib/defaults/index.js
+++ b/packages/gallery/src/lib/defaults/index.js
@@ -3,11 +3,19 @@
 export default {
     preload: false,
     totals: true,
-    start: 0,
-    selectors: {
+    startIndex: 0,
+    selector: {
+        item: '[data-gallery-item]',
         fullscreen: '[data-gallery-fullscreen]',
         total: '[data-gallery-total]',
         previous: '[data-gallery-previous]',
         next: '[data-gallery-next]'
+    },
+    manualInitialisation: false, //if the gallery is hidden (e.g. in a modal) we may wish to delay initialisation and image loading until it is activiated
+    updateURL: true, //change URL when item changes
+    currentClassName: 'is--active',
+    loadingClassName: 'is--loading',
+    announcement(current, total){
+        return `${current} of ${total}`;
     }
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 10ee96c0..b3ff8511 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -1,150 +1,108 @@
+import { sanitise } from './utils';
+
 const loadImage = Store => (item, i) => {
+    //detect if loaded
+    //check for loaded data attribute
+    //src, srcset, sizes, or sources
+    const img = item.node.querySelector('img');
+    if (!img) return void console.warn('Gallery cannot find image');
+
     try {
-        const img = new Image();
+        //add support for picture tags (sources)
+        // const picture = item.node.querySelector('picture');
+        
         const loaded = () => {
-            const { imageCache } = Store.getState();
-            imageCache[i] = img;
-            Store.dispatch({ imageCache });
-            writeImage(Store.getState(), i);
+            const { items, loadingClassName } = Store.getState();
+            items[i].loaded = true;
+            console.log('loaded');
+            item.node.classList.remove(loadingClassName);
+            Store.dispatch({ items });
         };
         img.onload = loaded;
-        img.src = item.src;
+        if (item.srcset) img.setAttribute('srcset', item.srcset);
+        if (item.src) img.setAttribute('src', item.src);
+        if (item.sizes) img.setAttribute('sizes', item.sizes);
         if (img.complete) loaded();
     } catch (e) {
-        console.warn(e);
-    }
+        console.warn('Gallery cannot load image', e);
+    };
 };
 
 const loadImages = Store => i => {
-    const { imageCache, items, dom } = Store.getState();
+    const { items, loadingClassName } = Store.getState();
     const indexes = [i];
 
     if (items.length > 1) indexes.push(i === 0 ? items.length - 1 : i - 1);
     if (items.length > 2) indexes.push(i === items.length - 1 ? 0 : i + 1);
     indexes.forEach(idx => {
-        if (imageCache[idx] === undefined) {
-            dom.items[idx].classList.add('loading');
+        if (!items[idx].loaded) {
+            items[idx].node.classList.add(loadingClassName);
             loadImage(Store)(items[idx], idx);
         }
     });
 
 };
 
-export const initUI = Store => state => {
-    const { settings, items } = Store.getState();
-    //write UI to target container
-    //persistent UI:
-        //buttons?
-        //menu?
-        //totals?
-        //list
-    //items with image container, title, description
-    const container = document.querySelector(settings.container);
-    if (!container) return void console.warn(`Gallery cannot be initialised, ${settings.container} not found`);
-    container.appendChild(settings.templates.container(items));
+export const init = Store => () => {
+    const state = Store.getState();
+    const { settings, items, dom, current } = state;
     
-
-    //if (settings.preload) items.map(loadImage(Store));
-
-
-    // Store.dispatch({ dom: {
-    //     container,
-    //     items,
-    //     totals
-    // } }, [
-    //     load(Store),
-    //     initUIButtons(Store),
-    //     writeTotals
-    // ]);
-};
-
-const load = Store => state => {
-    const { imageCache, items, current } = Store.getState();
-    if (Object.keys(imageCache).length === items.length) imageCache.map((img, i) => { writeImage(state, i); });
+    //initialise buttons
+    if (!dom.total) console.warn(`A live region announcing current and total items is recommended for screen readers.`);
+    else writeTotals(state);
+    if (dom.fullscreen) dom.fullscreen.addEventListener('click', toggleFullScreen.bind(null, Store));
+    if (dom.previous) dom.previous.addEventListener('click', previous.bind(null, Store));
+    if (dom.next) dom.next.addEventListener('click', next.bind(null, Store));
+
+    //preload all images if setting is true, or just previous and next
+    if (settings.preload) items.map(loadImage(Store));
     else loadImages(Store)(current);
-};
-
-const writeImage = (state, i) => {
-    const { dom, settings, items } = state;
-    if (!dom) return;
-    const imageContainer = dom.items[i].querySelector('.js-modal-gallery__img-container');
-    const img = imageContainer.querySelector('.modal-gallery__img');
-    if (img) return;
-    const imageClassName = settings.scrollable ? 'modal-gallery__img modal-gallery__img--scrollable' : 'modal-gallery__img';
-    const srcsetAttribute = dom.items[i].srcset ? ` srcset="${dom.items[i].srcset}"` : '';
-    const sizesAttribute = dom.items[i].sizes ? ` sizes="${dom.items[i].sizes}"` : '';
-    
-    imageContainer.innerHTML = `<img class="${imageClassName}" src="${items[i].src}" alt="${items[i].title}"${srcsetAttribute}${sizesAttribute}>`;
-    dom.items[i].classList.remove('loading');
-};
-
-const initUIButtons = Store => state => {
-    const { dom } = Store.getState();
-    const closeBtn = dom.overlay.querySelector('.js-modal-gallery__close');
-    TRIGGER_EVENTS.forEach(ev => {
-        closeBtn.addEventListener(ev, e => {
-            if ((e.keyCode && e.keyCode !== KEY_CODES.ENTER) || (e.which && e.which === 3)) return;
-            close(Store);
-        });
-    });
-
-    const previousBtn = dom.overlay.querySelector('.js-modal-gallery__previous');
-    const nextBtn = dom.overlay.querySelector('.js-modal-gallery__next');
-    if (!previousBtn && !nextBtn) return;
 
-    TRIGGER_EVENTS.forEach(ev => {
-        previousBtn && previousBtn.addEventListener(ev, e => {
-            if (e.keyCode && e.keyCode !== KEY_CODES.ENTER) return;
-            previous(Store);
-        });
-        nextBtn && nextBtn.addEventListener(ev, e => {
-            if (e.keyCode && e.keyCode !== KEY_CODES.ENTER) return;
-            next(Store);
-        });
-    });
+    //ensure current item is active
+    if (!items[current].node.classList.contains(settings.currentClassName)) !items[current].node.classList.add(settings.currentClassName);
 };
 
-
-const writeTotals = ({ dom, current, items, settings }) => {
-    if (settings.totals) dom.totals.innerHTML = `${current + 1}/${items.length}`;
-};
+const writeTotals = ({ current, items, settings, dom }) => dom.total.innerHTML = sanitise(settings.announcement(current + 1, items.length));
 
 export const toggleFullScreen = Store => {
-    const { isFullScreen, container } = Store.getState();
-    if (isFullScreen){
-        container.requestFullscreen && container.requestFullscreen();
-        /* istanbul ignore next */
-        container.webkitRequestFullscreen && container.webkitRequestFullscreen();
-        /* istanbul ignore next */
-        container.mozRequestFullScreen && container.mozRequestFullScreen();
-    } else {
-        /* istanbul ignore next */
-        document.exitFullscreen && document.exitFullscreen();
-        /* istanbul ignore next */
-        document.mozCancelFullScreen && document.mozCancelFullScreen();
-        /* istanbul ignore next */
-        document.webkitExitFullscreen && document.webkitExitFullscreen();
-    }
+    const { node } = Store.getState();
+    if (!document.fullscreenElement) node.requestFullscreen && node.requestFullscreen();
+    else document.exitFullscreen && document.exitFullscreen();
 };
 
+//!refactor
+//lots of duplication between previous and next functions
 export const previous = Store => {
-    const { current, dom } = Store.getState();
-    const next = current === 0 ? dom.items.length - 1 : current - 1;
+    const { current, items } = Store.getState();
+    const next = current === 0 ? items.length - 1 : current - 1;
+    
     Store.dispatch({ current: next }, [
-        () => dom.items[current].classList.remove('is--active'),
-        () => dom.items[next].classList.add('is--active'),
-        load(Store),
+        () => {
+            items[current].node.classList.remove('is--active');
+            items[current].node.setAttribute('aria-hidden', 'true');
+        },
+        () => {
+            items[next].node.classList.add('is--active');
+            items[current].node.removeAttribute('aria-hidden');
+        },
+        () => loadImages(Store)(next),
         writeTotals
     ]);
 };
 
 export const next = Store => {
-    const { current, dom } = Store.getState();
-    const next = current === dom.items.length - 1 ? 0 : current + 1;
+    const { current, items } = Store.getState();
+    const next = current === items.length - 1 ? 0 : current + 1;
     Store.dispatch({ current: next }, [
-        () => dom.items[current].classList.remove('is--active'),
-        () => dom.items[next].classList.add('is--active'),
-        load(Store),
+        () => {
+            items[current].node.classList.remove('is--active');
+            items[current].node.setAttribute('aria-hidden', 'true');
+        },
+        () => {
+            items[next].node.classList.add('is--active');
+            items[current].node.removeAttribute('aria-hidden');
+        },
+        () => loadImages(Store)(next),
         writeTotals
     ]);
 };
@@ -160,9 +118,9 @@ export const close = Store => {
     ]);
 };
 
-export const open = Store => (i = 0) => {
-    Store.dispatch(
-        { current: i, isOpen: true },
-        [ initUI(Store) ]
-    );
-};
\ No newline at end of file
+// export const open = Store => (i = 0) => {
+//     Store.dispatch(
+//         { current: i, isOpen: true },
+//         [ initUI(Store) ]
+//     );
+// };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index 00d183ec..1a462a0b 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -1,25 +1,30 @@
 import { createStore } from './store';
-import { initUI, toggleFullScreen } from './dom';
+import { init, toggleFullScreen } from './dom';
+import { composeItems, composeDOM } from './utils';
 
 /* 
+ * @param node, HTMLElement, DOM node containing the gallery
  * @param settings, Object, merged defaults + options passed in as instantiation config to module default
- * @param items, HTMLElement, DOM node to be toggled
  *
- * @returns Object, Modal Gallery API
+ * @returns Object, Gallery API
  */
-export default ({ items, settings }) => {
+export default (node, settings) => {
     const Store = createStore();
 
+    const items = [].slice.call(node.querySelectorAll(settings.selector.item));
+    if (items.length === 0) return void console.warn('Gallery cannot be initialised, no items found');
+
     Store.dispatch({
+        node,
         settings,
-        items,
-        imageCache: [],
-        current: settings.start,
-        isFullScreen: false
-    }, [ initUI(Store) ]);
+        items: composeItems(items),
+        dom: composeDOM(node, settings),
+        current: settings.startIndex
+    }, [ () => !settings.manualInitialisation && init(Store)() ]);
 
     return {
         getState: Store.getState,
+        initialise: init(Store),
         toggleFullScreen: toggleFullScreen.bind(null, Store)
     };
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 764190df..76811600 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -1,2 +1,24 @@
-export const sanitize = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+import { ATTRIBUTE } from './constants';
 
+export const sanitise = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+export const composeItems = nodes => nodes.map(node => {
+    const item = {
+        node,
+        sources: node.getAttribute(ATTRIBUTE.SOURCES),
+        srcset: node.getAttribute(ATTRIBUTE.SRCSET),
+        sizes: node.getAttribute(ATTRIBUTE.SIZES),
+        src: node.getAttribute(ATTRIBUTE.SRC),
+        alt: node.getAttribute(ATTRIBUTE.ALT),
+        loaded: node.hasAttribute(ATTRIBUTE.LOADED)
+    };
+    if (!item.sources && !item.srcset && !item.src && !item.loaded)  return void console.warn('Gallery cannot be initialised, no image sources found');
+    return item;
+});
+
+export const composeDOM = (node, settings) => ({
+    total: node.querySelector(settings.selector.total),
+    fullscreen: node.querySelector(settings.selector.fullscreen),
+    previous: node.querySelector(settings.selector.previous),
+    next: node.querySelector(settings.selector.next)
+});
\ No newline at end of file

From 8c2a68cf108e949135f180875219c4c09e1a1507 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Sun, 9 Jan 2022 17:20:28 +0000
Subject: [PATCH 06/49] Refactor and add tests

---
 packages/gallery/__tests__/api.js            | 116 +++++++++++++++++++
 packages/gallery/__tests__/initialisation.js |  10 +-
 packages/gallery/example/src/index.html      |   2 +-
 packages/gallery/example/src/js/index.js     |   2 +-
 packages/gallery/src/lib/dom.js              |  69 +++++------
 packages/gallery/src/lib/factory.js          |   3 +-
 packages/gallery/src/lib/utils.js            |   8 +-
 7 files changed, 158 insertions(+), 52 deletions(-)
 create mode 100644 packages/gallery/__tests__/api.js

diff --git a/packages/gallery/__tests__/api.js b/packages/gallery/__tests__/api.js
new file mode 100644
index 00000000..bf0a74cc
--- /dev/null
+++ b/packages/gallery/__tests__/api.js
@@ -0,0 +1,116 @@
+import gallery from '../src';
+
+let instance;
+
+beforeAll(() => {
+    document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container">
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container">
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/1200x1200"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container">
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+    [ instance ] = gallery('.js-gallery');
+});
+
+describe('Gallery > API', () => {
+
+    it('Should have an API method getState', () => {
+        expect(instance.getState).toBeDefined();
+    });
+
+});
diff --git a/packages/gallery/__tests__/initialisation.js b/packages/gallery/__tests__/initialisation.js
index f939bee3..b0494b46 100644
--- a/packages/gallery/__tests__/initialisation.js
+++ b/packages/gallery/__tests__/initialisation.js
@@ -19,7 +19,7 @@ describe('Gallery > initialisation', () => {
                     </button>
                 </div>
                 <div class="gallery__main">
-                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
                     <ul class="gallery__list">
@@ -53,6 +53,7 @@ describe('Gallery > initialisation', () => {
                         <li
                             class="gallery__item"
                             data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
                             aria-hidden="true"
                         >
                             <div class="gallery__item-img-container">
@@ -60,7 +61,7 @@ describe('Gallery > initialisation', () => {
                                     alt="Image two"
                                     class="gallery__item-img"
                                     decoding="async"
-                                    src="http://placehold.it/1200x1200"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                 />
                             </div>
                             <div class="gallery__item-footer">
@@ -100,7 +101,7 @@ describe('Gallery > initialisation', () => {
                     </button>
                 </div>
                 <div class="gallery__main">
-                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
                     <ul class="gallery__list">
@@ -134,6 +135,7 @@ describe('Gallery > initialisation', () => {
                         <li
                             class="gallery__item"
                             data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
                             aria-hidden="true"
                         >
                             <div class="gallery__item-img-container">
@@ -141,7 +143,7 @@ describe('Gallery > initialisation', () => {
                                     alt="Image two"
                                     class="gallery__item-img"
                                     decoding="async"
-                                    src="http://placehold.it/1200x1200"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                 />
                             </div>
                             <div class="gallery__item-footer">
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 318d5bf4..2bf023cd 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -64,7 +64,7 @@ <h2 class="visually-hidden">Gallery</h2>
                         data-gallery-item-loaded
                     -->
                     <li
-                        class="gallery__item is--active"
+                        class="gallery__item"
                         data-gallery-item
                         data-gallery-item-loaded
                     >
diff --git a/packages/gallery/example/src/js/index.js b/packages/gallery/example/src/js/index.js
index dec2ee07..a072ab9c 100644
--- a/packages/gallery/example/src/js/index.js
+++ b/packages/gallery/example/src/js/index.js
@@ -1,3 +1,3 @@
 import gallery from '../../../src';
     
-gallery('.js-gallery');
\ No newline at end of file
+gallery('.js-gallery', { startIndex: 2 });
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index b3ff8511..20fa710b 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -1,23 +1,29 @@
 import { sanitise } from './utils';
 
+const loadSources = (picture, item) => {
+    if (item.sources && item.sources.length > 0) {
+        for (let i in item.sources){
+            const source = document.createElement('source');
+            if (item.sources[i].srcset) source.setAttribute('srcset', item.sources[i].srcset);
+            if (item.sources[i].media) source.setAttribute('media', item.sources[i].media);
+            if (item.sources[i].type) source.setAttribute('srcset', item.sources[i].type);
+            picture.insertBefore(source, picture.firstElementChild);
+        }
+    }
+};
+
 const loadImage = Store => (item, i) => {
-    //detect if loaded
-    //check for loaded data attribute
-    //src, srcset, sizes, or sources
     const img = item.node.querySelector('img');
-    if (!img) return void console.warn('Gallery cannot find image');
-
+    const picture = item.node.querySelector('picture');
     try {
-        //add support for picture tags (sources)
-        // const picture = item.node.querySelector('picture');
-        
         const loaded = () => {
             const { items, loadingClassName } = Store.getState();
             items[i].loaded = true;
-            console.log('loaded');
             item.node.classList.remove(loadingClassName);
             Store.dispatch({ items });
         };
+        if (picture) loadSources(item);
+
         img.onload = loaded;
         if (item.srcset) img.setAttribute('srcset', item.srcset);
         if (item.src) img.setAttribute('src', item.src);
@@ -70,12 +76,9 @@ export const toggleFullScreen = Store => {
     else document.exitFullscreen && document.exitFullscreen();
 };
 
-//!refactor
-//lots of duplication between previous and next functions
-export const previous = Store => {
+export const change = (Store, next) => {
     const { current, items } = Store.getState();
-    const next = current === 0 ? items.length - 1 : current - 1;
-    
+
     Store.dispatch({ current: next }, [
         () => {
             items[current].node.classList.remove('is--active');
@@ -90,37 +93,17 @@ export const previous = Store => {
     ]);
 };
 
-export const next = Store => {
+export const previous = Store => {
     const { current, items } = Store.getState();
-    const next = current === items.length - 1 ? 0 : current + 1;
-    Store.dispatch({ current: next }, [
-        () => {
-            items[current].node.classList.remove('is--active');
-            items[current].node.setAttribute('aria-hidden', 'true');
-        },
-        () => {
-            items[next].node.classList.add('is--active');
-            items[current].node.removeAttribute('aria-hidden');
-        },
-        () => loadImages(Store)(next),
-        writeTotals
-    ]);
+    change(Store, (current === 0 ? items.length - 1 : current - 1));
 };
 
-export const close = Store => {
-    const { keyListener, lastFocused, dom } = Store.getState();
-    Store.dispatch({ current: null, isOpen: false }, [
-        () => document.removeEventListener('keydown', keyListener),
-        () => { if (lastFocused) lastFocused.focus(); },
-        // () => dom.items[current].classList.remove('is--active'),
-        // toggle(Store),
-        () => dom.overlay.parentNode.removeChild(dom.overlay)
-    ]);
+export const next = Store => {
+    const { current, items } = Store.getState();
+    change(Store, (current === items.length - 1 ? 0 : current + 1));
 };
 
-// export const open = Store => (i = 0) => {
-//     Store.dispatch(
-//         { current: i, isOpen: true },
-//         [ initUI(Store) ]
-//     );
-// };
\ No newline at end of file
+export const goTo = Store => i => {
+    loadImages(Store)(i);
+    change(Store, i);
+};
\ No newline at end of file
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index 1a462a0b..2bddbd83 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -1,5 +1,5 @@
 import { createStore } from './store';
-import { init, toggleFullScreen } from './dom';
+import { init, toggleFullScreen, goTo } from './dom';
 import { composeItems, composeDOM } from './utils';
 
 /* 
@@ -25,6 +25,7 @@ export default (node, settings) => {
     return {
         getState: Store.getState,
         initialise: init(Store),
+        goTo: goTo(Store),
         toggleFullScreen: toggleFullScreen.bind(null, Store)
     };
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 76811600..4ac921cb 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -3,6 +3,10 @@ import { ATTRIBUTE } from './constants';
 export const sanitise = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
 export const composeItems = nodes => nodes.map(node => {
+    //must contain an img element
+    const imgNode = node.querySelector('img');
+    if (!imgNode) return void console.warn('Gallery cannot find image');
+
     const item = {
         node,
         sources: node.getAttribute(ATTRIBUTE.SOURCES),
@@ -10,9 +14,9 @@ export const composeItems = nodes => nodes.map(node => {
         sizes: node.getAttribute(ATTRIBUTE.SIZES),
         src: node.getAttribute(ATTRIBUTE.SRC),
         alt: node.getAttribute(ATTRIBUTE.ALT),
-        loaded: node.hasAttribute(ATTRIBUTE.LOADED)
+        loaded: node.hasAttribute(ATTRIBUTE.LOADED) || imgNode.getAttribute('src') === node.getAttribute(ATTRIBUTE.SRC)
     };
-    if (!item.sources && !item.srcset && !item.src && !item.loaded)  return void console.warn('Gallery cannot be initialised, no image sources found');
+    if (!item.sources && !item.srcset && !item.src && !item.loaded) return void console.warn('Gallery cannot be initialised, no image sources found');
     return item;
 });
 

From ba7320d105ed9ebbd88a225da30413d66c3ccc07 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Sun, 9 Jan 2022 22:04:14 +0000
Subject: [PATCH 07/49] Add tests

---
 packages/gallery/__tests__/api.js             | 32 ++++++-
 .../basic.js}                                 |  3 +-
 .../initialisation/manual-initialisation.js   | 95 +++++++++++++++++++
 packages/gallery/__tests__/store.js           | 40 ++++++++
 packages/gallery/__tests__/utils.js           | 25 +++++
 .../lib/{defaults/index.js => defaults.js}    |  0
 .../gallery/src/lib/defaults/templates.js     | 10 --
 packages/gallery/src/lib/dom.js               | 17 +++-
 8 files changed, 206 insertions(+), 16 deletions(-)
 rename packages/gallery/__tests__/{initialisation.js => initialisation/basic.js} (99%)
 create mode 100644 packages/gallery/__tests__/initialisation/manual-initialisation.js
 create mode 100644 packages/gallery/__tests__/store.js
 create mode 100644 packages/gallery/__tests__/utils.js
 rename packages/gallery/src/lib/{defaults/index.js => defaults.js} (100%)
 delete mode 100644 packages/gallery/src/lib/defaults/templates.js

diff --git a/packages/gallery/__tests__/api.js b/packages/gallery/__tests__/api.js
index bf0a74cc..00d2a4f8 100644
--- a/packages/gallery/__tests__/api.js
+++ b/packages/gallery/__tests__/api.js
@@ -1,4 +1,5 @@
 import gallery from '../src';
+import defaults from '../src/lib/defaults';
 
 let instance;
 
@@ -46,6 +47,7 @@ beforeAll(() => {
                         <li
                             class="gallery__item"
                             data-gallery-item
+                            data-gallery-item-src="http://placehold.it/600x600"
                             aria-hidden="true"
                         >
                             <div class="gallery__item-img-container">
@@ -53,7 +55,7 @@ beforeAll(() => {
                                     alt="Image two"
                                     class="gallery__item-img"
                                     decoding="async"
-                                    src="http://placehold.it/1200x1200"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                 />
                             </div>
                             <div class="gallery__item-footer">
@@ -110,7 +112,35 @@ beforeAll(() => {
 describe('Gallery > API', () => {
 
     it('Should have an API method getState', () => {
+        const node = document.querySelector('.js-gallery');
         expect(instance.getState).toBeDefined();
+        expect(instance.getState().node).toEqual(node);
+        expect(instance.getState().current).toEqual(0);
+    });
+
+    it('Should have an API method initialise', () => {
+        expect(instance.initialise).toBeDefined();
+        //we will test the initialise function in the initialisation tests
+    });
+
+    it('Should have an API method goTo', () => {
+        expect(instance.goTo).toBeDefined();
+        expect(instance.getState().current).toEqual(0);
+        instance.goTo(2);
+        expect(instance.getState().current).toEqual(2);
+        const galleryItems = Array.from(document.querySelectorAll(defaults.selector.item));
+        expect(galleryItems[0].classList.contains(defaults.currentClassName)).toEqual(false);
+        expect(galleryItems[0].hasAttribute('aria-hidden')).toEqual(true);
+        expect(galleryItems[2].classList.contains(defaults.currentClassName)).toEqual(true);
+        expect(galleryItems[2].hasAttribute('aria-hidden')).toEqual(false);
+    });
+
+    it('Should have an API method toggleFullScreen', () => {
+        expect(instance.toggleFullScreen).toBeDefined();
+        const { node } = instance.getState();
+        node.requestFullscreen = jest.fn();
+        instance.toggleFullScreen();
+        expect(node.requestFullscreen).toHaveBeenCalled();
     });
 
 });
diff --git a/packages/gallery/__tests__/initialisation.js b/packages/gallery/__tests__/initialisation/basic.js
similarity index 99%
rename from packages/gallery/__tests__/initialisation.js
rename to packages/gallery/__tests__/initialisation/basic.js
index b0494b46..7037f5b7 100644
--- a/packages/gallery/__tests__/initialisation.js
+++ b/packages/gallery/__tests__/initialisation/basic.js
@@ -1,4 +1,4 @@
-import gallery from '../src';
+import gallery from '../../src';
 
 describe('Gallery > initialisation', () => {
 
@@ -179,3 +179,4 @@ describe('Gallery > initialisation', () => {
     });
 
 });
+
diff --git a/packages/gallery/__tests__/initialisation/manual-initialisation.js b/packages/gallery/__tests__/initialisation/manual-initialisation.js
new file mode 100644
index 00000000..da1e85b2
--- /dev/null
+++ b/packages/gallery/__tests__/initialisation/manual-initialisation.js
@@ -0,0 +1,95 @@
+import gallery from '../../src';
+import defaults from '../../src/lib/defaults';
+import { ATTRIBUTE } from '../../src/lib/constants';
+
+describe('Gallery > initialisation > manual initialisation', () => {
+
+    it('Should not set an active item, nor load any images', () => {
+        document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/800x800"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container">
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container">
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        const [ instance ] = gallery('.js-gallery', { manualInitialisation: true });
+        expect(instance.getState).toBeDefined();
+        const { items } = instance.getState();
+        expect(items[0].node.hasAttribute('aria-hidden')).toEqual(true);
+        expect(items[0].node.classList.contains(defaults.currentClassName)).toEqual(false);
+
+        instance.initialise();
+        
+        expect(items[0].node.hasAttribute('aria-hidden')).toEqual(false);
+        expect(items[0].node.classList.contains(defaults.currentClassName)).toEqual(true);
+    });
+
+});
\ No newline at end of file
diff --git a/packages/gallery/__tests__/store.js b/packages/gallery/__tests__/store.js
new file mode 100644
index 00000000..1378e195
--- /dev/null
+++ b/packages/gallery/__tests__/store.js
@@ -0,0 +1,40 @@
+import { createStore } from '../src/lib/store';
+
+describe(`Gallery > Store`, () => {
+
+    const Store = createStore();
+    let effect = false;
+    const sideEffect = state => {
+        effect = !effect;
+    };
+
+    it('createStore should return an Object with an API', async () => {
+        expect(Store).not.toBeNull();
+        expect(Store.getState).not.toBeNull();
+        expect(Store.dispatch).not.toBeNull();
+    });
+
+    it('should have a getState function that returns a private state Object', async () => {
+        expect(Store.state).toBeUndefined();
+        expect(Store.getState()).toEqual({});
+    });
+
+    it('should have a dispatch function that updates state', async () => {
+        const nextState = { isOpen: true };
+        Store.dispatch(nextState);
+        expect(Store.getState()).toEqual(nextState);
+    });
+
+    it('should have a dispatch function that does not update state if nextState is not passed', async () => {
+        const Store = createStore();
+        Store.dispatch();
+        expect(Store.getState()).toEqual({});
+    });
+
+    it('should have a dispatch function that invokes any side effect functions passed after the state change, with new state as only argument', async () => {
+        Store.dispatch({}, [sideEffect]);
+        expect(effect).toEqual(true);
+    });
+
+
+});
diff --git a/packages/gallery/__tests__/utils.js b/packages/gallery/__tests__/utils.js
new file mode 100644
index 00000000..b21b6157
--- /dev/null
+++ b/packages/gallery/__tests__/utils.js
@@ -0,0 +1,25 @@
+import { sanitise } from '../src/lib/utils';
+
+describe('Gallery > Utils > sanitize', () => {
+
+    it('should replace ampersands with HTML entity', () => {
+        expect(sanitise('test&test&test&test')).toEqual('test&amp;test&amp;test&amp;test');
+    });
+
+    it('should replace code block open braces with HTML entity less than', () => {
+        expect(sanitise('<test')).toEqual('&lt;test');
+    });
+
+    it('should replace code close open braces with HTML entity greater than', () => {
+        expect(sanitise('test>')).toEqual('test&gt;');
+    });
+
+    it('should replace ampersands, open, and close blocks with non-JS executable HTML entities', () => {
+        expect(sanitise('<img src="x" onerror="alert(1)" >Image alert')).toEqual('&lt;img src="x" onerror="alert(1)" &gt;Image alert');
+    });
+
+});
+
+//composeItems
+
+//composeDOM
\ No newline at end of file
diff --git a/packages/gallery/src/lib/defaults/index.js b/packages/gallery/src/lib/defaults.js
similarity index 100%
rename from packages/gallery/src/lib/defaults/index.js
rename to packages/gallery/src/lib/defaults.js
diff --git a/packages/gallery/src/lib/defaults/templates.js b/packages/gallery/src/lib/defaults/templates.js
deleted file mode 100644
index 98b4e28d..00000000
--- a/packages/gallery/src/lib/defaults/templates.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/* istanbul ignore file */
-// import { sanitize } from '../utils';
-
-
-// export const details = item => item.title || item.description
-//     ? `<div class="modal-gallery__details">
-//                                     ${item.title ? `<h1 class="modal-gallery__title">${sanitize(item.title)}</h1>` : ``}
-//                                     ${item.description ? `<div class="modal-gallery__description">${sanitize(item.description)}</div>` : ``}
-//                                 </div>`
-//     : '';
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 20fa710b..235946a0 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -63,9 +63,18 @@ export const init = Store => () => {
     //preload all images if setting is true, or just previous and next
     if (settings.preload) items.map(loadImage(Store));
     else loadImages(Store)(current);
-
-    //ensure current item is active
-    if (!items[current].node.classList.contains(settings.currentClassName)) !items[current].node.classList.add(settings.currentClassName);
+    
+    //set initial DOM state
+    items.forEach((item, i) => {
+        if (i === current) {
+            if (!item.node.classList.contains(settings.currentClassName)) item.node.classList.add(settings.currentClassName);
+            if (item.node.hasAttribute('aria-hidden')) item.node.removeAttribute('aria-hidden');
+        } else {
+            if (item.node.classList.contains(settings.currentClassName)) item.node.classList.remove(settings.currentClassName);
+            if (!item.node.hasAttribute('aria-hidden')) item.node.setAttribute('aria-hidden', 'true');
+        }
+    });
+    
 };
 
 const writeTotals = ({ current, items, settings, dom }) => dom.total.innerHTML = sanitise(settings.announcement(current + 1, items.length));
@@ -86,7 +95,7 @@ export const change = (Store, next) => {
         },
         () => {
             items[next].node.classList.add('is--active');
-            items[current].node.removeAttribute('aria-hidden');
+            items[next].node.removeAttribute('aria-hidden');
         },
         () => loadImages(Store)(next),
         writeTotals

From 85189bce5ce6db039cceebfd10cb6ca49f6f03c4 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Mon, 10 Jan 2022 09:54:38 +0000
Subject: [PATCH 08/49] Promisify image loading

---
 .../initialisation/manual-initialisation.js   |  7 ++--
 packages/gallery/src/lib/dom.js               | 33 ++++++++++++++-----
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/gallery/__tests__/initialisation/manual-initialisation.js b/packages/gallery/__tests__/initialisation/manual-initialisation.js
index da1e85b2..419ddb36 100644
--- a/packages/gallery/__tests__/initialisation/manual-initialisation.js
+++ b/packages/gallery/__tests__/initialisation/manual-initialisation.js
@@ -4,7 +4,7 @@ import { ATTRIBUTE } from '../../src/lib/constants';
 
 describe('Gallery > initialisation > manual initialisation', () => {
 
-    it('Should not set an active item, nor load any images', () => {
+    it('Should not set an active item, nor load any images', async () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
@@ -86,8 +86,9 @@ describe('Gallery > initialisation > manual initialisation', () => {
         expect(items[0].node.hasAttribute('aria-hidden')).toEqual(true);
         expect(items[0].node.classList.contains(defaults.currentClassName)).toEqual(false);
 
-        instance.initialise();
-        
+        const imgs = await instance.initialise();
+        console.log(imgs);
+        expect(items[0].node.hasAttribute(ATTRIBUTE.LOADED)).toEqual(false);
         expect(items[0].node.hasAttribute('aria-hidden')).toEqual(false);
         expect(items[0].node.classList.contains(defaults.currentClassName)).toEqual(true);
     });
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 235946a0..b5b0ab2e 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -12,7 +12,12 @@ const loadSources = (picture, item) => {
     }
 };
 
-const loadImage = Store => (item, i) => {
+/*
+ * Returns an array of Promises
+ *
+ * @param i, Number, index of item
+ */
+const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
     const img = item.node.querySelector('img');
     const picture = item.node.querySelector('picture');
     try {
@@ -21,6 +26,7 @@ const loadImage = Store => (item, i) => {
             items[i].loaded = true;
             item.node.classList.remove(loadingClassName);
             Store.dispatch({ items });
+            resolve(img);
         };
         if (picture) loadSources(item);
 
@@ -31,24 +37,35 @@ const loadImage = Store => (item, i) => {
         if (img.complete) loaded();
     } catch (e) {
         console.warn('Gallery cannot load image', e);
+        reject(img);
     };
-};
+});
 
+/*
+ * Returns an array of Promises
+ *
+ * @param i, Number, index of item
+ */
 const loadImages = Store => i => {
     const { items, loadingClassName } = Store.getState();
     const indexes = [i];
 
     if (items.length > 1) indexes.push(i === 0 ? items.length - 1 : i - 1);
     if (items.length > 2) indexes.push(i === items.length - 1 ? 0 : i + 1);
-    indexes.forEach(idx => {
+    return indexes.forEach(idx => {
         if (!items[idx].loaded) {
             items[idx].node.classList.add(loadingClassName);
-            loadImage(Store)(items[idx], idx);
+            return loadImage(Store)(items[idx], idx);
         }
     });
 
 };
 
+/*
+ * Returns a Promise wrapping the loading image Promises using Promise.all
+ *
+ * @param i, Number, index of item
+ */
 export const init = Store => () => {
     const state = Store.getState();
     const { settings, items, dom, current } = state;
@@ -59,10 +76,6 @@ export const init = Store => () => {
     if (dom.fullscreen) dom.fullscreen.addEventListener('click', toggleFullScreen.bind(null, Store));
     if (dom.previous) dom.previous.addEventListener('click', previous.bind(null, Store));
     if (dom.next) dom.next.addEventListener('click', next.bind(null, Store));
-
-    //preload all images if setting is true, or just previous and next
-    if (settings.preload) items.map(loadImage(Store));
-    else loadImages(Store)(current);
     
     //set initial DOM state
     items.forEach((item, i) => {
@@ -74,6 +87,10 @@ export const init = Store => () => {
             if (!item.node.hasAttribute('aria-hidden')) item.node.setAttribute('aria-hidden', 'true');
         }
     });
+
+    //preload all images if setting is true, or just previous and next
+    if (settings.preload) return Promise.all(items.map(loadImage(Store)));
+    return Promise.all(loadImages(Store)(current));
     
 };
 

From 94459bbe2941c3c6ac4720e877818849537e004a Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Mon, 10 Jan 2022 21:42:11 +0000
Subject: [PATCH 09/49] Start img render refactor

---
 packages/gallery/__tests__/api.js             | 16 +++---
 .../gallery/__tests__/initialisation/basic.js |  8 +--
 .../initialisation/manual-initialisation.js   | 10 ++--
 packages/gallery/example/src/index.html       |  6 +-
 packages/gallery/src/lib/defaults.js          | 10 +++-
 packages/gallery/src/lib/dom.js               | 55 +++++++++++--------
 packages/gallery/src/lib/factory.js           |  2 +-
 packages/gallery/src/lib/utils.js             |  3 +-
 8 files changed, 63 insertions(+), 47 deletions(-)

diff --git a/packages/gallery/__tests__/api.js b/packages/gallery/__tests__/api.js
index 00d2a4f8..0c97da49 100644
--- a/packages/gallery/__tests__/api.js
+++ b/packages/gallery/__tests__/api.js
@@ -22,7 +22,7 @@ beforeAll(() => {
                             data-gallery-item
                             data-gallery-item-loaded
                         >
-                            <div class="gallery__item-img-container">
+                            <div class="gallery__item-img-container" data-gallery-img-container>
                                 <img 
                                     alt="Image one"
                                     class="gallery__item-img"
@@ -50,7 +50,7 @@ beforeAll(() => {
                             data-gallery-item-src="http://placehold.it/600x600"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container">
+                            <div class="gallery__item-img-container" data-gallery-img-container>
                                 <img 
                                     alt="Image two"
                                     class="gallery__item-img"
@@ -78,7 +78,7 @@ beforeAll(() => {
                             data-gallery-item-src="http://placehold.it/1200x1200"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container">
+                            <div class="gallery__item-img-container" data-gallery-img-container>
                                 <img 
                                     alt="Image two"
                                     class="gallery__item-img"
@@ -115,7 +115,7 @@ describe('Gallery > API', () => {
         const node = document.querySelector('.js-gallery');
         expect(instance.getState).toBeDefined();
         expect(instance.getState().node).toEqual(node);
-        expect(instance.getState().current).toEqual(0);
+        expect(instance.getState().activeIndex).toEqual(0);
     });
 
     it('Should have an API method initialise', () => {
@@ -125,13 +125,13 @@ describe('Gallery > API', () => {
 
     it('Should have an API method goTo', () => {
         expect(instance.goTo).toBeDefined();
-        expect(instance.getState().current).toEqual(0);
+        expect(instance.getState().activeIndex).toEqual(0);
         instance.goTo(2);
-        expect(instance.getState().current).toEqual(2);
+        expect(instance.getState().activeIndex).toEqual(2);
         const galleryItems = Array.from(document.querySelectorAll(defaults.selector.item));
-        expect(galleryItems[0].classList.contains(defaults.currentClassName)).toEqual(false);
+        expect(galleryItems[0].classList.contains(defaults.className.active)).toEqual(false);
         expect(galleryItems[0].hasAttribute('aria-hidden')).toEqual(true);
-        expect(galleryItems[2].classList.contains(defaults.currentClassName)).toEqual(true);
+        expect(galleryItems[2].classList.contains(defaults.className.active)).toEqual(true);
         expect(galleryItems[2].hasAttribute('aria-hidden')).toEqual(false);
     });
 
diff --git a/packages/gallery/__tests__/initialisation/basic.js b/packages/gallery/__tests__/initialisation/basic.js
index 7037f5b7..a3444f55 100644
--- a/packages/gallery/__tests__/initialisation/basic.js
+++ b/packages/gallery/__tests__/initialisation/basic.js
@@ -28,7 +28,7 @@ describe('Gallery > initialisation', () => {
                             data-gallery-item
                             data-gallery-item-loaded
                         >
-                            <div class="gallery__item-img-container">
+                            <div class="gallery__item-img-container" data-gallery-img-container>
                                 <img 
                                     alt="Image one"
                                     class="gallery__item-img"
@@ -56,7 +56,7 @@ describe('Gallery > initialisation', () => {
                             data-gallery-item-src="http://placehold.it/1200x1200"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container">
+                            <div class="gallery__item-img-container" data-gallery-img-container>
                                 <img 
                                     alt="Image two"
                                     class="gallery__item-img"
@@ -110,7 +110,7 @@ describe('Gallery > initialisation', () => {
                             data-gallery-item
                             data-gallery-item-loaded
                         >
-                            <div class="gallery__item-img-container">
+                            <div class="gallery__item-img-container" data-gallery-img-container>
                                 <img 
                                     alt="Image one"
                                     class="gallery__item-img"
@@ -138,7 +138,7 @@ describe('Gallery > initialisation', () => {
                             data-gallery-item-src="http://placehold.it/1200x1200"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container">
+                            <div class="gallery__item-img-container" data-gallery-img-container>
                                 <img 
                                     alt="Image two"
                                     class="gallery__item-img"
diff --git a/packages/gallery/__tests__/initialisation/manual-initialisation.js b/packages/gallery/__tests__/initialisation/manual-initialisation.js
index 419ddb36..b2d24dfe 100644
--- a/packages/gallery/__tests__/initialisation/manual-initialisation.js
+++ b/packages/gallery/__tests__/initialisation/manual-initialisation.js
@@ -4,7 +4,7 @@ import { ATTRIBUTE } from '../../src/lib/constants';
 
 describe('Gallery > initialisation > manual initialisation', () => {
 
-    it('Should not set an active item, nor load any images', async () => {
+    it('Should not set an active item, nor load any images until manually initialised', async () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
@@ -24,7 +24,7 @@ describe('Gallery > initialisation > manual initialisation', () => {
                             data-gallery-item-src="http://placehold.it/800x800"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container">
+                            <div class="gallery__item-img-container" data-gallery-img-container>
                                 <img 
                                     alt="Image one"
                                     class="gallery__item-img"
@@ -52,7 +52,7 @@ describe('Gallery > initialisation > manual initialisation', () => {
                             data-gallery-item-src="http://placehold.it/1200x1200"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container">
+                            <div class="gallery__item-img-container" data-gallery-img-container>
                                 <img 
                                     alt="Image two"
                                     class="gallery__item-img"
@@ -84,13 +84,13 @@ describe('Gallery > initialisation > manual initialisation', () => {
         expect(instance.getState).toBeDefined();
         const { items } = instance.getState();
         expect(items[0].node.hasAttribute('aria-hidden')).toEqual(true);
-        expect(items[0].node.classList.contains(defaults.currentClassName)).toEqual(false);
+        expect(items[0].node.classList.contains(defaults.className.active)).toEqual(false);
 
         const imgs = await instance.initialise();
         console.log(imgs);
         expect(items[0].node.hasAttribute(ATTRIBUTE.LOADED)).toEqual(false);
         expect(items[0].node.hasAttribute('aria-hidden')).toEqual(false);
-        expect(items[0].node.classList.contains(defaults.currentClassName)).toEqual(true);
+        expect(items[0].node.classList.contains(defaults.className.active)).toEqual(true);
     });
 
 });
\ No newline at end of file
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 2bf023cd..79bac2d4 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -68,7 +68,7 @@ <h2 class="visually-hidden">Gallery</h2>
                         data-gallery-item
                         data-gallery-item-loaded
                     >
-                        <div class="gallery__item-img-container">
+                        <div class="gallery__item-img-container" data-gallery-img-container>
                             <img 
                                 alt="Image one"
                                 class="gallery__item-img"
@@ -96,7 +96,7 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                         data-gallery-item-src="http://placehold.it/1200x1200"
                         aria-hidden="true"
                     >
-                        <div class="gallery__item-img-container">
+                        <div class="gallery__item-img-container" data-gallery-img-container>
                             <img 
                                 alt="Image two"
                                 class="gallery__item-img"
@@ -124,7 +124,7 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                         data-gallery-item-src="http://placehold.it/600x600"
                         aria-hidden="true"
                     >
-                        <div class="gallery__item-img-container">
+                        <div class="gallery__item-img-container" data-gallery-img-container>
                             <img 
                                 alt="Image three"
                                 class="gallery__item-img"
diff --git a/packages/gallery/src/lib/defaults.js b/packages/gallery/src/lib/defaults.js
index 1fc4e181..a5c2c7f3 100644
--- a/packages/gallery/src/lib/defaults.js
+++ b/packages/gallery/src/lib/defaults.js
@@ -9,12 +9,16 @@ export default {
         fullscreen: '[data-gallery-fullscreen]',
         total: '[data-gallery-total]',
         previous: '[data-gallery-previous]',
-        next: '[data-gallery-next]'
+        next: '[data-gallery-next]',
+        imgContainer: '[data-gallery-img-container]'
+    },
+    className: {
+        active: 'is--active',
+        loading: 'is--loading',
+        img: 'gallery-item__image'
     },
     manualInitialisation: false, //if the gallery is hidden (e.g. in a modal) we may wish to delay initialisation and image loading until it is activiated
     updateURL: true, //change URL when item changes
-    currentClassName: 'is--active',
-    loadingClassName: 'is--loading',
     announcement(current, total){
         return `${current} of ${total}`;
     }
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index b5b0ab2e..4e7e7a3b 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -18,17 +18,27 @@ const loadSources = (picture, item) => {
  * @param i, Number, index of item
  */
 const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
-    const img = item.node.querySelector('img');
-    const picture = item.node.querySelector('picture');
+
+    /*
+    To do:
+    we cannot rely on img.complete if we are using a placeholder/spinner 
+    - replace the img with a new one? -> need to be sure that the current img is not the correct one already loaded
+
+    - assume picture tag is not present and  we need to create it if there are item.sources
+    */
+
+    const loadingImg = item.node.querySelector('img');
+    const img = new Image();
     try {
         const loaded = () => {
-            const { items, loadingClassName } = Store.getState();
+            const { items, settings } = Store.getState();
             items[i].loaded = true;
-            item.node.classList.remove(loadingClassName);
+            item.node.classList.remove(settings.className.loading);
             Store.dispatch({ items });
+            console.log('loaded');
             resolve(img);
         };
-        if (picture) loadSources(item);
+        if (item[i].sources && item[i].sources.length > 0) loadSources(item);
 
         img.onload = loaded;
         if (item.srcset) img.setAttribute('srcset', item.srcset);
@@ -47,14 +57,15 @@ const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
  * @param i, Number, index of item
  */
 const loadImages = Store => i => {
-    const { items, loadingClassName } = Store.getState();
+    const { items, settings } = Store.getState();
     const indexes = [i];
 
     if (items.length > 1) indexes.push(i === 0 ? items.length - 1 : i - 1);
     if (items.length > 2) indexes.push(i === items.length - 1 ? 0 : i + 1);
-    return indexes.forEach(idx => {
+    
+    return indexes.map(idx => {
         if (!items[idx].loaded) {
-            items[idx].node.classList.add(loadingClassName);
+            items[idx].node.classList.add(settings.className.loading);
             return loadImage(Store)(items[idx], idx);
         }
     });
@@ -68,7 +79,7 @@ const loadImages = Store => i => {
  */
 export const init = Store => () => {
     const state = Store.getState();
-    const { settings, items, dom, current } = state;
+    const { settings, items, dom, activeIndex } = state;
     
     //initialise buttons
     if (!dom.total) console.warn(`A live region announcing current and total items is recommended for screen readers.`);
@@ -79,22 +90,22 @@ export const init = Store => () => {
     
     //set initial DOM state
     items.forEach((item, i) => {
-        if (i === current) {
-            if (!item.node.classList.contains(settings.currentClassName)) item.node.classList.add(settings.currentClassName);
+        if (i === activeIndex) {
+            if (!item.node.classList.contains(settings.className.active)) item.node.classList.add(settings.className.active);
             if (item.node.hasAttribute('aria-hidden')) item.node.removeAttribute('aria-hidden');
         } else {
-            if (item.node.classList.contains(settings.currentClassName)) item.node.classList.remove(settings.currentClassName);
+            if (item.node.classList.contains(settings.className.active)) item.node.classList.remove(settings.className.active);
             if (!item.node.hasAttribute('aria-hidden')) item.node.setAttribute('aria-hidden', 'true');
         }
     });
 
     //preload all images if setting is true, or just previous and next
     if (settings.preload) return Promise.all(items.map(loadImage(Store)));
-    return Promise.all(loadImages(Store)(current));
+    return Promise.all(loadImages(Store)(activeIndex));
     
 };
 
-const writeTotals = ({ current, items, settings, dom }) => dom.total.innerHTML = sanitise(settings.announcement(current + 1, items.length));
+const writeTotals = ({ activeIndex, items, settings, dom }) => dom.total.innerHTML = sanitise(settings.announcement(activeIndex + 1, items.length));
 
 export const toggleFullScreen = Store => {
     const { node } = Store.getState();
@@ -103,12 +114,12 @@ export const toggleFullScreen = Store => {
 };
 
 export const change = (Store, next) => {
-    const { current, items } = Store.getState();
+    const { activeIndex, items } = Store.getState();
 
-    Store.dispatch({ current: next }, [
+    Store.dispatch({ activeIndex: next }, [
         () => {
-            items[current].node.classList.remove('is--active');
-            items[current].node.setAttribute('aria-hidden', 'true');
+            items[activeIndex].node.classList.remove('is--active');
+            items[activeIndex].node.setAttribute('aria-hidden', 'true');
         },
         () => {
             items[next].node.classList.add('is--active');
@@ -120,13 +131,13 @@ export const change = (Store, next) => {
 };
 
 export const previous = Store => {
-    const { current, items } = Store.getState();
-    change(Store, (current === 0 ? items.length - 1 : current - 1));
+    const { activeIndex, items } = Store.getState();
+    change(Store, (activeIndex === 0 ? items.length - 1 : activeIndex - 1));
 };
 
 export const next = Store => {
-    const { current, items } = Store.getState();
-    change(Store, (current === items.length - 1 ? 0 : current + 1));
+    const { activeIndex, items } = Store.getState();
+    change(Store, (activeIndex === items.length - 1 ? 0 : activeIndex + 1));
 };
 
 export const goTo = Store => i => {
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index 2bddbd83..3492f194 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -19,7 +19,7 @@ export default (node, settings) => {
         settings,
         items: composeItems(items),
         dom: composeDOM(node, settings),
-        current: settings.startIndex
+        activeIndex: settings.startIndex
     }, [ () => !settings.manualInitialisation && init(Store)() ]);
 
     return {
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 4ac921cb..dedfcd0a 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -24,5 +24,6 @@ export const composeDOM = (node, settings) => ({
     total: node.querySelector(settings.selector.total),
     fullscreen: node.querySelector(settings.selector.fullscreen),
     previous: node.querySelector(settings.selector.previous),
-    next: node.querySelector(settings.selector.next)
+    next: node.querySelector(settings.selector.next),
+    imgContainer: node.querySelector(settings.selector.imgContainer)
 });
\ No newline at end of file

From bb20be2d3080b7ec2f2ca26ccf8e396bcdd44928 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Mon, 10 Jan 2022 23:34:34 +0000
Subject: [PATCH 10/49] Refactor image loading

---
 packages/gallery/__tests__/api.js             |  6 +--
 .../gallery/__tests__/initialisation/basic.js |  8 ++--
 .../initialisation/manual-initialisation.js   |  6 +--
 packages/gallery/example/src/index.html       |  6 +--
 packages/gallery/src/lib/defaults.js          |  2 +-
 packages/gallery/src/lib/dom.js               | 48 ++++++++++---------
 packages/gallery/src/lib/factory.js           |  2 +-
 packages/gallery/src/lib/utils.js             |  9 ++--
 8 files changed, 46 insertions(+), 41 deletions(-)

diff --git a/packages/gallery/__tests__/api.js b/packages/gallery/__tests__/api.js
index 0c97da49..f7cd6980 100644
--- a/packages/gallery/__tests__/api.js
+++ b/packages/gallery/__tests__/api.js
@@ -22,7 +22,7 @@ beforeAll(() => {
                             data-gallery-item
                             data-gallery-item-loaded
                         >
-                            <div class="gallery__item-img-container" data-gallery-img-container>
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
                                     alt="Image one"
                                     class="gallery__item-img"
@@ -50,7 +50,7 @@ beforeAll(() => {
                             data-gallery-item-src="http://placehold.it/600x600"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container" data-gallery-img-container>
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
                                     alt="Image two"
                                     class="gallery__item-img"
@@ -78,7 +78,7 @@ beforeAll(() => {
                             data-gallery-item-src="http://placehold.it/1200x1200"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container" data-gallery-img-container>
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
                                     alt="Image two"
                                     class="gallery__item-img"
diff --git a/packages/gallery/__tests__/initialisation/basic.js b/packages/gallery/__tests__/initialisation/basic.js
index a3444f55..f95a1247 100644
--- a/packages/gallery/__tests__/initialisation/basic.js
+++ b/packages/gallery/__tests__/initialisation/basic.js
@@ -28,7 +28,7 @@ describe('Gallery > initialisation', () => {
                             data-gallery-item
                             data-gallery-item-loaded
                         >
-                            <div class="gallery__item-img-container" data-gallery-img-container>
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
                                     alt="Image one"
                                     class="gallery__item-img"
@@ -56,7 +56,7 @@ describe('Gallery > initialisation', () => {
                             data-gallery-item-src="http://placehold.it/1200x1200"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container" data-gallery-img-container>
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
                                     alt="Image two"
                                     class="gallery__item-img"
@@ -110,7 +110,7 @@ describe('Gallery > initialisation', () => {
                             data-gallery-item
                             data-gallery-item-loaded
                         >
-                            <div class="gallery__item-img-container" data-gallery-img-container>
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
                                     alt="Image one"
                                     class="gallery__item-img"
@@ -138,7 +138,7 @@ describe('Gallery > initialisation', () => {
                             data-gallery-item-src="http://placehold.it/1200x1200"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container" data-gallery-img-container>
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
                                     alt="Image two"
                                     class="gallery__item-img"
diff --git a/packages/gallery/__tests__/initialisation/manual-initialisation.js b/packages/gallery/__tests__/initialisation/manual-initialisation.js
index b2d24dfe..d899c6ef 100644
--- a/packages/gallery/__tests__/initialisation/manual-initialisation.js
+++ b/packages/gallery/__tests__/initialisation/manual-initialisation.js
@@ -3,7 +3,7 @@ import defaults from '../../src/lib/defaults';
 import { ATTRIBUTE } from '../../src/lib/constants';
 
 describe('Gallery > initialisation > manual initialisation', () => {
-
+    
     it('Should not set an active item, nor load any images until manually initialised', async () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
@@ -24,7 +24,7 @@ describe('Gallery > initialisation > manual initialisation', () => {
                             data-gallery-item-src="http://placehold.it/800x800"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container" data-gallery-img-container>
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
                                     alt="Image one"
                                     class="gallery__item-img"
@@ -52,7 +52,7 @@ describe('Gallery > initialisation > manual initialisation', () => {
                             data-gallery-item-src="http://placehold.it/1200x1200"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container" data-gallery-img-container>
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
                                     alt="Image two"
                                     class="gallery__item-img"
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 79bac2d4..10d6e073 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -68,7 +68,7 @@ <h2 class="visually-hidden">Gallery</h2>
                         data-gallery-item
                         data-gallery-item-loaded
                     >
-                        <div class="gallery__item-img-container" data-gallery-img-container>
+                        <div class="gallery__item-img-container" data-gallery-item-img-container>
                             <img 
                                 alt="Image one"
                                 class="gallery__item-img"
@@ -96,7 +96,7 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                         data-gallery-item-src="http://placehold.it/1200x1200"
                         aria-hidden="true"
                     >
-                        <div class="gallery__item-img-container" data-gallery-img-container>
+                        <div class="gallery__item-img-container" data-gallery-item-img-container>
                             <img 
                                 alt="Image two"
                                 class="gallery__item-img"
@@ -124,7 +124,7 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                         data-gallery-item-src="http://placehold.it/600x600"
                         aria-hidden="true"
                     >
-                        <div class="gallery__item-img-container" data-gallery-img-container>
+                        <div class="gallery__item-img-container" data-gallery-item-img-container>
                             <img 
                                 alt="Image three"
                                 class="gallery__item-img"
diff --git a/packages/gallery/src/lib/defaults.js b/packages/gallery/src/lib/defaults.js
index a5c2c7f3..bb9288dd 100644
--- a/packages/gallery/src/lib/defaults.js
+++ b/packages/gallery/src/lib/defaults.js
@@ -10,7 +10,7 @@ export default {
         total: '[data-gallery-total]',
         previous: '[data-gallery-previous]',
         next: '[data-gallery-next]',
-        imgContainer: '[data-gallery-img-container]'
+        imgContainer: '[data-gallery-item-img-container]'
     },
     className: {
         active: 'is--active',
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 4e7e7a3b..ca7fabb0 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -1,49 +1,53 @@
 import { sanitise } from './utils';
 
-const loadSources = (picture, item) => {
-    if (item.sources && item.sources.length > 0) {
-        for (let i in item.sources){
-            const source = document.createElement('source');
-            if (item.sources[i].srcset) source.setAttribute('srcset', item.sources[i].srcset);
-            if (item.sources[i].media) source.setAttribute('media', item.sources[i].media);
-            if (item.sources[i].type) source.setAttribute('srcset', item.sources[i].type);
-            picture.insertBefore(source, picture.firstElementChild);
-        }
+const createPicture = item => {
+    const picture = document.createElement('picture');
+    for (let i in item.sources){
+        const source = document.createElement('source');
+        if (item.sources[i].srcset) source.setAttribute('srcset', item.sources[i].srcset);
+        if (item.sources[i].media) source.setAttribute('media', item.sources[i].media);
+        if (item.sources[i].type) source.setAttribute('srcset', item.sources[i].type);
+        picture.insertBefore(source, picture.firstElementChild);
     }
+    return picture;
 };
 
 /*
  * Returns an array of Promises
  *
+ * 
  * @param i, Number, index of item
  */
 const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
+    const { items, settings } = Store.getState();
 
-    /*
-    To do:
-    we cannot rely on img.complete if we are using a placeholder/spinner 
-    - replace the img with a new one? -> need to be sure that the current img is not the correct one already loaded
-
-    - assume picture tag is not present and  we need to create it if there are item.sources
-    */
+    // We're here because the library does not think that the item is loaded
+    // because the item does not have the ATTRIBUTE.LOADED attribute,
+    // and the imgNode src does not match the item ATTRIBUTE.SRC
+    // therefore we can assume that any img (or SVG) present is a loading state and should be removed when the 
+    const loadingImg = item.imgContainer.querySelector('img, svg');
 
-    const loadingImg = item.node.querySelector('img');
     const img = new Image();
+    let picture = false;
     try {
         const loaded = () => {
-            const { items, settings } = Store.getState();
-            items[i].loaded = true;
+            item.loaded = true;
             item.node.classList.remove(settings.className.loading);
             Store.dispatch({ items });
-            console.log('loaded');
+            if (loadingImg) loadingImg.parentNode.removeChild(loadingImg);
+            if (picture) {
+                picture.appendChild(img);
+                item.imgContainer.appendChild(picture);
+            } else item.imgContainer.appendChild(img);
+
             resolve(img);
         };
-        if (item[i].sources && item[i].sources.length > 0) loadSources(item);
-
         img.onload = loaded;
         if (item.srcset) img.setAttribute('srcset', item.srcset);
         if (item.src) img.setAttribute('src', item.src);
         if (item.sizes) img.setAttribute('sizes', item.sizes);
+        //assume picture tag is not present and  we need to create it if there are item.sources
+        if (item.sources && item.sources.length > 0) picture = createPicture(item);
         if (img.complete) loaded();
     } catch (e) {
         console.warn('Gallery cannot load image', e);
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index 3492f194..6045e504 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -17,7 +17,7 @@ export default (node, settings) => {
     Store.dispatch({
         node,
         settings,
-        items: composeItems(items),
+        items: composeItems(items, settings),
         dom: composeDOM(node, settings),
         activeIndex: settings.startIndex
     }, [ () => !settings.manualInitialisation && init(Store)() ]);
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index dedfcd0a..aca9d94a 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -2,9 +2,10 @@ import { ATTRIBUTE } from './constants';
 
 export const sanitise = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
-export const composeItems = nodes => nodes.map(node => {
+export const composeItems = (nodes, settings) => nodes.map(node => {
     //must contain an img element
-    const imgNode = node.querySelector('img');
+    const imgContainer = node.querySelector(settings.selector.imgContainer);
+    const imgNode = imgContainer.querySelector('img');
     if (!imgNode) return void console.warn('Gallery cannot find image');
 
     const item = {
@@ -14,6 +15,7 @@ export const composeItems = nodes => nodes.map(node => {
         sizes: node.getAttribute(ATTRIBUTE.SIZES),
         src: node.getAttribute(ATTRIBUTE.SRC),
         alt: node.getAttribute(ATTRIBUTE.ALT),
+        imgContainer,
         loaded: node.hasAttribute(ATTRIBUTE.LOADED) || imgNode.getAttribute('src') === node.getAttribute(ATTRIBUTE.SRC)
     };
     if (!item.sources && !item.srcset && !item.src && !item.loaded) return void console.warn('Gallery cannot be initialised, no image sources found');
@@ -24,6 +26,5 @@ export const composeDOM = (node, settings) => ({
     total: node.querySelector(settings.selector.total),
     fullscreen: node.querySelector(settings.selector.fullscreen),
     previous: node.querySelector(settings.selector.previous),
-    next: node.querySelector(settings.selector.next),
-    imgContainer: node.querySelector(settings.selector.imgContainer)
+    next: node.querySelector(settings.selector.next)
 });
\ No newline at end of file

From 195ce6652107ab71076685eea813443531b38111 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Tue, 11 Jan 2022 17:34:44 +0000
Subject: [PATCH 11/49] Mock image complete for testing

---
 .../__tests__/initialisation/manual-initialisation.js  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/gallery/__tests__/initialisation/manual-initialisation.js b/packages/gallery/__tests__/initialisation/manual-initialisation.js
index d899c6ef..c69d136c 100644
--- a/packages/gallery/__tests__/initialisation/manual-initialisation.js
+++ b/packages/gallery/__tests__/initialisation/manual-initialisation.js
@@ -3,7 +3,15 @@ import defaults from '../../src/lib/defaults';
 import { ATTRIBUTE } from '../../src/lib/constants';
 
 describe('Gallery > initialisation > manual initialisation', () => {
-    
+    //mock image complete because JSDom cannot load images
+    beforeAll(() => {
+        Object.defineProperty(Image.prototype, 'complete', {
+            get() {
+                return true;
+            }
+        });
+    });
+
     it('Should not set an active item, nor load any images until manually initialised', async () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>

From 1e03af344fefe26d0327f26527ec72961b95cfde Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Tue, 11 Jan 2022 17:48:57 +0000
Subject: [PATCH 12/49] Update manbual initialisation test

---
 .../gallery/__tests__/initialisation/manual-initialisation.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/gallery/__tests__/initialisation/manual-initialisation.js b/packages/gallery/__tests__/initialisation/manual-initialisation.js
index c69d136c..940c8aef 100644
--- a/packages/gallery/__tests__/initialisation/manual-initialisation.js
+++ b/packages/gallery/__tests__/initialisation/manual-initialisation.js
@@ -95,10 +95,12 @@ describe('Gallery > initialisation > manual initialisation', () => {
         expect(items[0].node.classList.contains(defaults.className.active)).toEqual(false);
 
         const imgs = await instance.initialise();
-        console.log(imgs);
         expect(items[0].node.hasAttribute(ATTRIBUTE.LOADED)).toEqual(false);
         expect(items[0].node.hasAttribute('aria-hidden')).toEqual(false);
         expect(items[0].node.classList.contains(defaults.className.active)).toEqual(true);
+        expect(imgs.length).toEqual(2);
+        expect(imgs[0].src).toEqual('http://placehold.it/800x800');
+        expect(imgs[1].src).toEqual('http://placehold.it/1200x1200');
     });
 
 });
\ No newline at end of file

From 1c0bf34cb5e3954105f41d6751b67c7f0e869d6e Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Tue, 11 Jan 2022 18:10:15 +0000
Subject: [PATCH 13/49] Add interaction tests

---
 .../__tests__/initialisation/image-loading.js | 121 +++++++++++++++++
 packages/gallery/__tests__/interactions.js    | 123 ++++++++++++++++++
 2 files changed, 244 insertions(+)
 create mode 100644 packages/gallery/__tests__/initialisation/image-loading.js
 create mode 100644 packages/gallery/__tests__/interactions.js

diff --git a/packages/gallery/__tests__/initialisation/image-loading.js b/packages/gallery/__tests__/initialisation/image-loading.js
new file mode 100644
index 00000000..49d29e12
--- /dev/null
+++ b/packages/gallery/__tests__/initialisation/image-loading.js
@@ -0,0 +1,121 @@
+import gallery from '../../src';
+
+let instance;
+
+beforeAll(() => {
+    document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/600x600"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+    [ instance ] = gallery('.js-gallery');
+});
+
+describe('Gallery > image loading', () => {
+
+    it('should load the previous and next images', () => {
+        instance.getState().items.forEach(item => {
+            //need to wait for the image to load
+            //+ need to mock image loading
+            //expect(item.loaded).toEqual(true);
+        });
+    });
+
+});
\ No newline at end of file
diff --git a/packages/gallery/__tests__/interactions.js b/packages/gallery/__tests__/interactions.js
new file mode 100644
index 00000000..b4365e01
--- /dev/null
+++ b/packages/gallery/__tests__/interactions.js
@@ -0,0 +1,123 @@
+import gallery from '../src';
+
+let instance;
+
+beforeAll(() => {
+    document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/600x600"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+    [ instance ] = gallery('.js-gallery');
+});
+
+describe('Gallery > interactions', () => {
+
+    it('should navigate to the next item via the next button', () => {
+        expect(instance.getState().activeIndex).toEqual(0);
+        instance.getState().dom.next.click();
+        expect(instance.getState().activeIndex).toEqual(1);
+        instance.getState().dom.next.click();
+        expect(instance.getState().activeIndex).toEqual(2);
+        instance.getState().dom.next.click();
+        expect(instance.getState().activeIndex).toEqual(0);
+    });
+
+});
\ No newline at end of file

From 75b4f3c5de6845835b386d6e446053af9a8efc2a Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Wed, 12 Jan 2022 09:06:54 +0000
Subject: [PATCH 14/49] Add image loading test

---
 .../gallery/__tests__/initialisation/image-loading.js  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/gallery/__tests__/initialisation/image-loading.js b/packages/gallery/__tests__/initialisation/image-loading.js
index 49d29e12..43a00da5 100644
--- a/packages/gallery/__tests__/initialisation/image-loading.js
+++ b/packages/gallery/__tests__/initialisation/image-loading.js
@@ -3,6 +3,14 @@ import gallery from '../../src';
 let instance;
 
 beforeAll(() => {
+    //mock image complete because JSDom cannot load images
+    beforeAll(() => {
+        Object.defineProperty(Image.prototype, 'complete', {
+            get() {
+                return true;
+            }
+        });
+    });
     document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
@@ -114,7 +122,7 @@ describe('Gallery > image loading', () => {
         instance.getState().items.forEach(item => {
             //need to wait for the image to load
             //+ need to mock image loading
-            //expect(item.loaded).toEqual(true);
+            expect(item.loaded).toEqual(true);
         });
     });
 

From 385d3525fef1a449f877db6e1ae3ef6bfe8a5b83 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Wed, 12 Jan 2022 19:32:31 +0000
Subject: [PATCH 15/49] Add tests

---
 .../{initialisation => }/image-loading.js     |  67 +++-
 .../gallery/__tests__/initialisation/basic.js |  74 ++++
 .../{manual-initialisation.js => manual.js}   |   0
 .../__tests__/initialisation/multiple.js      | 324 ++++++++++++++++++
 packages/gallery/__tests__/interactions.js    |  18 +-
 packages/gallery/src/lib/factory.js           |   2 +-
 6 files changed, 469 insertions(+), 16 deletions(-)
 rename packages/gallery/__tests__/{initialisation => }/image-loading.js (69%)
 rename packages/gallery/__tests__/initialisation/{manual-initialisation.js => manual.js} (100%)
 create mode 100644 packages/gallery/__tests__/initialisation/multiple.js

diff --git a/packages/gallery/__tests__/initialisation/image-loading.js b/packages/gallery/__tests__/image-loading.js
similarity index 69%
rename from packages/gallery/__tests__/initialisation/image-loading.js
rename to packages/gallery/__tests__/image-loading.js
index 43a00da5..da3bb880 100644
--- a/packages/gallery/__tests__/initialisation/image-loading.js
+++ b/packages/gallery/__tests__/image-loading.js
@@ -1,16 +1,15 @@
-import gallery from '../../src';
-
+import gallery from '../src';
+const flushPromises = () => new Promise(setImmediate);
 let instance;
 
 beforeAll(() => {
     //mock image complete because JSDom cannot load images
-    beforeAll(() => {
-        Object.defineProperty(Image.prototype, 'complete', {
-            get() {
-                return true;
-            }
-        });
+    Object.defineProperty(Image.prototype, 'complete', {
+        get() {
+            return true;
+        }
     });
+
     document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
@@ -87,7 +86,7 @@ beforeAll(() => {
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
-                                    alt="Image two"
+                                    alt="Image three"
                                     class="gallery__item-img"
                                     decoding="async"
                                     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
@@ -107,6 +106,34 @@ beforeAll(() => {
                                 </div>
                             </div>
                         </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image four"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - May</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
                     </ul>
                     <button class="gallery__previous" aria-label="Next image" data-gallery-next>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
@@ -118,10 +145,24 @@ beforeAll(() => {
 
 describe('Gallery > image loading', () => {
 
-    it('should load the previous and next images', () => {
-        instance.getState().items.forEach(item => {
-            //need to wait for the image to load
-            //+ need to mock image loading
+    it('should load the previous and next images', async () => {
+        //loadImage is asynchonrous but we do not want to
+        //- return a promise from initialisation... do we?
+        //- broadcast a custom event just for testing (no other concrete use-case yet)
+        //so we're using a bit of a Jest hack to wait for loadImage to have run its course
+        await flushPromises();
+        const { items } = instance.getState();
+        items.forEach((item, i) => {
+            //four items, we expect 0 (startIndex), 1 (next), and 3 (previous) to be loaded
+            expect(item.loaded).toEqual(i !== 2);
+        });
+        //navigate to the next item
+        instance.goTo(1);
+        //wait for loadImage to run its course
+        await flushPromises();
+        //all should be loaded now
+        items.forEach((item, i) => {
+            //four items, we expect 0 (startIndex), 1 (next), and 3 (previous) to be loaded
             expect(item.loaded).toEqual(true);
         });
     });
diff --git a/packages/gallery/__tests__/initialisation/basic.js b/packages/gallery/__tests__/initialisation/basic.js
index f95a1247..b0bca786 100644
--- a/packages/gallery/__tests__/initialisation/basic.js
+++ b/packages/gallery/__tests__/initialisation/basic.js
@@ -9,6 +9,80 @@ describe('Gallery > initialisation', () => {
         expect(console.warn).toHaveBeenCalledWith('Gallery cannot be initialised, no galleries found');
     });
 
+    it('Should console.warn if no items are found', () => {
+        document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        console.warn = jest.fn();
+        gallery('.js-gallery');
+        expect(console.warn).toHaveBeenCalledWith('Gallery cannot be initialised, no items found');
+    });
+
     it('Should return an array of gallery objects', () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
diff --git a/packages/gallery/__tests__/initialisation/manual-initialisation.js b/packages/gallery/__tests__/initialisation/manual.js
similarity index 100%
rename from packages/gallery/__tests__/initialisation/manual-initialisation.js
rename to packages/gallery/__tests__/initialisation/manual.js
diff --git a/packages/gallery/__tests__/initialisation/multiple.js b/packages/gallery/__tests__/initialisation/multiple.js
new file mode 100644
index 00000000..0c05a734
--- /dev/null
+++ b/packages/gallery/__tests__/initialisation/multiple.js
@@ -0,0 +1,324 @@
+import gallery from '../../src';
+
+describe('Gallery > initialisation > multiple', () => {
+
+    it('Should return an array of gallery objects each with a distinct API affecting only that instance', () => {
+        document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>
+            <section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        const instances = gallery('.js-gallery');
+        expect(Array.isArray(instances)).toBe(true);
+        expect(instances.length).toEqual(2);
+
+        //API call to one instance
+        expect(instances[0].getState().activeIndex).toEqual(0);
+        expect(instances[1].getState().activeIndex).toEqual(0);
+        instances[0].goTo(1);
+        expect(instances[0].getState().activeIndex).toEqual(1);
+        expect(instances[1].getState().activeIndex).toEqual(0);
+    });
+
+    it('Should initialise separate instances with differnt settings', () => {
+        document.body.innerHTML = `<section class="gallery js-gallery__1">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>
+            <section class="gallery js-gallery__2">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        const [ one ] = gallery('.js-gallery__1');
+        const [ two ] = gallery('.js-gallery__2', { startIndex: 1 });
+
+        expect(one.getState().activeIndex).toEqual(0);
+        expect(two.getState().activeIndex).toEqual(1);
+        expect(one.getState().settings !== two.getState().settings).toBe(true);
+    });
+
+
+});
\ No newline at end of file
diff --git a/packages/gallery/__tests__/interactions.js b/packages/gallery/__tests__/interactions.js
index b4365e01..1ee6fc4e 100644
--- a/packages/gallery/__tests__/interactions.js
+++ b/packages/gallery/__tests__/interactions.js
@@ -12,7 +12,7 @@ beforeAll(() => {
                     </button>
                 </div>
                 <div class="gallery__main">
-                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
                     <ul class="gallery__list">
@@ -108,7 +108,11 @@ beforeAll(() => {
     [ instance ] = gallery('.js-gallery');
 });
 
-describe('Gallery > interactions', () => {
+//Don't need to test keyboard interactions separately (the test won't work by dispatching an event anyway)
+//https://www.w3.org/TR/WCAG20-TECHS/SCR35.html
+//The onclick event is mapped to the default action of a link or button.
+//The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.
+describe('Gallery > click interactions', () => {
 
     it('should navigate to the next item via the next button', () => {
         expect(instance.getState().activeIndex).toEqual(0);
@@ -120,4 +124,14 @@ describe('Gallery > interactions', () => {
         expect(instance.getState().activeIndex).toEqual(0);
     });
 
+    it('should navigate to the previous item via the previous button', () => {
+        expect(instance.getState().activeIndex).toEqual(0);
+        instance.getState().dom.previous.click();
+        expect(instance.getState().activeIndex).toEqual(2);
+        instance.getState().dom.previous.click();
+        expect(instance.getState().activeIndex).toEqual(1);
+        instance.getState().dom.previous.click();
+        expect(instance.getState().activeIndex).toEqual(0);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index 6045e504..f8081b75 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -12,7 +12,7 @@ export default (node, settings) => {
     const Store = createStore();
 
     const items = [].slice.call(node.querySelectorAll(settings.selector.item));
-    if (items.length === 0) return void console.warn('Gallery cannot be initialised, no items found');
+    if (items.length === 0) return console.warn('Gallery cannot be initialised, no items found'), null;
 
     Store.dispatch({
         node,

From e9357a3a643b47895bf531b1bdcd2abf0e1ad625 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Wed, 12 Jan 2022 22:03:15 +0000
Subject: [PATCH 16/49] Add error hanlding tests

---
 .../initialisation/{basic.js => index.js}     | 160 ++++++++++++++++++
 packages/gallery/src/lib/utils.js             |  20 ++-
 2 files changed, 172 insertions(+), 8 deletions(-)
 rename packages/gallery/__tests__/initialisation/{basic.js => index.js} (60%)

diff --git a/packages/gallery/__tests__/initialisation/basic.js b/packages/gallery/__tests__/initialisation/index.js
similarity index 60%
rename from packages/gallery/__tests__/initialisation/basic.js
rename to packages/gallery/__tests__/initialisation/index.js
index b0bca786..1a38a24a 100644
--- a/packages/gallery/__tests__/initialisation/basic.js
+++ b/packages/gallery/__tests__/initialisation/index.js
@@ -1,4 +1,5 @@
 import gallery from '../../src';
+import defaults from '../../src/lib/defaults';
 
 describe('Gallery > initialisation', () => {
 
@@ -83,6 +84,165 @@ describe('Gallery > initialisation', () => {
         expect(console.warn).toHaveBeenCalledWith('Gallery cannot be initialised, no items found');
     });
 
+    it('Should warn if no image container is found', () => {
+        document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container">
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container">
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        console.warn = jest.fn();
+        gallery('.js-gallery');
+        expect(console.warn).toHaveBeenCalledWith(`Gallery cannot find image container ${defaults.selector.imgContainer}`);
+        
+    });
+
+    it('Should warn if no img src, srcset, or loaded attributes are found', () => {
+        document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        console.warn = jest.fn();
+        gallery('.js-gallery');
+        expect(console.warn).toHaveBeenCalledWith('Gallery cannot be initialised, no image sources found');
+    });
+
     it('Should return an array of gallery objects', () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index aca9d94a..5109eca0 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -3,22 +3,26 @@ import { ATTRIBUTE } from './constants';
 export const sanitise = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
 export const composeItems = (nodes, settings) => nodes.map(node => {
-    //must contain an img element
-    const imgContainer = node.querySelector(settings.selector.imgContainer);
-    const imgNode = imgContainer.querySelector('img');
-    if (!imgNode) return void console.warn('Gallery cannot find image');
-
-    const item = {
+    let item = {
         node,
         sources: node.getAttribute(ATTRIBUTE.SOURCES),
         srcset: node.getAttribute(ATTRIBUTE.SRCSET),
         sizes: node.getAttribute(ATTRIBUTE.SIZES),
         src: node.getAttribute(ATTRIBUTE.SRC),
         alt: node.getAttribute(ATTRIBUTE.ALT),
+    };
+    //must contain an img container element
+    const imgContainer = node.querySelector(settings.selector.imgContainer);
+    if (!imgContainer) return console.warn(`Gallery cannot find image container ${settings.selector.imgContainer}`), item;
+    const imgNode = imgContainer.querySelector('img');
+
+    item = {
+        ...item,
         imgContainer,
-        loaded: node.hasAttribute(ATTRIBUTE.LOADED) || imgNode.getAttribute('src') === node.getAttribute(ATTRIBUTE.SRC)
+        loaded: node.hasAttribute(ATTRIBUTE.LOADED) || (imgNode && imgNode.getAttribute('src') === node.getAttribute(ATTRIBUTE.SRC))
     };
-    if (!item.sources && !item.srcset && !item.src && !item.loaded) return void console.warn('Gallery cannot be initialised, no image sources found');
+    if (!item.sources && !item.srcset && !item.src && !item.loaded) return void console.warn('Gallery cannot be initialised, no image sources found'), item;
+    
     return item;
 });
 

From e9a0b8dc0605c82e799dba0340d57d510d04fe85 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Thu, 13 Jan 2022 18:51:53 +0000
Subject: [PATCH 17/49] Add picture loading

---
 packages/gallery/__tests__/picture.js    | 123 +++++++++++++++
 packages/gallery/example/src/index.html  | 187 ++++++++++-------------
 packages/gallery/example/src/js/index.js |   2 +-
 packages/gallery/src/lib/defaults.js     |   3 +-
 packages/gallery/src/lib/dom.js          |  26 ++--
 packages/gallery/src/lib/factory.js      |   2 +-
 packages/gallery/src/lib/utils.js        |  13 +-
 7 files changed, 236 insertions(+), 120 deletions(-)
 create mode 100644 packages/gallery/__tests__/picture.js

diff --git a/packages/gallery/__tests__/picture.js b/packages/gallery/__tests__/picture.js
new file mode 100644
index 00000000..94d3757d
--- /dev/null
+++ b/packages/gallery/__tests__/picture.js
@@ -0,0 +1,123 @@
+import gallery from '../src';
+const flushPromises = () => new Promise(setImmediate);
+let instance;
+
+beforeAll(() => {
+    //mock image complete because JSDom cannot load images
+    Object.defineProperty(Image.prototype, 'complete', {
+        get() {
+            return true;
+        }
+    });
+
+    document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="https://via.placeholder.com/500x200.png"
+                            data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/700x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1000x200.png", "media": "(min-width:700px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1000px)" }]'
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <div class="gallery-item__loader">Loading...</div>
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="https://via.placeholder.com/420x300.png"
+                            data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/710x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1100x200.png", "media": "(min-width:710px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1100px)" }]'
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <div class="gallery-item__loader">Loading...</div>
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="https://via.placeholder.com/430x300.png"
+                            data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/730x200.png", "media": "(min-width:430px)" }, { "srcset": "https://via.placeholder.com/1300x200.png", "media": "(min-width:730px)" }, { "srcset": "https://via.placeholder.com/1630x200.jpg", "media": "(min-width:1300px)"}]'
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <div class="gallery-item__loader">Loading...</div>
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+    [ instance ] = gallery('.js-gallery');
+});
+
+describe('Gallery > picture loading', () => {
+
+    it('should create a picture element and add sources', async () => {
+
+        await flushPromises();
+        const { items } = instance.getState();
+        items.forEach((item, i) => {
+            expect(item.loaded).toEqual(true);
+            const picture = item.node.querySelector('picture');
+            expect(picture).toBeDefined();
+            const sources = Array.from(picture.querySelectorAll('source'));
+            expect(sources.length).toEqual(item.sources.length);
+            const img = picture.querySelector('img');
+            
+            expect(item.img).toEqual(img);
+        });
+
+    });
+
+});
\ No newline at end of file
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 10d6e073..09d2e73e 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -41,116 +41,93 @@
     </style>
   </head>
   <body>
-      <section class="gallery js-gallery">
-            <h2 class="visually-hidden">Gallery</h2>
-            <div class="gallery__header">
-                <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
-                <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
-                    <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
-                </button>
-            </div>
-            <div class="gallery__main">
-                <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
-                    <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
-                </button>
-                <ul class="gallery__list">
-                    <!--
-                        data-gallery-item-sources="[{ src: '', media: ''}]"
-                        data-gallery-item-srcset="http://placehold.it/800x800 800w, http://placehold.it/500x500 320w"
-                        data-gallery-item-sizes="(max-width: 800px) 100vw, 800px"
-                        data-gallery-item
-                        data-gallery-item-src=""
-                        data-gallery-item-alt=""
-                        data-gallery-item-loaded
-                    -->
-                    <li
-                        class="gallery__item"
-                        data-gallery-item
-                        data-gallery-item-loaded
-                    >
-                        <div class="gallery__item-img-container" data-gallery-item-img-container>
-                            <img 
-                                alt="Image one"
-                                class="gallery__item-img"
-                                decoding="async"
-                                src="http://placehold.it/800x800"
-                            />
-                        </div>
-                        <div class="gallery__item-footer">
-                            <div class="gallery__item-meta">
-                                <div class="gallery__item-description">
-                                    <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                    <div class="gallery__item-category">Architecture - March</div>
-                                    <div class="gallery__item-title">Example project name here</div>
-                                </div>
-                                <ul class="gallery__item-tags">
-                                    <li class="gallery__item-tag">Example tag</li>
-                                    <li class="gallery__item-tag">Example tag</li>
-                                </ul>
+    <section class="gallery js-gallery">
+        <h2 class="visually-hidden">Gallery</h2>
+        <div class="gallery__header">
+            <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+            <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+            </button>
+        </div>
+        <div class="gallery__main">
+            <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+            </button>
+            <ul class="gallery__list">
+                <li
+                    class="gallery__item"
+                    data-gallery-item
+                    data-gallery-item-src="https://via.placeholder.com/500x200.png"
+                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/700x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1000x200.png", "media": "(min-width:700px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1000px)" }]'
+                >
+                    <div class="gallery__item-img-container" data-gallery-item-img-container>
+                        <div class="gallery-item__loader">Loading...</div>
+                    </div>
+                    <div class="gallery__item-footer">
+                        <div class="gallery__item-meta">
+                            <div class="gallery__item-description">
+                                <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                <div class="gallery__item-category">Architecture - March</div>
+                                <div class="gallery__item-title">Example project name here</div>
                             </div>
+                            <ul class="gallery__item-tags">
+                                <li class="gallery__item-tag">Example tag</li>
+                                <li class="gallery__item-tag">Example tag</li>
+                            </ul>
                         </div>
-                    </li>
-                    <li
-                        class="gallery__item"
-                        data-gallery-item
-                        data-gallery-item-src="http://placehold.it/1200x1200"
-                        aria-hidden="true"
-                    >
-                        <div class="gallery__item-img-container" data-gallery-item-img-container>
-                            <img 
-                                alt="Image two"
-                                class="gallery__item-img"
-                                decoding="async"
-                                src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                            />
-                        </div>
-                        <div class="gallery__item-footer">
-                            <div class="gallery__item-meta">
-                                <div class="gallery__item-description">
-                                    <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                    <div class="gallery__item-category">Architecture - April</div>
-                                    <div class="gallery__item-title">Example project name here</div>
-                                </div>
-                                <ul class="gallery__item-tags">
-                                    <li class="gallery__item-tag">Example tag</li>
-                                    <li class="gallery__item-tag">Example tag</li>
-                                </ul>
+                    </div>
+                </li>
+                <li
+                    class="gallery__item"
+                    data-gallery-item
+                    data-gallery-item-src="https://via.placeholder.com/420x300.png"
+                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/710x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1100x200.png", "media": "(min-width:710px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1100px)" }]'
+                >
+                    <div class="gallery__item-img-container" data-gallery-item-img-container>
+                        <div class="gallery-item__loader">Loading...</div>
+                    </div>
+                    <div class="gallery__item-footer">
+                        <div class="gallery__item-meta">
+                            <div class="gallery__item-description">
+                                <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                <div class="gallery__item-category">Architecture - April</div>
+                                <div class="gallery__item-title">Example project name here</div>
                             </div>
+                            <ul class="gallery__item-tags">
+                                <li class="gallery__item-tag">Example tag</li>
+                                <li class="gallery__item-tag">Example tag</li>
+                            </ul>
                         </div>
-                    </li>
-                    <li
-                        class="gallery__item"
-                        data-gallery-item
-                        data-gallery-item-src="http://placehold.it/600x600"
-                        aria-hidden="true"
-                    >
-                        <div class="gallery__item-img-container" data-gallery-item-img-container>
-                            <img 
-                                alt="Image three"
-                                class="gallery__item-img"
-                                decoding="async"
-                                src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                            />
-                        </div>
-                        <div class="gallery__item-footer">
-                            <div class="gallery__item-meta">
-                                <div class="gallery__item-description">
-                                    <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                    <div class="gallery__item-category">Architecture - May</div>
-                                    <div class="gallery__item-title">Example project name here</div>
-                                </div>
-                                <ul class="gallery__item-tags">
-                                    <li class="gallery__item-tag">Example tag</li>
-                                    <li class="gallery__item-tag">Example tag</li>
-                                </ul>
+                    </div>
+                </li>
+                <li
+                    class="gallery__item"
+                    data-gallery-item
+                    data-gallery-item-src="https://via.placeholder.com/430x300.png"
+                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/730x200.png", "media": "(min-width:430px)" }, { "srcset": "https://via.placeholder.com/1300x200.png", "media": "(min-width:730px)" }, { "srcset": "https://via.placeholder.com/1630x200.jpg", "media": "(min-width:1300px)"}]'
+                >
+                    <div class="gallery__item-img-container" data-gallery-item-img-container>
+                        <div class="gallery-item__loader">Loading...</div>
+                    </div>
+                    <div class="gallery__item-footer">
+                        <div class="gallery__item-meta">
+                            <div class="gallery__item-description">
+                                <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                <div class="gallery__item-category">Architecture - April</div>
+                                <div class="gallery__item-title">Example project name here</div>
                             </div>
+                            <ul class="gallery__item-tags">
+                                <li class="gallery__item-tag">Example tag</li>
+                                <li class="gallery__item-tag">Example tag</li>
+                            </ul>
                         </div>
-                    </li>
-                </ul>
-                <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                    <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
-                </button>
-            </div>
-      </section>
+                    </div>
+                </li>
+            </ul>
+            <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+            </button>
+        </div>
+    </section>
   </body>
 </html>
diff --git a/packages/gallery/example/src/js/index.js b/packages/gallery/example/src/js/index.js
index a072ab9c..1a578a3c 100644
--- a/packages/gallery/example/src/js/index.js
+++ b/packages/gallery/example/src/js/index.js
@@ -1,3 +1,3 @@
 import gallery from '../../../src';
     
-gallery('.js-gallery', { startIndex: 2 });
\ No newline at end of file
+gallery('.js-gallery'/*, { startIndex: 2 }*/);
\ No newline at end of file
diff --git a/packages/gallery/src/lib/defaults.js b/packages/gallery/src/lib/defaults.js
index bb9288dd..0f35e330 100644
--- a/packages/gallery/src/lib/defaults.js
+++ b/packages/gallery/src/lib/defaults.js
@@ -15,7 +15,8 @@ export default {
     className: {
         active: 'is--active',
         loading: 'is--loading',
-        img: 'gallery-item__image'
+        img: 'gallery-item__image', //should be a data-attribute?
+        loader: 'gallery-item__loader' //should be a data-attribute?
     },
     manualInitialisation: false, //if the gallery is hidden (e.g. in a modal) we may wish to delay initialisation and image loading until it is activiated
     updateURL: true, //change URL when item changes
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index ca7fabb0..baef676f 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -6,7 +6,7 @@ const createPicture = item => {
         const source = document.createElement('source');
         if (item.sources[i].srcset) source.setAttribute('srcset', item.sources[i].srcset);
         if (item.sources[i].media) source.setAttribute('media', item.sources[i].media);
-        if (item.sources[i].type) source.setAttribute('srcset', item.sources[i].type);
+        if (item.sources[i].type) source.setAttribute('type', item.sources[i].type);
         picture.insertBefore(source, picture.firstElementChild);
     }
     return picture;
@@ -25,7 +25,8 @@ const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
     // because the item does not have the ATTRIBUTE.LOADED attribute,
     // and the imgNode src does not match the item ATTRIBUTE.SRC
     // therefore we can assume that any img (or SVG) present is a loading state and should be removed when the 
-    const loadingImg = item.imgContainer.querySelector('img, svg');
+    const loadingIndicator = item.imgContainer.querySelector(`img, svg, .${settings.className.loader}`);
+    // const loadingIndicator = item.imgContainer.querySelector(`img, svg, .${settings.className.loader}`);
 
     const img = new Image();
     let picture = false;
@@ -33,22 +34,23 @@ const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
         const loaded = () => {
             item.loaded = true;
             item.node.classList.remove(settings.className.loading);
-            Store.dispatch({ items });
-            if (loadingImg) loadingImg.parentNode.removeChild(loadingImg);
-            if (picture) {
-                picture.appendChild(img);
-                item.imgContainer.appendChild(picture);
-            } else item.imgContainer.appendChild(img);
-
+            item.img = img;
+            Store.dispatch({ items: items.map((_item, idx) => i === idx ? item : _item ) });
             resolve(img);
         };
         img.onload = loaded;
         if (item.srcset) img.setAttribute('srcset', item.srcset);
         if (item.src) img.setAttribute('src', item.src);
         if (item.sizes) img.setAttribute('sizes', item.sizes);
-        //assume picture tag is not present and  we need to create it if there are item.sources
+        //assume picture tag is not present and we need to create it if there are item.sources
         if (item.sources && item.sources.length > 0) picture = createPicture(item);
         if (img.complete) loaded();
+        if (loadingIndicator) loadingIndicator.parentNode.removeChild(loadingIndicator);
+        if (picture) {
+            picture.appendChild(img);
+            item.imgContainer.appendChild(picture);
+        } else item.imgContainer.appendChild(img);
+
     } catch (e) {
         console.warn('Gallery cannot load image', e);
         reject(img);
@@ -94,6 +96,7 @@ export const init = Store => () => {
     
     //set initial DOM state
     items.forEach((item, i) => {
+        if (!item.node.hasAttribute('tabindex')) item.node.setAttribute('tabindex', 0);
         if (i === activeIndex) {
             if (!item.node.classList.contains(settings.className.active)) item.node.classList.add(settings.className.active);
             if (item.node.hasAttribute('aria-hidden')) item.node.removeAttribute('aria-hidden');
@@ -120,6 +123,8 @@ export const toggleFullScreen = Store => {
 export const change = (Store, next) => {
     const { activeIndex, items } = Store.getState();
 
+    //set activeIndex in state,
+    //then run all side effects to change the DOM/show and hide items, manage focus, and load updated previous/next
     Store.dispatch({ activeIndex: next }, [
         () => {
             items[activeIndex].node.classList.remove('is--active');
@@ -130,6 +135,7 @@ export const change = (Store, next) => {
             items[next].node.removeAttribute('aria-hidden');
         },
         () => loadImages(Store)(next),
+        () => items[next].node.focus(),
         writeTotals
     ]);
 };
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index f8081b75..c44ebfec 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -6,7 +6,7 @@ import { composeItems, composeDOM } from './utils';
  * @param node, HTMLElement, DOM node containing the gallery
  * @param settings, Object, merged defaults + options passed in as instantiation config to module default
  *
- * @returns Object, Gallery API
+ * @returns Object, Gallery API: getState, initialise (for deferred or manual initialisation), gotTo, toggleFullScreen
  */
 export default (node, settings) => {
     const Store = createStore();
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 5109eca0..6a877c8a 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -3,9 +3,18 @@ import { ATTRIBUTE } from './constants';
 export const sanitise = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
 export const composeItems = (nodes, settings) => nodes.map(node => {
+    const sourcesValue = node.getAttribute(ATTRIBUTE.SOURCES);
+    let sources = false;
+    if (sourcesValue) {
+        try {
+            sources = JSON.parse(sourcesValue);
+        } catch (e) {
+            console.warn('Gallery cannot parse sources', e);
+        }
+    }
     let item = {
         node,
-        sources: node.getAttribute(ATTRIBUTE.SOURCES),
+        sources,
         srcset: node.getAttribute(ATTRIBUTE.SRCSET),
         sizes: node.getAttribute(ATTRIBUTE.SIZES),
         src: node.getAttribute(ATTRIBUTE.SRC),
@@ -22,7 +31,7 @@ export const composeItems = (nodes, settings) => nodes.map(node => {
         loaded: node.hasAttribute(ATTRIBUTE.LOADED) || (imgNode && imgNode.getAttribute('src') === node.getAttribute(ATTRIBUTE.SRC))
     };
     if (!item.sources && !item.srcset && !item.src && !item.loaded) return void console.warn('Gallery cannot be initialised, no image sources found'), item;
-    
+
     return item;
 });
 

From 6526ed93207b65b8358a49ad447a9907cf200603 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Fri, 14 Jan 2022 15:58:00 +0000
Subject: [PATCH 18/49] Add preload setting

---
 .../__tests__/initialisation/manual.js        |   2 +-
 packages/gallery/__tests__/preload.js         | 103 ++++++++++++++++++
 packages/gallery/example/src/index.html       |  33 +++++-
 packages/gallery/example/src/js/index.js      |   2 +-
 packages/gallery/src/lib/dom.js               |   2 +
 5 files changed, 136 insertions(+), 6 deletions(-)
 create mode 100644 packages/gallery/__tests__/preload.js

diff --git a/packages/gallery/__tests__/initialisation/manual.js b/packages/gallery/__tests__/initialisation/manual.js
index 940c8aef..8fef780e 100644
--- a/packages/gallery/__tests__/initialisation/manual.js
+++ b/packages/gallery/__tests__/initialisation/manual.js
@@ -95,7 +95,7 @@ describe('Gallery > initialisation > manual initialisation', () => {
         expect(items[0].node.classList.contains(defaults.className.active)).toEqual(false);
 
         const imgs = await instance.initialise();
-        expect(items[0].node.hasAttribute(ATTRIBUTE.LOADED)).toEqual(false);
+        expect(items[0].node.hasAttribute(ATTRIBUTE.LOADED)).toEqual(true);
         expect(items[0].node.hasAttribute('aria-hidden')).toEqual(false);
         expect(items[0].node.classList.contains(defaults.className.active)).toEqual(true);
         expect(imgs.length).toEqual(2);
diff --git a/packages/gallery/__tests__/preload.js b/packages/gallery/__tests__/preload.js
new file mode 100644
index 00000000..7b5a899b
--- /dev/null
+++ b/packages/gallery/__tests__/preload.js
@@ -0,0 +1,103 @@
+import gallery from '../src';
+import defaults from '../src/lib/defaults';
+import { ATTRIBUTE } from '../src/lib/constants';
+const flushPromises = () => new Promise(setImmediate);
+
+describe('Gallery > preload', () => {
+    //mock image complete because JSDom cannot load images
+    beforeAll(() => {
+        Object.defineProperty(Image.prototype, 'complete', {
+            get() {
+                return true;
+            }
+        });
+    });
+
+    it('Should preload all images', async () => {
+        document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/800x800"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        const [ instance ] = gallery('.js-gallery', { preload: true });
+        await flushPromises();
+
+        const { items } = instance.getState();
+
+        items.forEach(item => {
+            expect(item.node.hasAttribute(ATTRIBUTE.LOADED)).toEqual(true);
+            expect(item.img.src).toEqual(item.node.getAttribute(ATTRIBUTE.SRC));
+        });
+    });
+
+});
\ No newline at end of file
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 09d2e73e..09706ac1 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -16,8 +16,7 @@
         img {
             display: block;
         }
-        .visually-hidden,
-        .gallery__item:not(.is--active) {
+        .visually-hidden {
             position: absolute;
             width: 1px;
             height: 1px;
@@ -26,7 +25,10 @@
             border: 0;
             overflow: hidden;
             clip: rect(0 0 0 0);
-        }   
+        }
+        .gallery__item:not(.is--active) {
+            display: none;
+        }
 		*:focus {
 			outline: 1px solid red;
 		}
@@ -113,7 +115,30 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                         <div class="gallery__item-meta">
                             <div class="gallery__item-description">
                                 <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                <div class="gallery__item-category">Architecture - April</div>
+                                <div class="gallery__item-category">Architecture - May</div>
+                                <div class="gallery__item-title">Example project name here</div>
+                            </div>
+                            <ul class="gallery__item-tags">
+                                <li class="gallery__item-tag">Example tag</li>
+                                <li class="gallery__item-tag">Example tag</li>
+                            </ul>
+                        </div>
+                    </div>
+                </li>
+                <li
+                    class="gallery__item"
+                    data-gallery-item
+                    data-gallery-item-src="https://via.placeholder.com/430x300.png"
+                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/740x200.png", "media": "(min-width:440px)" }, { "srcset": "https://via.placeholder.com/1400x200.png", "media": "(min-width:740px)" }, { "srcset": "https://via.placeholder.com/1640x200.jpg", "media": "(min-width:1400px)"}]'
+                >
+                    <div class="gallery__item-img-container" data-gallery-item-img-container>
+                        <div class="gallery-item__loader">Loading...</div>
+                    </div>
+                    <div class="gallery__item-footer">
+                        <div class="gallery__item-meta">
+                            <div class="gallery__item-description">
+                                <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                <div class="gallery__item-category">Architecture - June</div>
                                 <div class="gallery__item-title">Example project name here</div>
                             </div>
                             <ul class="gallery__item-tags">
diff --git a/packages/gallery/example/src/js/index.js b/packages/gallery/example/src/js/index.js
index 1a578a3c..dec2ee07 100644
--- a/packages/gallery/example/src/js/index.js
+++ b/packages/gallery/example/src/js/index.js
@@ -1,3 +1,3 @@
 import gallery from '../../../src';
     
-gallery('.js-gallery'/*, { startIndex: 2 }*/);
\ No newline at end of file
+gallery('.js-gallery');
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index baef676f..8beb25e0 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -1,4 +1,5 @@
 import { sanitise } from './utils';
+import { ATTRIBUTE } from './constants';
 
 const createPicture = item => {
     const picture = document.createElement('picture');
@@ -34,6 +35,7 @@ const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
         const loaded = () => {
             item.loaded = true;
             item.node.classList.remove(settings.className.loading);
+            item.node.setAttribute(ATTRIBUTE.LOADED, true);
             item.img = img;
             Store.dispatch({ items: items.map((_item, idx) => i === idx ? item : _item ) });
             resolve(img);

From 1a5c1530c77cb78afc1fdd2274ef531ee897f5ac Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Fri, 14 Jan 2022 16:00:15 +0000
Subject: [PATCH 19/49] Update preload test

---
 packages/gallery/__tests__/preload.js | 56 +++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/packages/gallery/__tests__/preload.js b/packages/gallery/__tests__/preload.js
index 7b5a899b..a3935940 100644
--- a/packages/gallery/__tests__/preload.js
+++ b/packages/gallery/__tests__/preload.js
@@ -83,6 +83,62 @@ describe('Gallery > preload', () => {
                                 </div>
                             </div>
                         </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - May</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - June</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
                     </ul>
                     <button class="gallery__previous" aria-label="Next image" data-gallery-next>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>

From 104c6b94e7431f53ab0560274c15c70924ab0bc9 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Sun, 16 Jan 2022 20:58:28 +0000
Subject: [PATCH 20/49] Rename live region fn and property

Add live region tests
---
 packages/gallery/__tests__/announcements.js   | 318 ++++++++++++++++++
 packages/gallery/__tests__/api.js             |   2 +-
 packages/gallery/__tests__/image-loading.js   |   2 +-
 .../gallery/__tests__/initialisation/index.js |  12 +-
 .../__tests__/initialisation/manual.js        |   2 +-
 .../__tests__/initialisation/multiple.js      |   8 +-
 packages/gallery/__tests__/interactions.js    |   2 +-
 packages/gallery/__tests__/picture.js         |   2 +-
 packages/gallery/__tests__/preload.js         |   2 +-
 packages/gallery/example/src/index.html       |   2 +-
 packages/gallery/src/lib/defaults.js          |   2 +-
 packages/gallery/src/lib/dom.js               |  10 +-
 packages/gallery/src/lib/utils.js             |   2 +-
 packages/modal-gallery/src/lib/dom.js         |  10 +-
 14 files changed, 346 insertions(+), 30 deletions(-)
 create mode 100644 packages/gallery/__tests__/announcements.js

diff --git a/packages/gallery/__tests__/announcements.js b/packages/gallery/__tests__/announcements.js
new file mode 100644
index 00000000..8149997d
--- /dev/null
+++ b/packages/gallery/__tests__/announcements.js
@@ -0,0 +1,318 @@
+import gallery from '../src';
+
+describe('Gallery > announcements', () => {
+    
+    it('should warn if no live region is found', () => {
+
+        document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/600x600"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        console.warn = jest.fn();
+        gallery('.js-gallery');
+        expect(console.warn).toHaveBeenCalledWith('A live region announcing current and total items is recommended for screen readers.');
+
+    });
+
+    it('Should update the live region when navigation occurs', () => {
+
+        document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 3</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/600x600"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        const [ instance ] = gallery('.js-gallery');
+
+        expect(instance.getState().dom.liveRegion.textContent).toEqual('1 of 3');
+        instance.goTo(1);
+        expect(instance.getState().dom.liveRegion.textContent).toEqual('2 of 3');
+        instance.getState().dom.next.click();
+        expect(instance.getState().dom.liveRegion.textContent).toEqual('3 of 3');
+
+    });
+
+    it('Should render a custom announcement based on settings', () => {
+
+        document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>Now viewing item 1 of 3</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/600x600"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        const [ instance ] = gallery('.js-gallery', {
+            announcement(current, total) {
+                return `Now viewing item ${current} of ${total}`;
+            }
+        });
+
+        expect(instance.getState().dom.liveRegion.textContent).toEqual('Now viewing item 1 of 3');
+        instance.goTo(1);
+        expect(instance.getState().dom.liveRegion.textContent).toEqual('Now viewing item 2 of 3');
+        instance.getState().dom.next.click();
+        expect(instance.getState().dom.liveRegion.textContent).toEqual('Now viewing item 3 of 3');
+
+    });
+
+});
\ No newline at end of file
diff --git a/packages/gallery/__tests__/api.js b/packages/gallery/__tests__/api.js
index f7cd6980..7902c7dc 100644
--- a/packages/gallery/__tests__/api.js
+++ b/packages/gallery/__tests__/api.js
@@ -7,7 +7,7 @@ beforeAll(() => {
     document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
diff --git a/packages/gallery/__tests__/image-loading.js b/packages/gallery/__tests__/image-loading.js
index da3bb880..fac9ea74 100644
--- a/packages/gallery/__tests__/image-loading.js
+++ b/packages/gallery/__tests__/image-loading.js
@@ -13,7 +13,7 @@ beforeAll(() => {
     document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
diff --git a/packages/gallery/__tests__/initialisation/index.js b/packages/gallery/__tests__/initialisation/index.js
index 1a38a24a..55f3e152 100644
--- a/packages/gallery/__tests__/initialisation/index.js
+++ b/packages/gallery/__tests__/initialisation/index.js
@@ -14,7 +14,7 @@ describe('Gallery > initialisation', () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
@@ -88,7 +88,7 @@ describe('Gallery > initialisation', () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
@@ -169,7 +169,7 @@ describe('Gallery > initialisation', () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
@@ -247,7 +247,7 @@ describe('Gallery > initialisation', () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
@@ -329,7 +329,7 @@ describe('Gallery > initialisation', () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
@@ -404,7 +404,7 @@ describe('Gallery > initialisation', () => {
         expect(instance.getState).toBeDefined();
         expect(instance.initialise).toBeDefined();
         const state = instance.getState();
-        expect(state.dom.total).toBeDefined();
+        expect(state.dom.liveRegion).toBeDefined();
         expect(state.dom.fullscreen).toBeDefined();
         expect(state.dom.previous).toBeDefined();
         expect(state.dom.next).toBeDefined();
diff --git a/packages/gallery/__tests__/initialisation/manual.js b/packages/gallery/__tests__/initialisation/manual.js
index 8fef780e..7e3b2d5e 100644
--- a/packages/gallery/__tests__/initialisation/manual.js
+++ b/packages/gallery/__tests__/initialisation/manual.js
@@ -16,7 +16,7 @@ describe('Gallery > initialisation > manual initialisation', () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
diff --git a/packages/gallery/__tests__/initialisation/multiple.js b/packages/gallery/__tests__/initialisation/multiple.js
index 0c05a734..f11d52c4 100644
--- a/packages/gallery/__tests__/initialisation/multiple.js
+++ b/packages/gallery/__tests__/initialisation/multiple.js
@@ -6,7 +6,7 @@ describe('Gallery > initialisation > multiple', () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
@@ -80,7 +80,7 @@ describe('Gallery > initialisation > multiple', () => {
             <section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
@@ -167,7 +167,7 @@ describe('Gallery > initialisation > multiple', () => {
         document.body.innerHTML = `<section class="gallery js-gallery__1">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
@@ -241,7 +241,7 @@ describe('Gallery > initialisation > multiple', () => {
             <section class="gallery js-gallery__2">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
diff --git a/packages/gallery/__tests__/interactions.js b/packages/gallery/__tests__/interactions.js
index 1ee6fc4e..044bea12 100644
--- a/packages/gallery/__tests__/interactions.js
+++ b/packages/gallery/__tests__/interactions.js
@@ -6,7 +6,7 @@ beforeAll(() => {
     document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
diff --git a/packages/gallery/__tests__/picture.js b/packages/gallery/__tests__/picture.js
index 94d3757d..a6e643ee 100644
--- a/packages/gallery/__tests__/picture.js
+++ b/packages/gallery/__tests__/picture.js
@@ -13,7 +13,7 @@ beforeAll(() => {
     document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
diff --git a/packages/gallery/__tests__/preload.js b/packages/gallery/__tests__/preload.js
index a3935940..6a735d76 100644
--- a/packages/gallery/__tests__/preload.js
+++ b/packages/gallery/__tests__/preload.js
@@ -17,7 +17,7 @@ describe('Gallery > preload', () => {
         document.body.innerHTML = `<section class="gallery js-gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                         <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                     </button>
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 09706ac1..94d16742 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -46,7 +46,7 @@
     <section class="gallery js-gallery">
         <h2 class="visually-hidden">Gallery</h2>
         <div class="gallery__header">
-            <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-total>1 of 5</div>
+            <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
             <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
                 <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
             </button>
diff --git a/packages/gallery/src/lib/defaults.js b/packages/gallery/src/lib/defaults.js
index 0f35e330..3a70a2c8 100644
--- a/packages/gallery/src/lib/defaults.js
+++ b/packages/gallery/src/lib/defaults.js
@@ -7,7 +7,7 @@ export default {
     selector: {
         item: '[data-gallery-item]',
         fullscreen: '[data-gallery-fullscreen]',
-        total: '[data-gallery-total]',
+        liveRegion: '[data-gallery-live-region]',
         previous: '[data-gallery-previous]',
         next: '[data-gallery-next]',
         imgContainer: '[data-gallery-item-img-container]'
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 8beb25e0..5346d828 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -90,8 +90,8 @@ export const init = Store => () => {
     const { settings, items, dom, activeIndex } = state;
     
     //initialise buttons
-    if (!dom.total) console.warn(`A live region announcing current and total items is recommended for screen readers.`);
-    else writeTotals(state);
+    if (!dom.liveRegion) console.warn(`A live region announcing current and total items is recommended for screen readers.`);
+    else writeLiveRegion(state);
     if (dom.fullscreen) dom.fullscreen.addEventListener('click', toggleFullScreen.bind(null, Store));
     if (dom.previous) dom.previous.addEventListener('click', previous.bind(null, Store));
     if (dom.next) dom.next.addEventListener('click', next.bind(null, Store));
@@ -114,7 +114,7 @@ export const init = Store => () => {
     
 };
 
-const writeTotals = ({ activeIndex, items, settings, dom }) => dom.total.innerHTML = sanitise(settings.announcement(activeIndex + 1, items.length));
+const writeLiveRegion = ({ activeIndex, items, settings, dom }) => dom.liveRegion.innerHTML = sanitise(settings.announcement(activeIndex + 1, items.length));
 
 export const toggleFullScreen = Store => {
     const { node } = Store.getState();
@@ -131,14 +131,12 @@ export const change = (Store, next) => {
         () => {
             items[activeIndex].node.classList.remove('is--active');
             items[activeIndex].node.setAttribute('aria-hidden', 'true');
-        },
-        () => {
             items[next].node.classList.add('is--active');
             items[next].node.removeAttribute('aria-hidden');
         },
         () => loadImages(Store)(next),
         () => items[next].node.focus(),
-        writeTotals
+        writeLiveRegion
     ]);
 };
 
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 6a877c8a..03fef968 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -36,7 +36,7 @@ export const composeItems = (nodes, settings) => nodes.map(node => {
 });
 
 export const composeDOM = (node, settings) => ({
-    total: node.querySelector(settings.selector.total),
+    liveRegion: node.querySelector(settings.selector.liveRegion),
     fullscreen: node.querySelector(settings.selector.fullscreen),
     previous: node.querySelector(settings.selector.previous),
     next: node.querySelector(settings.selector.next)
diff --git a/packages/modal-gallery/src/lib/dom.js b/packages/modal-gallery/src/lib/dom.js
index 5b5b9ba3..e8448b44 100644
--- a/packages/modal-gallery/src/lib/dom.js
+++ b/packages/modal-gallery/src/lib/dom.js
@@ -68,7 +68,7 @@ export const initUI = store => state => {
         initUIButtons(store),
         () => document.addEventListener('keydown', keyListener),
         toggle(store),
-        writeTotals
+        writeLiveRegion
     ]);
 };
 
@@ -168,8 +168,8 @@ const toggle = store => state => {
     settings.fullscreen && toggleFullScreen(state);
 };
 
-const writeTotals = ({ dom, current, items, settings }) => {
-    if (settings.totals) dom.totals.innerHTML = `${current + 1}/${items.length}`;
+const writeLiveRegion = ({ dom, current, items, settings }) => {
+    if (settings.totals) dom.liveRegions.innerHTML = `${current + 1}/${items.length}`;
 };
 
 const toggleFullScreen = ({ isOpen, dom }) => {
@@ -199,7 +199,7 @@ export const previous = store => {
         () => dom.items[current].classList.remove('is--active'),
         () => dom.items[next].classList.add('is--active'),
         load(store),
-        writeTotals
+        writeLiveRegion
     ]);
 };
 
@@ -213,7 +213,7 @@ export const next = store => {
         () => dom.items[current].classList.remove('is--active'),
         () => dom.items[next].classList.add('is--active'),
         load(store),
-        writeTotals
+        writeLiveRegion
     ]);
 };
 

From 26096834ca2a267b7ffd7bf292c0332bf8df91fb Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Mon, 17 Jan 2022 17:37:04 +0000
Subject: [PATCH 21/49] Add URL updating, retrieving index from URL, popstate
 handler

---
 packages/gallery/example/src/index.html |  2 +-
 packages/gallery/src/index.js           |  2 +-
 packages/gallery/src/lib/dom.js         |  8 ++++++--
 packages/gallery/src/lib/factory.js     | 13 +++++++++----
 packages/gallery/src/lib/utils.js       | 23 ++++++++++++++++++++++-
 5 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 94d16742..f4131b0f 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -52,7 +52,7 @@ <h2 class="visually-hidden">Gallery</h2>
             </button>
         </div>
         <div class="gallery__main">
-            <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+            <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                 <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
             </button>
             <ul class="gallery__list">
diff --git a/packages/gallery/src/index.js b/packages/gallery/src/index.js
index 07455617..9b807595 100644
--- a/packages/gallery/src/index.js
+++ b/packages/gallery/src/index.js
@@ -5,5 +5,5 @@ export default (selector, options) => {
     const galleries = [].slice.call(document.querySelectorAll(selector));
     if (galleries.length === 0) return void console.warn('Gallery cannot be initialised, no galleries found');
     
-    return galleries.map(gallery => Object.create(factory(gallery, { ...defaults, ...options })));
+    return galleries.map((gallery, index) => Object.create(factory(gallery, { ...defaults, ...options }, index)));
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 5346d828..3fe547bb 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -123,7 +123,7 @@ export const toggleFullScreen = Store => {
 };
 
 export const change = (Store, next) => {
-    const { activeIndex, items } = Store.getState();
+    const { activeIndex, items, settings, name } = Store.getState();
 
     //set activeIndex in state,
     //then run all side effects to change the DOM/show and hide items, manage focus, and load updated previous/next
@@ -136,7 +136,11 @@ export const change = (Store, next) => {
         },
         () => loadImages(Store)(next),
         () => items[next].node.focus(),
-        writeLiveRegion
+        writeLiveRegion,
+        () => {
+            const num = next + 1;
+            settings.updateURL && window.history.replaceState({ URL: `#${name}-${num}` }, '', `#${name}-${num}`);
+        }
     ]);
 };
 
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index c44ebfec..cf845a3a 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -1,6 +1,6 @@
 import { createStore } from './store';
 import { init, toggleFullScreen, goTo } from './dom';
-import { composeItems, composeDOM } from './utils';
+import { composeItems, composeDOM, getIndexFromURL, popstateHandler } from './utils';
 
 /* 
  * @param node, HTMLElement, DOM node containing the gallery
@@ -8,19 +8,24 @@ import { composeItems, composeDOM } from './utils';
  *
  * @returns Object, Gallery API: getState, initialise (for deferred or manual initialisation), gotTo, toggleFullScreen
  */
-export default (node, settings) => {
+export default (node, settings, index) => {
     const Store = createStore();
 
     const items = [].slice.call(node.querySelectorAll(settings.selector.item));
     if (items.length === 0) return console.warn('Gallery cannot be initialised, no items found'), null;
 
+    const name = `gallery-${index + 1}`;
     Store.dispatch({
         node,
+        name,
         settings,
         items: composeItems(items, settings),
         dom: composeDOM(node, settings),
-        activeIndex: settings.startIndex
-    }, [ () => !settings.manualInitialisation && init(Store)() ]);
+        activeIndex: getIndexFromURL(name, items, location.hash, settings.startIndex)
+    }, [
+        () => !settings.manualInitialisation && init(Store)(),
+        () => window.addEventListener('popstate', popstateHandler(Store))
+    ]);
 
     return {
         getState: Store.getState,
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 03fef968..e1d53834 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -1,4 +1,5 @@
 import { ATTRIBUTE } from './constants';
+import { change } from './dom';
 
 export const sanitise = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
@@ -40,4 +41,24 @@ export const composeDOM = (node, settings) => ({
     fullscreen: node.querySelector(settings.selector.fullscreen),
     previous: node.querySelector(settings.selector.previous),
     next: node.querySelector(settings.selector.next)
-});
\ No newline at end of file
+});
+
+export const getIndexFromURL = (name, items, url, fallback = false) => {
+    const hash = url ? url.slice(1) : false;
+    if (!hash) return fallback;
+    if (hash.indexOf(`${name}-`) === -1) return fallback;
+    const num = Number(hash.split(`${name}-`)[1]);
+    if (isNaN(num)) return fallback;
+    const index = num - 1;
+    if (index < 0 || index > (items.length - 1)) return fallback;
+    return index;
+};
+
+export const popstateHandler = Store => e => {
+    if (!e.state) return;
+    const url = e.state.URL;
+    const { name, items } = Store.getState();
+    const index = getIndexFromURL(name, items, url);
+    if (index === false) return;
+    change(Store, index);
+};
\ No newline at end of file

From 862e844bb3399c69c0d885e4965a209c4b512abc Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Tue, 18 Jan 2022 13:02:53 +0000
Subject: [PATCH 22/49] Refactor and add utils tests

---
 packages/gallery/__tests__/utils.js  | 59 +++++++++++++++++++++++++++-
 packages/gallery/src/lib/defaults.js |  2 +-
 packages/gallery/src/lib/utils.js    |  7 ++--
 3 files changed, 61 insertions(+), 7 deletions(-)

diff --git a/packages/gallery/__tests__/utils.js b/packages/gallery/__tests__/utils.js
index b21b6157..a2297d38 100644
--- a/packages/gallery/__tests__/utils.js
+++ b/packages/gallery/__tests__/utils.js
@@ -1,4 +1,4 @@
-import { sanitise } from '../src/lib/utils';
+import { sanitise, getIndexFromURL } from '../src/lib/utils';
 
 describe('Gallery > Utils > sanitize', () => {
 
@@ -22,4 +22,59 @@ describe('Gallery > Utils > sanitize', () => {
 
 //composeItems
 
-//composeDOM
\ No newline at end of file
+//composeDOM
+
+//getIndexFromURL
+// export const getIndexFromURL = (name, items, url, fallback = false) => {
+//     try {
+//         const hash = url.split(`#`)[1];
+//         if (hash.indexOf(`${name}-`) === -1) return fallback;
+//         const num = Number(hash.split(`${name}-`)[1]);
+//         if (isNaN(num)) throw 'Gallery hash not valid';
+//         const index = num - 1;
+//         if (index < 0 || index > (items.length - 1)) throw 'Gallery index out of bounds';
+//         return index;
+//     } catch (e){
+//         return fallback;
+//     }
+// };
+describe('Gallery > getIndexFromURL', () => {
+    //return fallback if url.split throws
+    it('Should return fallback if url.split throws', () => {
+        const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+        const result = getIndexFromURL('test-name', [], '#');
+        expect(result).toEqual(false);
+        warn.mockRestore();
+    });
+    
+    it('Should return fallback if hash does not contain gallery name', () => {
+        const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+        const result = getIndexFromURL('test-name', [], '#potato');
+        expect(result).toEqual(false);
+        warn.mockRestore();
+    });
+    
+    it('Should return fallback and console warn if hash does not contain a number', () => {
+        const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+        const result = getIndexFromURL('test-name', [], '#test-name-potato');
+        expect(result).toEqual(false);
+        expect(warn).toHaveBeenCalledWith('Gallery hash not valid');
+        warn.mockRestore();
+    });
+
+    it('Should return fallback and console warn if index is out of bounds', () => {
+        const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+        const result = getIndexFromURL('test-name', [{}, {}], '#test-name-4');
+        expect(result).toEqual(false);
+        expect(warn).toHaveBeenCalledWith('Gallery index out of bounds');
+        warn.mockRestore();
+    });
+
+    it('Should return index if one is found', () => {
+        const result = getIndexFromURL('test-name', [{}, {}], '#test-name-1');
+        //index is one less than the number in the hash
+        expect(result).toEqual(0);
+    });
+
+
+});
\ No newline at end of file
diff --git a/packages/gallery/src/lib/defaults.js b/packages/gallery/src/lib/defaults.js
index 3a70a2c8..50ccf9b6 100644
--- a/packages/gallery/src/lib/defaults.js
+++ b/packages/gallery/src/lib/defaults.js
@@ -19,7 +19,7 @@ export default {
         loader: 'gallery-item__loader' //should be a data-attribute?
     },
     manualInitialisation: false, //if the gallery is hidden (e.g. in a modal) we may wish to delay initialisation and image loading until it is activiated
-    updateURL: true, //change URL when item changes
+    updateURL: false, //change URL when item changes
     announcement(current, total){
         return `${current} of ${total}`;
     }
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index e1d53834..481343c4 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -44,13 +44,12 @@ export const composeDOM = (node, settings) => ({
 });
 
 export const getIndexFromURL = (name, items, url, fallback = false) => {
-    const hash = url ? url.slice(1) : false;
-    if (!hash) return fallback;
+    const hash = url.split(`#`)[1] || '';
     if (hash.indexOf(`${name}-`) === -1) return fallback;
     const num = Number(hash.split(`${name}-`)[1]);
-    if (isNaN(num)) return fallback;
+    if (isNaN(num)) return console.warn('Gallery hash not valid'), fallback;
     const index = num - 1;
-    if (index < 0 || index > (items.length - 1)) return fallback;
+    if (index < 0 || index > (items.length - 1)) return console.warn('Gallery index out of bounds'), fallback;
     return index;
 };
 

From ae1ff1542ed87920e93bb861bfa7d518957fb69c Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Tue, 18 Jan 2022 15:40:24 +0000
Subject: [PATCH 23/49] Add tests

---
 packages/gallery/__tests__/fromURL.js   | 118 +++++++++++++++++++++
 packages/gallery/__tests__/popstate.js  | 132 ++++++++++++++++++++++++
 packages/gallery/__tests__/updateURL.js | 124 ++++++++++++++++++++++
 3 files changed, 374 insertions(+)
 create mode 100644 packages/gallery/__tests__/fromURL.js
 create mode 100644 packages/gallery/__tests__/popstate.js
 create mode 100644 packages/gallery/__tests__/updateURL.js

diff --git a/packages/gallery/__tests__/fromURL.js b/packages/gallery/__tests__/fromURL.js
new file mode 100644
index 00000000..683cad33
--- /dev/null
+++ b/packages/gallery/__tests__/fromURL.js
@@ -0,0 +1,118 @@
+import gallery from '../src';
+
+let instance;
+
+beforeAll(() => {
+    document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 3</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/600x600"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+});
+
+describe('Gallery > from URL', () => {
+
+    it('Should set the initial activeIndex from the URL', () => {
+        window.location.href = `#'gallery-1-3`;
+        [ instance ] = gallery('.js-gallery');
+        expect(instance.getState().activeIndex).toBe(2);
+    });
+
+});
\ No newline at end of file
diff --git a/packages/gallery/__tests__/popstate.js b/packages/gallery/__tests__/popstate.js
new file mode 100644
index 00000000..198e432c
--- /dev/null
+++ b/packages/gallery/__tests__/popstate.js
@@ -0,0 +1,132 @@
+import gallery from '../src';
+
+let instance;
+
+beforeEach(() => {
+    document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 3</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/600x600"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+    [ instance ] = gallery('.js-gallery', { updateURL: true });
+});
+
+describe('Gallery > popstate', () => {
+
+
+    it('Should not update the gallery on popstate if a new hash does not match the addressing spec', () => {
+        expect(instance.getState().activeIndex).toBe(0);
+        window.dispatchEvent(new PopStateEvent('popstate', { state: { URL: '#test' } }));
+        expect(instance.getState().activeIndex).toBe(0);
+    });
+
+    it('Should not update the gallery on popstate if the event has no state', () => {
+        expect(instance.getState().activeIndex).toBe(0);
+        window.dispatchEvent(new PopStateEvent('popstate'));
+        expect(instance.getState().activeIndex).toBe(0);
+    });
+
+    it('Should update the gallery on popstate if a new hash matches the addressing spec', () => {
+        expect(instance.getState().activeIndex).toBe(0);
+        window.dispatchEvent(new PopStateEvent('popstate', { state: { URL: '#gallery-1-2' } }));
+        expect(instance.getState().activeIndex).toBe(1);
+    });
+
+});
\ No newline at end of file
diff --git a/packages/gallery/__tests__/updateURL.js b/packages/gallery/__tests__/updateURL.js
new file mode 100644
index 00000000..21308436
--- /dev/null
+++ b/packages/gallery/__tests__/updateURL.js
@@ -0,0 +1,124 @@
+import gallery from '../src';
+
+let instance;
+
+beforeAll(() => {
+    document.body.innerHTML = `<section class="gallery js-gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 3</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li
+                            class="gallery__item is--active"
+                            data-gallery-item
+                            data-gallery-item-loaded
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/600x600"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            aria-hidden="true"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+    [ instance ] = gallery('.js-gallery', { updateURL: true });
+});
+
+describe('Gallery > updateURL', () => {
+
+    it('Should update the URL when navigating the gallery', () => {
+        instance.goTo(2);
+        // const expected = 'http://localhost:8080/gallery/1';
+        // const url = new URL(window.location.href);
+        // url.hash = '#1';
+        // window.history.pushState({}, '', url.href);
+        expect(window.location.hash).toBe('#gallery-1-3');
+        instance.getState().dom.next.click();
+        expect(window.location.hash).toBe('#gallery-1-1');
+    });
+
+});
\ No newline at end of file

From 3455e175caf8a42e9eb7b08090164fa5c9ca866e Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Thu, 20 Jan 2022 09:56:41 +0000
Subject: [PATCH 24/49] Renaming, housekeeping

---
 packages/gallery/README.md              | 138 +-----------------------
 packages/gallery/__tests__/picture.js   |   6 +-
 packages/gallery/example/src/index.html |   8 +-
 packages/gallery/src/lib/defaults.js    |   7 +-
 packages/gallery/src/lib/dom.js         |   3 +-
 5 files changed, 13 insertions(+), 149 deletions(-)

diff --git a/packages/gallery/README.md b/packages/gallery/README.md
index fdcdd6ff..f4f2bd2a 100644
--- a/packages/gallery/README.md
+++ b/packages/gallery/README.md
@@ -1,6 +1,5 @@
-# Modal Gallery
+# Gallery
 
-Accessible modal image gallery
 
 ---
 
@@ -8,151 +7,18 @@ Accessible modal image gallery
 
 Install the package
 ```
-npm i -S @stormid/modal-gallery
-```
-
-A modal gallery can be created with DOM elements, or programmatically created from a JS Object.
-
-From HTML
-```
-<ul>
-    <li>
-        <a class="js-modal-gallery" href="//placehold.it/500x500" data-title="Image 1" data-description="Description 1" data-srcset="//placehold.it/800x800 800w, //placehold.it/500x500 320w">Image one</a>
-    </li>
-    <li>
-        <a class="js-modal-gallery" href="//placehold.it/300x800" data-title="Image 2" data-description="Description 2" data-srcset="//placehold.it/500x800 800w, //placehold.it/300x500 320w">Image two</a
-    ></li>
-</ul>
-```
-
-Initialise the module
-```
-import modalGallery from '@stormid/modal-gallery';
-
-const [ gallery ] = modalGallery('.js-modal-gallery');
-```
-
-Example MVP CSS
-```
-.modal-gallery__outer {
-    display: none;
-    opacity: 0;
-    position: fixed;
-    overflow: hidden;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-    background-color: rgba(0,0,0,.9);
-    transition: opacity 500ms ease;
-}
-.modal-gallery__outer.is--active {
-    display: block;
-    opacity: 1;
-}
-.modal-gallery__img-container {
-    text-align:center;
-}
-.modal-gallery__img {
-    margin:80px auto 0 auto;
-    max-width:80%;
-    max-height: 80vh;
-}
-.modal-gallery__item {
-    position: fixed;
-    top:0;
-    left:0;
-    right:0;
-    bottom:0;
-    opacity:0;
-    visibility:hidden;
-}
-.modal-gallery__item.is--active {
-    opacity:1;
-    visibility:visible;
-}
-.modal-gallery__next {
-    position: fixed;
-    bottom:50%;
-    right:25px;
-}
-.modal-gallery__previous {
-    position: fixed;
-    bottom:50%;
-    left:25px;
-}
-.modal-gallery__close {
-    position: fixed;
-    top:15px;
-    right:25px;
-}
-.modal-gallery__close:hover svg,
-.modal-gallery__previous:hover svg,
-.modal-gallery__next:hover svg{
-    opacity:.8
-}
-.modal-gallery__total {
-    position: absolute;
-    bottom:25px;
-    right:25px;
-    color:#fff
-}
-.modal-gallery__details {
-    position: fixed;
-    bottom:0;
-    left:120px;
-    right:120px;
-    padding:0 0 40px 0;
-    color:#fff;
-}
-```
-
-
-To create from a JavaScript Object
-```
-import modalGallery from '@stormid/modal-gallery';
-
-const [ gallery ] = modalGallery([
-    {
-        src: '//placehold.it/500x500',
-        srcset:'//placehold.it/800x800 800w, //placehold.it/500x500 320w',
-        title: 'Image 1',
-        description: 'Description 1'
-    },
-    {
-        src: '//placehold.it/300x800',
-        srcset:'//placehold.it/500x800 800w, //placehold.it/300x500 320w',
-        title: 'Image 2',
-        description: 'Description 2'
-    }
-]);
-
-//e.g. Open the gallery at the second item (index 1) by clicking on a button with the className 'js-modal-gallery__trigger'
-document.querySelector('.js-modal-gallery__trigger').addEventListener('click', () => gallery.open(1));
+npm i -S @stormid/gallery
 ```
 
 ## Options
 
 ```
 {
-    fullscreen: false, //show gallery in fullscreen
-    preload: false, //preload all images
-    totals: true,   //show totals
-    scrollable: false, //modal is scrollable
-    single: false, //single image or gallery
 }
 ```
 
 ## API
 
-modalGallery() returns an array of instances. Each instance exposes the interface
-```
-{
-    getState, a Function that returns the current state Object
-    open, a Function that opens the modal gallery
-}
-```
 
 ## Tests
 ```
diff --git a/packages/gallery/__tests__/picture.js b/packages/gallery/__tests__/picture.js
index a6e643ee..9f2ae8d1 100644
--- a/packages/gallery/__tests__/picture.js
+++ b/packages/gallery/__tests__/picture.js
@@ -30,7 +30,7 @@ beforeAll(() => {
                             data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/700x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1000x200.png", "media": "(min-width:700px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1000px)" }]'
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <div class="gallery-item__loader">Loading...</div>
+                                <div data-gallery-item-loader>Loading...</div>
                             </div>
                             <div class="gallery__item-footer">
                                 <div class="gallery__item-meta">
@@ -53,7 +53,7 @@ beforeAll(() => {
                             data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/710x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1100x200.png", "media": "(min-width:710px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1100px)" }]'
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <div class="gallery-item__loader">Loading...</div>
+                                <div data-gallery-item-loader>Loading...</div>
                             </div>
                             <div class="gallery__item-footer">
                                 <div class="gallery__item-meta">
@@ -76,7 +76,7 @@ beforeAll(() => {
                             data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/730x200.png", "media": "(min-width:430px)" }, { "srcset": "https://via.placeholder.com/1300x200.png", "media": "(min-width:730px)" }, { "srcset": "https://via.placeholder.com/1630x200.jpg", "media": "(min-width:1300px)"}]'
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <div class="gallery-item__loader">Loading...</div>
+                                <div data-gallery-item-loader>Loading...</div>
                             </div>
                             <div class="gallery__item-footer">
                                 <div class="gallery__item-meta">
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index f4131b0f..94aff5c0 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -63,7 +63,7 @@ <h2 class="visually-hidden">Gallery</h2>
                     data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/700x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1000x200.png", "media": "(min-width:700px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1000px)" }]'
                 >
                     <div class="gallery__item-img-container" data-gallery-item-img-container>
-                        <div class="gallery-item__loader">Loading...</div>
+                        <div data-gallery-item-loader>Loading...</div>
                     </div>
                     <div class="gallery__item-footer">
                         <div class="gallery__item-meta">
@@ -86,7 +86,7 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                     data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/710x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1100x200.png", "media": "(min-width:710px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1100px)" }]'
                 >
                     <div class="gallery__item-img-container" data-gallery-item-img-container>
-                        <div class="gallery-item__loader">Loading...</div>
+                        <div data-gallery-item-loader>Loading...</div>
                     </div>
                     <div class="gallery__item-footer">
                         <div class="gallery__item-meta">
@@ -109,7 +109,7 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                     data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/730x200.png", "media": "(min-width:430px)" }, { "srcset": "https://via.placeholder.com/1300x200.png", "media": "(min-width:730px)" }, { "srcset": "https://via.placeholder.com/1630x200.jpg", "media": "(min-width:1300px)"}]'
                 >
                     <div class="gallery__item-img-container" data-gallery-item-img-container>
-                        <div class="gallery-item__loader">Loading...</div>
+                        <div data-gallery-item-loader>Loading...</div>
                     </div>
                     <div class="gallery__item-footer">
                         <div class="gallery__item-meta">
@@ -132,7 +132,7 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                     data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/740x200.png", "media": "(min-width:440px)" }, { "srcset": "https://via.placeholder.com/1400x200.png", "media": "(min-width:740px)" }, { "srcset": "https://via.placeholder.com/1640x200.jpg", "media": "(min-width:1400px)"}]'
                 >
                     <div class="gallery__item-img-container" data-gallery-item-img-container>
-                        <div class="gallery-item__loader">Loading...</div>
+                        <div data-gallery-item-loader>Loading...</div>
                     </div>
                     <div class="gallery__item-footer">
                         <div class="gallery__item-meta">
diff --git a/packages/gallery/src/lib/defaults.js b/packages/gallery/src/lib/defaults.js
index 50ccf9b6..3c8bfabe 100644
--- a/packages/gallery/src/lib/defaults.js
+++ b/packages/gallery/src/lib/defaults.js
@@ -10,13 +10,12 @@ export default {
         liveRegion: '[data-gallery-live-region]',
         previous: '[data-gallery-previous]',
         next: '[data-gallery-next]',
-        imgContainer: '[data-gallery-item-img-container]'
+        imgContainer: '[data-gallery-item-img-container]',
+        loader: '[data-gallery-item-loader]'
     },
     className: {
         active: 'is--active',
-        loading: 'is--loading',
-        img: 'gallery-item__image', //should be a data-attribute?
-        loader: 'gallery-item__loader' //should be a data-attribute?
+        loading: 'is--loading'
     },
     manualInitialisation: false, //if the gallery is hidden (e.g. in a modal) we may wish to delay initialisation and image loading until it is activiated
     updateURL: false, //change URL when item changes
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 3fe547bb..61a2b400 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -26,8 +26,7 @@ const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
     // because the item does not have the ATTRIBUTE.LOADED attribute,
     // and the imgNode src does not match the item ATTRIBUTE.SRC
     // therefore we can assume that any img (or SVG) present is a loading state and should be removed when the 
-    const loadingIndicator = item.imgContainer.querySelector(`img, svg, .${settings.className.loader}`);
-    // const loadingIndicator = item.imgContainer.querySelector(`img, svg, .${settings.className.loader}`);
+    const loadingIndicator = item.imgContainer.querySelector(`img, svg, ${settings.selector.loader}`);
 
     const img = new Image();
     let picture = false;

From 3e887d954cc62519fb2c70969b3ea9b355de58de Mon Sep 17 00:00:00 2001
From: NickWatton <nick.watton@stormid.com>
Date: Tue, 1 Mar 2022 11:04:10 +0000
Subject: [PATCH 25/49] Added video support

---
 packages/gallery/example/src/index.html | 55 +++++++++++++++++++++++--
 packages/gallery/src/lib/constants.js   |  5 ++-
 packages/gallery/src/lib/dom.js         | 41 +++++++++++++++---
 packages/gallery/src/lib/utils.js       |  1 +
 4 files changed, 92 insertions(+), 10 deletions(-)

diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 94aff5c0..064158ce 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -29,9 +29,6 @@
         .gallery__item:not(.is--active) {
             display: none;
         }
-		*:focus {
-			outline: 1px solid red;
-		}
         button {
             background:#191919;
             color:#fff;
@@ -56,6 +53,56 @@ <h2 class="visually-hidden">Gallery</h2>
                 <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
             </button>
             <ul class="gallery__list">
+
+                <li
+                    class="gallery__item"
+                    data-gallery-item
+                    data-gallery-item-src="_987Xgd443c"
+                    data-gallery-media-type="video"
+                >
+                    <div class="gallery__item-img-container" data-gallery-item-img-container>
+                        <div data-gallery-item-loader>Loading...</div>
+                    </div>
+                    <div class="gallery__item-footer">
+                        <div class="gallery__item-meta">
+                            <div class="gallery__item-description">
+                                <h2 class="gallery__item-artist">YouTube creator</h2>
+                                <div class="gallery__item-category">Video example</div>
+                                <div class="gallery__item-title">Example project name here</div>
+                            </div>
+                            <ul class="gallery__item-tags">
+                                <li class="gallery__item-tag">Example tag</li>
+                            </ul>
+                        </div>
+                    </div>
+                </li>
+
+                <li
+                    class="gallery__item"
+                    data-gallery-item
+                    data-gallery-item-src="HC9kFY-upK0"
+                    data-gallery-media-type="video"
+                >
+                    <div class="gallery__item-img-container" data-gallery-item-img-container>
+                        <div data-gallery-item-loader>Loading...</div>
+                    </div>
+                    <div class="gallery__item-footer">
+                        <div class="gallery__item-meta">
+                            <div class="gallery__item-description">
+                                <h2 class="gallery__item-artist">YouTube creator</h2>
+                                <div class="gallery__item-category">Video example</div>
+                                <div class="gallery__item-title">Example project name here</div>
+                            </div>
+                            <ul class="gallery__item-tags">
+                                <li class="gallery__item-tag">Example tag</li>
+                            </ul>
+                        </div>
+                    </div>
+                </li>
+
+
+
+
                 <li
                     class="gallery__item"
                     data-gallery-item
@@ -148,6 +195,8 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                         </div>
                     </div>
                 </li>
+
+
             </ul>
             <button class="gallery__previous" aria-label="Next image" data-gallery-next>
                 <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
diff --git a/packages/gallery/src/lib/constants.js b/packages/gallery/src/lib/constants.js
index 6810822f..cbfc932c 100644
--- a/packages/gallery/src/lib/constants.js
+++ b/packages/gallery/src/lib/constants.js
@@ -4,5 +4,8 @@ export const ATTRIBUTE = {
     SIZES: 'data-gallery-item-sizes',
     SRC: 'data-gallery-item-src',
     ALT: 'data-gallery-item-alt',
-    LOADED: 'data-gallery-item-loaded'
+    LOADED: 'data-gallery-item-loaded',
+    MEDIA_TYPE: 'data-gallery-media-type',
+    MEDIA_TYPE_IMAGE: 'image',
+    MEDIA_TYPE_VIDEO: 'video'
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 61a2b400..8479e421 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -27,7 +27,6 @@ const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
     // and the imgNode src does not match the item ATTRIBUTE.SRC
     // therefore we can assume that any img (or SVG) present is a loading state and should be removed when the 
     const loadingIndicator = item.imgContainer.querySelector(`img, svg, ${settings.selector.loader}`);
-
     const img = new Image();
     let picture = false;
     try {
@@ -58,22 +57,43 @@ const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
     };
 });
 
+const loadVideo = Store => (item, i) => new Promise((resolve, reject) => {
+    const { items, settings } = Store.getState();
+    
+    const loadingIndicator = item.imgContainer.querySelector(`img, svg, ${settings.selector.loader}`);
+    const video = document.createElement('iframe');
+    const videoSrc = item.src;
+
+    video.setAttribute('class','data-yt-iframe');
+    video.setAttribute('allowfullscreen','');
+    video.setAttribute('frameborder','0');
+    video.setAttribute('src','https://www.youtube.com/embed/'+ videoSrc +'?rel=0&showinfo=0&autoplay=0&enablejsapi=1');
+    
+    item.loaded = true;
+    item.node.classList.remove(settings.className.loading);
+    item.node.setAttribute(ATTRIBUTE.LOADED, true);
+    Store.dispatch({ items: items.map((_item, idx) => i === idx ? item : _item ) });
+    if (loadingIndicator) loadingIndicator.parentNode.removeChild(loadingIndicator);
+    item.imgContainer.appendChild(video);
+});
+
 /*
  * Returns an array of Promises
  *
  * @param i, Number, index of item
  */
-const loadImages = Store => i => {
+const loadItems = Store => i => {
     const { items, settings } = Store.getState();
     const indexes = [i];
 
     if (items.length > 1) indexes.push(i === 0 ? items.length - 1 : i - 1);
     if (items.length > 2) indexes.push(i === items.length - 1 ? 0 : i + 1);
+
     
     return indexes.map(idx => {
         if (!items[idx].loaded) {
             items[idx].node.classList.add(settings.className.loading);
-            return loadImage(Store)(items[idx], idx);
+            return items[idx].mediaType === ATTRIBUTE.MEDIA_TYPE_VIDEO ?  loadVideo(Store)(items[idx], idx) : loadImage(Store)(items[idx], idx);
         }
     });
 
@@ -109,7 +129,7 @@ export const init = Store => () => {
 
     //preload all images if setting is true, or just previous and next
     if (settings.preload) return Promise.all(items.map(loadImage(Store)));
-    return Promise.all(loadImages(Store)(activeIndex));
+    return Promise.all(loadItems(Store)(activeIndex));
     
 };
 
@@ -124,6 +144,15 @@ export const toggleFullScreen = Store => {
 export const change = (Store, next) => {
     const { activeIndex, items, settings, name } = Store.getState();
 
+    // Ensure any YouTube videos are stopped
+    let targetOrigin = 'https://www.youtube.com';
+    let youtube_iframes = [...document.querySelectorAll('.data-yt-iframe')];
+    if(youtube_iframes.length){
+        youtube_iframes.forEach(youtube_iframe => {
+            youtube_iframe.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', targetOrigin);
+        })
+    }
+
     //set activeIndex in state,
     //then run all side effects to change the DOM/show and hide items, manage focus, and load updated previous/next
     Store.dispatch({ activeIndex: next }, [
@@ -133,7 +162,7 @@ export const change = (Store, next) => {
             items[next].node.classList.add('is--active');
             items[next].node.removeAttribute('aria-hidden');
         },
-        () => loadImages(Store)(next),
+        () => loadItems(Store)(next),
         () => items[next].node.focus(),
         writeLiveRegion,
         () => {
@@ -154,6 +183,6 @@ export const next = Store => {
 };
 
 export const goTo = Store => i => {
-    loadImages(Store)(i);
+    loadItems(Store)(i);
     change(Store, i);
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 481343c4..bd1078d9 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -20,6 +20,7 @@ export const composeItems = (nodes, settings) => nodes.map(node => {
         sizes: node.getAttribute(ATTRIBUTE.SIZES),
         src: node.getAttribute(ATTRIBUTE.SRC),
         alt: node.getAttribute(ATTRIBUTE.ALT),
+        mediaType: node.getAttribute(ATTRIBUTE.MEDIA_TYPE),
     };
     //must contain an img container element
     const imgContainer = node.querySelector(settings.selector.imgContainer);

From d7f969a1acedc6ac87a3731ded90624254e48768 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Fri, 18 Mar 2022 15:49:11 +0000
Subject: [PATCH 26/49] Add inbound linking

Add tests

Add events
---
 packages/gallery/__tests__/announcements.js   |   6 +-
 packages/gallery/__tests__/api.js             |   2 +-
 packages/gallery/__tests__/fromURL.js         |   2 +-
 packages/gallery/__tests__/image-loading.js   |   2 +-
 .../gallery/__tests__/initialisation/index.js |  10 +-
 .../__tests__/initialisation/manual.js        |   2 +-
 .../__tests__/initialisation/multiple.js      |   8 +-
 packages/gallery/__tests__/interactions.js    |  12 +-
 packages/gallery/__tests__/picture.js         |   2 +-
 packages/gallery/__tests__/popstate.js        |   2 +-
 packages/gallery/__tests__/preload.js         |   2 +-
 packages/gallery/__tests__/updateURL.js       |   2 +-
 packages/gallery/__tests__/utils.js           |  25 +-
 packages/gallery/example/src/index.html       | 230 ++++++++++++++++--
 packages/gallery/example/src/js/index.js      |   4 +-
 packages/gallery/src/lib/constants.js         |   6 +
 packages/gallery/src/lib/defaults.js          |   9 +-
 packages/gallery/src/lib/dom.js               |  36 ++-
 packages/gallery/src/lib/factory.js           |  12 +-
 packages/gallery/src/lib/utils.js             |  15 +-
 20 files changed, 303 insertions(+), 86 deletions(-)

diff --git a/packages/gallery/__tests__/announcements.js b/packages/gallery/__tests__/announcements.js
index 8149997d..f45fec7c 100644
--- a/packages/gallery/__tests__/announcements.js
+++ b/packages/gallery/__tests__/announcements.js
@@ -4,7 +4,7 @@ describe('Gallery > announcements', () => {
     
     it('should warn if no live region is found', () => {
 
-        document.body.innerHTML = `<section class="gallery js-gallery">
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
@@ -85,7 +85,7 @@ describe('Gallery > announcements', () => {
 
     it('Should update the live region when navigation occurs', () => {
 
-        document.body.innerHTML = `<section class="gallery js-gallery">
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 3</div>
@@ -199,7 +199,7 @@ describe('Gallery > announcements', () => {
 
     it('Should render a custom announcement based on settings', () => {
 
-        document.body.innerHTML = `<section class="gallery js-gallery">
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery-2">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>Now viewing item 1 of 3</div>
diff --git a/packages/gallery/__tests__/api.js b/packages/gallery/__tests__/api.js
index 7902c7dc..540913bb 100644
--- a/packages/gallery/__tests__/api.js
+++ b/packages/gallery/__tests__/api.js
@@ -4,7 +4,7 @@ import defaults from '../src/lib/defaults';
 let instance;
 
 beforeAll(() => {
-    document.body.innerHTML = `<section class="gallery js-gallery">
+    document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
diff --git a/packages/gallery/__tests__/fromURL.js b/packages/gallery/__tests__/fromURL.js
index 683cad33..c98dac72 100644
--- a/packages/gallery/__tests__/fromURL.js
+++ b/packages/gallery/__tests__/fromURL.js
@@ -3,7 +3,7 @@ import gallery from '../src';
 let instance;
 
 beforeAll(() => {
-    document.body.innerHTML = `<section class="gallery js-gallery">
+    document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 3</div>
diff --git a/packages/gallery/__tests__/image-loading.js b/packages/gallery/__tests__/image-loading.js
index fac9ea74..f7f2a4df 100644
--- a/packages/gallery/__tests__/image-loading.js
+++ b/packages/gallery/__tests__/image-loading.js
@@ -10,7 +10,7 @@ beforeAll(() => {
         }
     });
 
-    document.body.innerHTML = `<section class="gallery js-gallery">
+    document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
diff --git a/packages/gallery/__tests__/initialisation/index.js b/packages/gallery/__tests__/initialisation/index.js
index 55f3e152..c812da49 100644
--- a/packages/gallery/__tests__/initialisation/index.js
+++ b/packages/gallery/__tests__/initialisation/index.js
@@ -11,7 +11,7 @@ describe('Gallery > initialisation', () => {
     });
 
     it('Should console.warn if no items are found', () => {
-        document.body.innerHTML = `<section class="gallery js-gallery">
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
@@ -85,7 +85,7 @@ describe('Gallery > initialisation', () => {
     });
 
     it('Should warn if no image container is found', () => {
-        document.body.innerHTML = `<section class="gallery js-gallery">
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
@@ -166,7 +166,7 @@ describe('Gallery > initialisation', () => {
     });
 
     it('Should warn if no img src, srcset, or loaded attributes are found', () => {
-        document.body.innerHTML = `<section class="gallery js-gallery">
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
@@ -244,7 +244,7 @@ describe('Gallery > initialisation', () => {
     });
 
     it('Should return an array of gallery objects', () => {
-        document.body.innerHTML = `<section class="gallery js-gallery">
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
@@ -326,7 +326,7 @@ describe('Gallery > initialisation', () => {
     });
 
     it('Should return an array of gallery objects with the DOM captured in state', () => {
-        document.body.innerHTML = `<section class="gallery js-gallery">
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
diff --git a/packages/gallery/__tests__/initialisation/manual.js b/packages/gallery/__tests__/initialisation/manual.js
index 7e3b2d5e..f2e1ba75 100644
--- a/packages/gallery/__tests__/initialisation/manual.js
+++ b/packages/gallery/__tests__/initialisation/manual.js
@@ -13,7 +13,7 @@ describe('Gallery > initialisation > manual initialisation', () => {
     });
 
     it('Should not set an active item, nor load any images until manually initialised', async () => {
-        document.body.innerHTML = `<section class="gallery js-gallery">
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
diff --git a/packages/gallery/__tests__/initialisation/multiple.js b/packages/gallery/__tests__/initialisation/multiple.js
index f11d52c4..977ab07d 100644
--- a/packages/gallery/__tests__/initialisation/multiple.js
+++ b/packages/gallery/__tests__/initialisation/multiple.js
@@ -3,7 +3,7 @@ import gallery from '../../src';
 describe('Gallery > initialisation > multiple', () => {
 
     it('Should return an array of gallery objects each with a distinct API affecting only that instance', () => {
-        document.body.innerHTML = `<section class="gallery js-gallery">
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
@@ -77,7 +77,7 @@ describe('Gallery > initialisation > multiple', () => {
                     </button>
                 </div>
             </section>
-            <section class="gallery js-gallery">
+            <section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
@@ -164,7 +164,7 @@ describe('Gallery > initialisation > multiple', () => {
     });
 
     it('Should initialise separate instances with differnt settings', () => {
-        document.body.innerHTML = `<section class="gallery js-gallery__1">
+        document.body.innerHTML = `<section class="gallery js-gallery__1" id="gallery-1">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
@@ -238,7 +238,7 @@ describe('Gallery > initialisation > multiple', () => {
                     </button>
                 </div>
             </section>
-            <section class="gallery js-gallery__2">
+            <section class="gallery js-gallery__2" id="gallery-2">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
diff --git a/packages/gallery/__tests__/interactions.js b/packages/gallery/__tests__/interactions.js
index 044bea12..a42ca10d 100644
--- a/packages/gallery/__tests__/interactions.js
+++ b/packages/gallery/__tests__/interactions.js
@@ -3,7 +3,9 @@ import gallery from '../src';
 let instance;
 
 beforeAll(() => {
-    document.body.innerHTML = `<section class="gallery js-gallery">
+    document.body.innerHTML = `<button data-gallery-navigate="1">1</button>
+    <button data-gallery-navigate="2">2</button>
+    <section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
@@ -134,4 +136,12 @@ describe('Gallery > click interactions', () => {
         expect(instance.getState().activeIndex).toEqual(0);
     });
 
+    it('should navigate to a specific item via a navigation button', () => {
+        expect(instance.getState().activeIndex).toEqual(0);
+        document.querySelector('[data-gallery-navigate="1"]').click();
+        expect(instance.getState().activeIndex).toEqual(1);
+        document.querySelector('[data-gallery-navigate="2"]').click();
+        expect(instance.getState().activeIndex).toEqual(2);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/gallery/__tests__/picture.js b/packages/gallery/__tests__/picture.js
index 9f2ae8d1..6afea5a5 100644
--- a/packages/gallery/__tests__/picture.js
+++ b/packages/gallery/__tests__/picture.js
@@ -10,7 +10,7 @@ beforeAll(() => {
         }
     });
 
-    document.body.innerHTML = `<section class="gallery js-gallery">
+    document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
diff --git a/packages/gallery/__tests__/popstate.js b/packages/gallery/__tests__/popstate.js
index 198e432c..612e78d3 100644
--- a/packages/gallery/__tests__/popstate.js
+++ b/packages/gallery/__tests__/popstate.js
@@ -3,7 +3,7 @@ import gallery from '../src';
 let instance;
 
 beforeEach(() => {
-    document.body.innerHTML = `<section class="gallery js-gallery">
+    document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 3</div>
diff --git a/packages/gallery/__tests__/preload.js b/packages/gallery/__tests__/preload.js
index 6a735d76..a0aab675 100644
--- a/packages/gallery/__tests__/preload.js
+++ b/packages/gallery/__tests__/preload.js
@@ -14,7 +14,7 @@ describe('Gallery > preload', () => {
     });
 
     it('Should preload all images', async () => {
-        document.body.innerHTML = `<section class="gallery js-gallery">
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
diff --git a/packages/gallery/__tests__/updateURL.js b/packages/gallery/__tests__/updateURL.js
index 21308436..1ad1de05 100644
--- a/packages/gallery/__tests__/updateURL.js
+++ b/packages/gallery/__tests__/updateURL.js
@@ -3,7 +3,7 @@ import gallery from '../src';
 let instance;
 
 beforeAll(() => {
-    document.body.innerHTML = `<section class="gallery js-gallery">
+    document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
                     <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 3</div>
diff --git a/packages/gallery/__tests__/utils.js b/packages/gallery/__tests__/utils.js
index a2297d38..aa1bd74e 100644
--- a/packages/gallery/__tests__/utils.js
+++ b/packages/gallery/__tests__/utils.js
@@ -23,41 +23,26 @@ describe('Gallery > Utils > sanitize', () => {
 //composeItems
 
 //composeDOM
-
-//getIndexFromURL
-// export const getIndexFromURL = (name, items, url, fallback = false) => {
-//     try {
-//         const hash = url.split(`#`)[1];
-//         if (hash.indexOf(`${name}-`) === -1) return fallback;
-//         const num = Number(hash.split(`${name}-`)[1]);
-//         if (isNaN(num)) throw 'Gallery hash not valid';
-//         const index = num - 1;
-//         if (index < 0 || index > (items.length - 1)) throw 'Gallery index out of bounds';
-//         return index;
-//     } catch (e){
-//         return fallback;
-//     }
-// };
 describe('Gallery > getIndexFromURL', () => {
     //return fallback if url.split throws
     it('Should return fallback if url.split throws', () => {
         const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const result = getIndexFromURL('test-name', [], '#');
-        expect(result).toEqual(false);
+        expect(result).toEqual([false]);
         warn.mockRestore();
     });
     
     it('Should return fallback if hash does not contain gallery name', () => {
         const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const result = getIndexFromURL('test-name', [], '#potato');
-        expect(result).toEqual(false);
+        expect(result).toEqual([false]);
         warn.mockRestore();
     });
     
     it('Should return fallback and console warn if hash does not contain a number', () => {
         const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const result = getIndexFromURL('test-name', [], '#test-name-potato');
-        expect(result).toEqual(false);
+        expect(result).toEqual([false]);
         expect(warn).toHaveBeenCalledWith('Gallery hash not valid');
         warn.mockRestore();
     });
@@ -65,7 +50,7 @@ describe('Gallery > getIndexFromURL', () => {
     it('Should return fallback and console warn if index is out of bounds', () => {
         const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const result = getIndexFromURL('test-name', [{}, {}], '#test-name-4');
-        expect(result).toEqual(false);
+        expect(result).toEqual([false]);
         expect(warn).toHaveBeenCalledWith('Gallery index out of bounds');
         warn.mockRestore();
     });
@@ -73,7 +58,7 @@ describe('Gallery > getIndexFromURL', () => {
     it('Should return index if one is found', () => {
         const result = getIndexFromURL('test-name', [{}, {}], '#test-name-1');
         //index is one less than the number in the hash
-        expect(result).toEqual(0);
+        expect(result).toEqual([0, true]);
     });
 
 
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 064158ce..a087f1f1 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -11,10 +11,12 @@
         }
         html,
         body {
-            height:100%;
+            /* height:100%; */
+            line-height: 1.4;
         }
         img {
             display: block;
+            max-width: 100%;
         }
         .visually-hidden {
             position: absolute;
@@ -37,21 +39,196 @@
             font-size:1rem;
             border:0 none;
         }
+        :root {
+            --gutter: 24px;
+            --baseline: 1.5rem;
+
+            --light-grey-1: hsl(0, 0%, 96%);
+            --light-grey-2: hsl(0, 0%, 90%);
+            --light-grey-3: hsl(0, 0%, 80%);
+            --mid-grey-1: hsl(0, 0%, 70%);
+            --mid-grey-2: hsl(0, 0%, 60%);
+            --mid-grey-3: hsl(0, 0%, 50%);
+            --dark-grey-1: hsl(0, 0%, 44%);
+            --dark-grey-2: hsl(0, 0%, 30%);
+            --dark-grey-3: hsl(0, 0%, 20%);
+        }
+
+        .gallery {
+            display: flex;
+            flex-direction: column;
+            color: #fff;
+            width: 100%;
+            background-color: var(--dark-grey-3);
+            height: 100vh;
+            position: relative;
+        }
+        .gallery__header {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding: 0 var(--gutter);
+                
+        }
+        @media(min-width: 768px) {
+            .gallery__header {
+                padding :0;
+            }
+        }
+        .gallery__total {
+            color: #fff;
+            padding-right: calc(var(--gutter)*1.5);
+        }
+        .gallery__share {
+            color: #fff;
+            margin-left: calc(var(--gutter)*1.5);
+            height: 40px;
+            background-color: transparent;
+        }
+        .gallery__fullscreen {
+            background-color: transparent;
+        }
+        .gallery__fullscreen-icon {
+            display: block;
+            fill: #fff;
+            width: 32px;
+            height: 32px;
+        }
+        .gallery__item {
+            display: none;
+        }
+        .gallery__item.is--active {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+        }
+        .gallery__item.is--active:focus {
+            outline: 0 none !important;
+            box-shadow: none !important;
+        }
+        .gallery__previous,
+        .gallery__next {
+            position: absolute;
+            bottom: calc(var(--baseline)*2);
+            background-color: transparent;
+            fill: #fff;
+        }
+        @media(min-width: 768px){
+            .gallery__previous,
+            .gallery__next {
+                top: calc(50% - 16px);
+                bottom: auto
+            }
+        }
+        .gallery__previous-icon, 
+        .gallery__next-icon {
+            display: block;
+            width: 32px;
+            height: 32px;
+        }
+        .gallery__previous {
+            left: calc(var(--gutter)/4);
+        }
+        .gallery__next {
+            right: calc(var(--gutter)/4);
+        }
+        .gallery__main {
+            display: flex;
+            flex-grow: 1;
+            padding-top: var(--baseline);
+            width: 100%;
+            margin: auto;
+        }
+        @media(min-width: 768px){
+            .gallery__main {
+                width: calc(100% - 120px);
+            }
+        }
+        .gallery__list {
+            display: flex;
+            width: 100%;
+        }
+        .gallery__item-img-container {
+            flex-grow: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .gallery__item-img-container img {
+            max-height: calc(100vh - 225px);
+        }
+        .gallery__item-footer {
+            padding: calc(var(--baseline)/2) calc(var(--gutter)*2.5) var(--baseline) calc(var(--gutter)*2.5);
+        }
+        @media(min-width: 768px){
+            .gallery__item-footer {
+                padding-left:0;
+                padding-right:0
+            }
+        }
+        .gallery__item-meta {
+            display: flex;
+        }
+        .gallery__item-category {
+            color: var(--light-grey-3);
+        }
+        .gallery__item-description {
+            flex-grow: 1
+        }
+        .gallery__item-link {
+            color: var(--light-grey-1);
+            text-decoration: underline;
+        }
+        .gallery__item-link:hover {
+            text-decoration: none;
+        }
+        .gallery__item-tags {
+            display: flex;
+        }
+        .gallery__item-tag + .gallery__item-tag {
+            margin-left: var(--gutter);
+        }
+        .gallery__item-tag-link {
+            display: block;
+            padding: 0 var(--gutter);
+            height: 36px;
+            line-height: 36px;
+            border: 1px solid var(--mid-grey-2);
+            border-radius: 18px;
+            color: var(--light-grey-1);
+            text-decoration: none;
+            transition: background-color 60ms ease, color 60ms ease;
+        }
+        .gallery__item-tag-link:hover {
+            background-color: var(--mid-grey-1);
+            color: var(--dark-grey-3);
+        }
+        .is--fullscreen .gallery__previous,
+        .is--fullscreen .gallery__next,
+        .is--fullscreen .gallery__item-footer,
+        .is--fullscreen .gallery__total,
+        .is--fullscreen .gallery__share {
+            display: none;
+        }
+        .is--fullscreen .gallery__header {
+            padding:calc(var(--baseline)/2) var(--gutter)
+        }
     </style>
   </head>
   <body>
-    <section class="gallery js-gallery">
-        <h2 class="visually-hidden">Gallery</h2>
+    <div class="gallery js-gallery" id="gallery">
         <div class="gallery__header">
             <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
             <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
-                <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="33.547" height="33.281" viewBox="0 0 33.547 33.281">
+                    <g transform="translate(-1434 -40.572)">
+                        <path d="M7.334,13.243a.919.919,0,0,0,.007-1.294L3.073,7.667l9.847,0a.914.914,0,0,0,0-1.828l-9.847,0L7.348,1.557A.925.925,0,0,0,7.341.263.91.91,0,0,0,6.054.27L.26,6.106h0a1.026,1.026,0,0,0-.19.288A.872.872,0,0,0,0,6.746a.916.916,0,0,0,.26.64l5.794,5.836A.9.9,0,0,0,7.334,13.243Z" transform="translate(1467.547 50.119) rotate(135)" fill="#fff"/>
+                        <path d="M7.334,13.243a.919.919,0,0,0,.007-1.294L3.073,7.667l9.847,0a.914.914,0,0,0,0-1.828l-9.847,0L7.348,1.557A.925.925,0,0,0,7.341.263.91.91,0,0,0,6.054.27L.26,6.106h0a1.026,1.026,0,0,0-.19.288A.872.872,0,0,0,0,6.746a.916.916,0,0,0,.26.64l5.794,5.836A.9.9,0,0,0,7.334,13.243Z" transform="translate(1434 64.307) rotate(-45)" fill="#fff"/>
+                    </g>
+                </svg>
             </button>
         </div>
         <div class="gallery__main">
-            <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
-                <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
-            </button>
             <ul class="gallery__list">
 
                 <li
@@ -77,7 +254,7 @@ <h2 class="gallery__item-artist">YouTube creator</h2>
                     </div>
                 </li>
 
-                <li
+                <!-- <li
                     class="gallery__item"
                     data-gallery-item
                     data-gallery-item-src="HC9kFY-upK0"
@@ -98,7 +275,7 @@ <h2 class="gallery__item-artist">YouTube creator</h2>
                             </ul>
                         </div>
                     </div>
-                </li>
+                </li> -->
 
 
 
@@ -107,7 +284,7 @@ <h2 class="gallery__item-artist">YouTube creator</h2>
                     class="gallery__item"
                     data-gallery-item
                     data-gallery-item-src="https://via.placeholder.com/500x200.png"
-                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/700x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1000x200.png", "media": "(min-width:700px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1000px)" }]'
+                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/700x400.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1000x600.png", "media": "(min-width:700px)" }, { "srcset": "https://via.placeholder.com/1600x1000.jpg", "media": "(min-width:1000px)" }]'
                 >
                     <div class="gallery__item-img-container" data-gallery-item-img-container>
                         <div data-gallery-item-loader>Loading...</div>
@@ -119,10 +296,10 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                                 <div class="gallery__item-category">Architecture - March</div>
                                 <div class="gallery__item-title">Example project name here</div>
                             </div>
-                            <ul class="gallery__item-tags">
+                            <!-- <ul class="gallery__item-tags">
                                 <li class="gallery__item-tag">Example tag</li>
                                 <li class="gallery__item-tag">Example tag</li>
-                            </ul>
+                            </ul> -->
                         </div>
                     </div>
                 </li>
@@ -130,7 +307,7 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                     class="gallery__item"
                     data-gallery-item
                     data-gallery-item-src="https://via.placeholder.com/420x300.png"
-                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/710x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1100x200.png", "media": "(min-width:710px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1100px)" }]'
+                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/710x900.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1100x1000.png", "media": "(min-width:710px)" }, { "srcset": "https://via.placeholder.com/1600x1400.jpg", "media": "(min-width:1100px)" }]'
                 >
                     <div class="gallery__item-img-container" data-gallery-item-img-container>
                         <div data-gallery-item-loader>Loading...</div>
@@ -142,10 +319,10 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                                 <div class="gallery__item-category">Architecture - April</div>
                                 <div class="gallery__item-title">Example project name here</div>
                             </div>
-                            <ul class="gallery__item-tags">
+                            <!-- <ul class="gallery__item-tags">
                                 <li class="gallery__item-tag">Example tag</li>
                                 <li class="gallery__item-tag">Example tag</li>
-                            </ul>
+                            </ul> -->
                         </div>
                     </div>
                 </li>
@@ -153,7 +330,7 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                     class="gallery__item"
                     data-gallery-item
                     data-gallery-item-src="https://via.placeholder.com/430x300.png"
-                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/730x200.png", "media": "(min-width:430px)" }, { "srcset": "https://via.placeholder.com/1300x200.png", "media": "(min-width:730px)" }, { "srcset": "https://via.placeholder.com/1630x200.jpg", "media": "(min-width:1300px)"}]'
+                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/730x300.png", "media": "(min-width:430px)" }, { "srcset": "https://via.placeholder.com/1300x1200.png", "media": "(min-width:730px)" }, { "srcset": "https://via.placeholder.com/1630x1500.jpg", "media": "(min-width:1300px)"}]'
                 >
                     <div class="gallery__item-img-container" data-gallery-item-img-container>
                         <div data-gallery-item-loader>Loading...</div>
@@ -165,10 +342,10 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                                 <div class="gallery__item-category">Architecture - May</div>
                                 <div class="gallery__item-title">Example project name here</div>
                             </div>
-                            <ul class="gallery__item-tags">
+                            <!-- <ul class="gallery__item-tags">
                                 <li class="gallery__item-tag">Example tag</li>
                                 <li class="gallery__item-tag">Example tag</li>
-                            </ul>
+                            </ul> -->
                         </div>
                     </div>
                 </li>
@@ -176,7 +353,7 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                     class="gallery__item"
                     data-gallery-item
                     data-gallery-item-src="https://via.placeholder.com/430x300.png"
-                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/740x200.png", "media": "(min-width:440px)" }, { "srcset": "https://via.placeholder.com/1400x200.png", "media": "(min-width:740px)" }, { "srcset": "https://via.placeholder.com/1640x200.jpg", "media": "(min-width:1400px)"}]'
+                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/740x1200.png", "media": "(min-width:440px)" }, { "srcset": "https://via.placeholder.com/1400x2200.png", "media": "(min-width:740px)" }, { "srcset": "https://via.placeholder.com/1640x2400.jpg", "media": "(min-width:1400px)"}]'
                 >
                     <div class="gallery__item-img-container" data-gallery-item-img-container>
                         <div data-gallery-item-loader>Loading...</div>
@@ -188,20 +365,25 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                                 <div class="gallery__item-category">Architecture - June</div>
                                 <div class="gallery__item-title">Example project name here</div>
                             </div>
-                            <ul class="gallery__item-tags">
+                            <!-- <ul class="gallery__item-tags">
                                 <li class="gallery__item-tag">Example tag</li>
                                 <li class="gallery__item-tag">Example tag</li>
-                            </ul>
+                            </ul> -->
                         </div>
                     </div>
                 </li>
 
 
             </ul>
-            <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+            
+            <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+            </button>
+            <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
             </button>
         </div>
-    </section>
+    </div>
+    <div style="height:1000px"></div>
   </body>
 </html>
diff --git a/packages/gallery/example/src/js/index.js b/packages/gallery/example/src/js/index.js
index dec2ee07..f2b01671 100644
--- a/packages/gallery/example/src/js/index.js
+++ b/packages/gallery/example/src/js/index.js
@@ -1,3 +1,5 @@
 import gallery from '../../../src';
     
-gallery('.js-gallery');
\ No newline at end of file
+const [ instance ] = gallery('.js-gallery');
+
+console.log(instance.getState());
\ No newline at end of file
diff --git a/packages/gallery/src/lib/constants.js b/packages/gallery/src/lib/constants.js
index cbfc932c..62437043 100644
--- a/packages/gallery/src/lib/constants.js
+++ b/packages/gallery/src/lib/constants.js
@@ -5,7 +5,13 @@ export const ATTRIBUTE = {
     SRC: 'data-gallery-item-src',
     ALT: 'data-gallery-item-alt',
     LOADED: 'data-gallery-item-loaded',
+    NAVIGATE: 'data-gallery-navigate',
     MEDIA_TYPE: 'data-gallery-media-type',
     MEDIA_TYPE_IMAGE: 'image',
     MEDIA_TYPE_VIDEO: 'video'
+};
+
+export const EVENTS = {
+    CHANGE: 'gallery.change',
+    TRIGGERED: 'gallery.triggered'
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/defaults.js b/packages/gallery/src/lib/defaults.js
index 3c8bfabe..3c3533e0 100644
--- a/packages/gallery/src/lib/defaults.js
+++ b/packages/gallery/src/lib/defaults.js
@@ -1,6 +1,7 @@
 /* istanbul ignore file */
 
 export default {
+    name: false, //for setting the URL, of not set (false) it will get it from the id the container node, or just 'gallery'
     preload: false,
     totals: true,
     startIndex: 0,
@@ -11,14 +12,16 @@ export default {
         previous: '[data-gallery-previous]',
         next: '[data-gallery-next]',
         imgContainer: '[data-gallery-item-img-container]',
-        loader: '[data-gallery-item-loader]'
+        loader: '[data-gallery-item-loader]',
+        navigate: '[data-gallery-navigate]'
     },
     className: {
         active: 'is--active',
-        loading: 'is--loading'
+        loading: 'is--loading',
+        fullscreen: 'is--fullscreen'
     },
     manualInitialisation: false, //if the gallery is hidden (e.g. in a modal) we may wish to delay initialisation and image loading until it is activiated
-    updateURL: false, //change URL when item changes
+    updateURL: true, //change URL when item changes
     announcement(current, total){
         return `${current} of ${total}`;
     }
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 8479e421..c159bc34 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -1,5 +1,5 @@
 import { sanitise } from './utils';
-import { ATTRIBUTE } from './constants';
+import { ATTRIBUTE, EVENTS } from './constants';
 
 const createPicture = item => {
     const picture = document.createElement('picture');
@@ -88,12 +88,12 @@ const loadItems = Store => i => {
 
     if (items.length > 1) indexes.push(i === 0 ? items.length - 1 : i - 1);
     if (items.length > 2) indexes.push(i === items.length - 1 ? 0 : i + 1);
-
     
     return indexes.map(idx => {
         if (!items[idx].loaded) {
             items[idx].node.classList.add(settings.className.loading);
             return items[idx].mediaType === ATTRIBUTE.MEDIA_TYPE_VIDEO ?  loadVideo(Store)(items[idx], idx) : loadImage(Store)(items[idx], idx);
+            // return loadImage(Store)(items[idx], idx);
         }
     });
 
@@ -111,9 +111,20 @@ export const init = Store => () => {
     //initialise buttons
     if (!dom.liveRegion) console.warn(`A live region announcing current and total items is recommended for screen readers.`);
     else writeLiveRegion(state);
-    if (dom.fullscreen) dom.fullscreen.addEventListener('click', toggleFullScreen.bind(null, Store));
+    if (dom.fullscreen) {
+        dom.fullscreen.addEventListener('click', toggleFullScreen.bind(null, Store));
+        document.addEventListener('fullscreenchange', e => {
+            if (document.fullscreenElement) document.documentElement.classList.add(settings.className.fullscreen);
+            else document.documentElement.classList.remove(settings.className.fullscreen);
+        });
+    }
     if (dom.previous) dom.previous.addEventListener('click', previous.bind(null, Store));
     if (dom.next) dom.next.addEventListener('click', next.bind(null, Store));
+    if (dom.triggers.length) {
+        dom.triggers.forEach(trigger => trigger.addEventListener('click', () => {
+            goTo(Store)(+trigger.getAttribute(ATTRIBUTE.NAVIGATE));
+        }));
+    }
     
     //set initial DOM state
     items.forEach((item, i) => {
@@ -137,8 +148,9 @@ const writeLiveRegion = ({ activeIndex, items, settings, dom }) => dom.liveRegio
 
 export const toggleFullScreen = Store => {
     const { node } = Store.getState();
-    if (!document.fullscreenElement) node.requestFullscreen && node.requestFullscreen();
-    else document.exitFullscreen && document.exitFullscreen();
+    if (!document.fullscreenElement) {
+        if (node.requestFullscreen) node.requestFullscreen();
+    } else if (document.exitFullscreen) document.exitFullscreen();
 };
 
 export const change = (Store, next) => {
@@ -168,10 +180,21 @@ export const change = (Store, next) => {
         () => {
             const num = next + 1;
             settings.updateURL && window.history.replaceState({ URL: `#${name}-${num}` }, '', `#${name}-${num}`);
-        }
+        },
+        broadcast(Store, EVENTS.CHANGE)
     ]);
 };
 
+export const broadcast = (Store, eventType) => state => {
+    const event = new CustomEvent(eventType, {
+        bubbles: true,
+        detail: {
+            getState: Store.getState
+        }
+    });
+    state.node.dispatchEvent(event);
+};
+
 export const previous = Store => {
     const { activeIndex, items } = Store.getState();
     change(Store, (activeIndex === 0 ? items.length - 1 : activeIndex - 1));
@@ -185,4 +208,5 @@ export const next = Store => {
 export const goTo = Store => i => {
     loadItems(Store)(i);
     change(Store, i);
+    broadcast(Store, EVENTS.TRIGGERED);
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index cf845a3a..4e72276e 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -1,5 +1,6 @@
 import { createStore } from './store';
-import { init, toggleFullScreen, goTo } from './dom';
+import { EVENTS } from './constants';
+import { init, toggleFullScreen, goTo, broadcast } from './dom';
 import { composeItems, composeDOM, getIndexFromURL, popstateHandler } from './utils';
 
 /* 
@@ -14,17 +15,20 @@ export default (node, settings, index) => {
     const items = [].slice.call(node.querySelectorAll(settings.selector.item));
     if (items.length === 0) return console.warn('Gallery cannot be initialised, no items found'), null;
 
-    const name = `gallery-${index + 1}`;
+    const name = `${settings.name || node.getAttribute('id') || 'gallery'}-${index + 1}`;
+    const [ startIndex, setfromURL = false ] = getIndexFromURL(name, items, location.hash, settings.startIndex);
+
     Store.dispatch({
         node,
         name,
         settings,
         items: composeItems(items, settings),
         dom: composeDOM(node, settings),
-        activeIndex: getIndexFromURL(name, items, location.hash, settings.startIndex)
+        activeIndex: startIndex
     }, [
         () => !settings.manualInitialisation && init(Store)(),
-        () => window.addEventListener('popstate', popstateHandler(Store))
+        () => window.addEventListener('popstate', popstateHandler(Store)),
+        () => setfromURL && broadcast(Store, EVENTS.TRIGGERED)(Store.getState())
     ]);
 
     return {
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index bd1078d9..02c1d0df 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -20,7 +20,7 @@ export const composeItems = (nodes, settings) => nodes.map(node => {
         sizes: node.getAttribute(ATTRIBUTE.SIZES),
         src: node.getAttribute(ATTRIBUTE.SRC),
         alt: node.getAttribute(ATTRIBUTE.ALT),
-        mediaType: node.getAttribute(ATTRIBUTE.MEDIA_TYPE),
+        mediaType: node.getAttribute(ATTRIBUTE.MEDIA_TYPE)
     };
     //must contain an img container element
     const imgContainer = node.querySelector(settings.selector.imgContainer);
@@ -41,24 +41,25 @@ export const composeDOM = (node, settings) => ({
     liveRegion: node.querySelector(settings.selector.liveRegion),
     fullscreen: node.querySelector(settings.selector.fullscreen),
     previous: node.querySelector(settings.selector.previous),
-    next: node.querySelector(settings.selector.next)
+    next: node.querySelector(settings.selector.next),
+    triggers: [].slice.call(document.querySelectorAll(settings.selector.navigate))
 });
 
 export const getIndexFromURL = (name, items, url, fallback = false) => {
     const hash = url.split(`#`)[1] || '';
-    if (hash.indexOf(`${name}-`) === -1) return fallback;
+    if (hash.indexOf(`${name}-`) === -1) return [ fallback ];
     const num = Number(hash.split(`${name}-`)[1]);
-    if (isNaN(num)) return console.warn('Gallery hash not valid'), fallback;
+    if (isNaN(num)) return console.warn('Gallery hash not valid'), [ fallback ];
     const index = num - 1;
-    if (index < 0 || index > (items.length - 1)) return console.warn('Gallery index out of bounds'), fallback;
-    return index;
+    if (index < 0 || index > (items.length - 1)) return console.warn('Gallery index out of bounds'), [ fallback ];
+    return [ index, true ];
 };
 
 export const popstateHandler = Store => e => {
     if (!e.state) return;
     const url = e.state.URL;
     const { name, items } = Store.getState();
-    const index = getIndexFromURL(name, items, url);
+    const [ index ] = getIndexFromURL(name, items, url);
     if (index === false) return;
     change(Store, index);
 };
\ No newline at end of file

From 486365bcc0400dc46cf57fb24cd2f9f051d5e62c Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Wed, 6 Apr 2022 15:08:18 +0100
Subject: [PATCH 27/49] Start refactoring loaders

---
 packages/gallery/src/lib/dom.js     | 80 ++-------------------------
 packages/gallery/src/lib/loaders.js | 84 +++++++++++++++++++++++++++++
 2 files changed, 87 insertions(+), 77 deletions(-)
 create mode 100644 packages/gallery/src/lib/loaders.js

diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index c159bc34..bd672a26 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -1,81 +1,6 @@
 import { sanitise } from './utils';
 import { ATTRIBUTE, EVENTS } from './constants';
-
-const createPicture = item => {
-    const picture = document.createElement('picture');
-    for (let i in item.sources){
-        const source = document.createElement('source');
-        if (item.sources[i].srcset) source.setAttribute('srcset', item.sources[i].srcset);
-        if (item.sources[i].media) source.setAttribute('media', item.sources[i].media);
-        if (item.sources[i].type) source.setAttribute('type', item.sources[i].type);
-        picture.insertBefore(source, picture.firstElementChild);
-    }
-    return picture;
-};
-
-/*
- * Returns an array of Promises
- *
- * 
- * @param i, Number, index of item
- */
-const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
-    const { items, settings } = Store.getState();
-
-    // We're here because the library does not think that the item is loaded
-    // because the item does not have the ATTRIBUTE.LOADED attribute,
-    // and the imgNode src does not match the item ATTRIBUTE.SRC
-    // therefore we can assume that any img (or SVG) present is a loading state and should be removed when the 
-    const loadingIndicator = item.imgContainer.querySelector(`img, svg, ${settings.selector.loader}`);
-    const img = new Image();
-    let picture = false;
-    try {
-        const loaded = () => {
-            item.loaded = true;
-            item.node.classList.remove(settings.className.loading);
-            item.node.setAttribute(ATTRIBUTE.LOADED, true);
-            item.img = img;
-            Store.dispatch({ items: items.map((_item, idx) => i === idx ? item : _item ) });
-            resolve(img);
-        };
-        img.onload = loaded;
-        if (item.srcset) img.setAttribute('srcset', item.srcset);
-        if (item.src) img.setAttribute('src', item.src);
-        if (item.sizes) img.setAttribute('sizes', item.sizes);
-        //assume picture tag is not present and we need to create it if there are item.sources
-        if (item.sources && item.sources.length > 0) picture = createPicture(item);
-        if (img.complete) loaded();
-        if (loadingIndicator) loadingIndicator.parentNode.removeChild(loadingIndicator);
-        if (picture) {
-            picture.appendChild(img);
-            item.imgContainer.appendChild(picture);
-        } else item.imgContainer.appendChild(img);
-
-    } catch (e) {
-        console.warn('Gallery cannot load image', e);
-        reject(img);
-    };
-});
-
-const loadVideo = Store => (item, i) => new Promise((resolve, reject) => {
-    const { items, settings } = Store.getState();
-    
-    const loadingIndicator = item.imgContainer.querySelector(`img, svg, ${settings.selector.loader}`);
-    const video = document.createElement('iframe');
-    const videoSrc = item.src;
-
-    video.setAttribute('class','data-yt-iframe');
-    video.setAttribute('allowfullscreen','');
-    video.setAttribute('frameborder','0');
-    video.setAttribute('src','https://www.youtube.com/embed/'+ videoSrc +'?rel=0&showinfo=0&autoplay=0&enablejsapi=1');
-    
-    item.loaded = true;
-    item.node.classList.remove(settings.className.loading);
-    item.node.setAttribute(ATTRIBUTE.LOADED, true);
-    Store.dispatch({ items: items.map((_item, idx) => i === idx ? item : _item ) });
-    if (loadingIndicator) loadingIndicator.parentNode.removeChild(loadingIndicator);
-    item.imgContainer.appendChild(video);
-});
+import loaders from './loaders';
 
 /*
  * Returns an array of Promises
@@ -92,7 +17,8 @@ const loadItems = Store => i => {
     return indexes.map(idx => {
         if (!items[idx].loaded) {
             items[idx].node.classList.add(settings.className.loading);
-            return items[idx].mediaType === ATTRIBUTE.MEDIA_TYPE_VIDEO ?  loadVideo(Store)(items[idx], idx) : loadImage(Store)(items[idx], idx);
+            // return items[idx].mediaType === ATTRIBUTE.MEDIA_TYPE_VIDEO ?  loadVideo(Store)(items[idx], idx) : loadImage(Store)(items[idx], idx);
+            return loaders[items[idx].mediaType];
             // return loadImage(Store)(items[idx], idx);
         }
     });
diff --git a/packages/gallery/src/lib/loaders.js b/packages/gallery/src/lib/loaders.js
new file mode 100644
index 00000000..f7b31b9b
--- /dev/null
+++ b/packages/gallery/src/lib/loaders.js
@@ -0,0 +1,84 @@
+import { ATTRIBUTE } from './constants';
+
+const createPicture = item => {
+    const picture = document.createElement('picture');
+    for (let i in item.sources){
+        const source = document.createElement('source');
+        if (item.sources[i].srcset) source.setAttribute('srcset', item.sources[i].srcset);
+        if (item.sources[i].media) source.setAttribute('media', item.sources[i].media);
+        if (item.sources[i].type) source.setAttribute('type', item.sources[i].type);
+        picture.insertBefore(source, picture.firstElementChild);
+    }
+    return picture;
+};
+
+/*
+ * Returns an array of Promises
+ *
+ * 
+ * @param i, Number, index of item
+ */
+export const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
+    const { items, settings } = Store.getState();
+
+    // We're here because the library does not think that the item is loaded
+    // because the item does not have the ATTRIBUTE.LOADED attribute,
+    // and the imgNode src does not match the item ATTRIBUTE.SRC
+    // therefore we can assume that any img (or SVG) present is a loading state and should be removed when the 
+    const loadingIndicator = item.imgContainer.querySelector(`img, svg, ${settings.selector.loader}`);
+    const img = new Image();
+    let picture = false;
+    try {
+        const loaded = () => {
+            item.loaded = true;
+            item.node.classList.remove(settings.className.loading);
+            item.node.setAttribute(ATTRIBUTE.LOADED, true);
+            item.img = img;
+            Store.dispatch({ items: items.map((_item, idx) => i === idx ? item : _item ) });
+            resolve(img);
+        };
+        img.onload = loaded;
+        if (item.srcset) img.setAttribute('srcset', item.srcset);
+        if (item.src) img.setAttribute('src', item.src);
+        if (item.sizes) img.setAttribute('sizes', item.sizes);
+        //assume picture tag is not present and we need to create it if there are item.sources
+        if (item.sources && item.sources.length > 0) picture = createPicture(item);
+        if (img.complete) loaded();
+        if (loadingIndicator) loadingIndicator.parentNode.removeChild(loadingIndicator);
+        if (picture) {
+            picture.appendChild(img);
+            item.imgContainer.appendChild(picture);
+        } else item.imgContainer.appendChild(img);
+
+    } catch (e) {
+        console.warn('Gallery cannot load image', e);
+        reject(img);
+    };
+});
+
+export const loadYT = Store => (item, i) => new Promise((resolve, reject) => {
+    const { items, settings } = Store.getState();
+    
+    const loadingIndicator = item.imgContainer.querySelector(`img, svg, ${settings.selector.loader}`);
+    const video = document.createElement('iframe');
+    const videoSrc = item.src;
+
+    video.setAttribute('class','data-yt-iframe');
+    video.setAttribute('allowfullscreen','');
+    video.setAttribute('frameborder','0');
+    video.setAttribute('src','https://www.youtube.com/embed/'+ videoSrc +'?rel=0&showinfo=0&autoplay=0&enablejsapi=1');
+    
+    item.loaded = true;
+    item.node.classList.remove(settings.className.loading);
+    item.node.setAttribute(ATTRIBUTE.LOADED, true);
+    Store.dispatch({ items: items.map((_item, idx) => i === idx ? item : _item ) });
+    if (loadingIndicator) loadingIndicator.parentNode.removeChild(loadingIndicator);
+    item.imgContainer.appendChild(video);
+
+    resolve(item);
+});
+
+export default {
+    image: loadImage,
+    youtube: loadYT
+};
\ No newline at end of file

From 7bb5f0807f3dfbda6e192b0038e5b52e2ba6e003 Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Thu, 13 Mar 2025 18:34:36 +0000
Subject: [PATCH 28/49] Update implementation to remove loaders

---
 packages/gallery/__tests__/image-loading.js   | 170 ------------------
 .../gallery/__tests__/initialisation/index.js | 159 ----------------
 .../__tests__/initialisation/manual.js        |  15 +-
 packages/gallery/__tests__/picture.js         | 123 -------------
 packages/gallery/__tests__/preload.js         | 159 ----------------
 packages/gallery/__tests__/store.js           |  28 +--
 packages/gallery/example/src/index.html       |  56 +++---
 packages/gallery/example/webpack.config.js    |   5 +
 packages/gallery/jest.config.js               |   3 +-
 packages/gallery/package.json                 |   4 +-
 packages/gallery/src/index.js                 |   3 +-
 packages/gallery/src/lib/constants.js         |  11 +-
 packages/gallery/src/lib/defaults.js          |   7 +-
 packages/gallery/src/lib/dom.js               |  91 ++++------
 packages/gallery/src/lib/factory.js           |  18 +-
 packages/gallery/src/lib/loaders.js           |  84 ---------
 packages/gallery/src/lib/store.js             |  22 +--
 packages/gallery/src/lib/utils.js             |  49 ++---
 18 files changed, 111 insertions(+), 896 deletions(-)
 delete mode 100644 packages/gallery/__tests__/image-loading.js
 delete mode 100644 packages/gallery/__tests__/picture.js
 delete mode 100644 packages/gallery/__tests__/preload.js
 delete mode 100644 packages/gallery/src/lib/loaders.js

diff --git a/packages/gallery/__tests__/image-loading.js b/packages/gallery/__tests__/image-loading.js
deleted file mode 100644
index f7f2a4df..00000000
--- a/packages/gallery/__tests__/image-loading.js
+++ /dev/null
@@ -1,170 +0,0 @@
-import gallery from '../src';
-const flushPromises = () => new Promise(setImmediate);
-let instance;
-
-beforeAll(() => {
-    //mock image complete because JSDom cannot load images
-    Object.defineProperty(Image.prototype, 'complete', {
-        get() {
-            return true;
-        }
-    });
-
-    document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
-                <h2 class="visually-hidden">Gallery</h2>
-                <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
-                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
-                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
-                    </button>
-                </div>
-                <div class="gallery__main">
-                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
-                    </button>
-                    <ul class="gallery__list">
-                        <li
-                            class="gallery__item is--active"
-                            data-gallery-item
-                            data-gallery-item-loaded
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <img 
-                                    alt="Image one"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="http://placehold.it/800x800"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - March</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            data-gallery-item-src="http://placehold.it/600x600"
-                            aria-hidden="true"
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <img 
-                                    alt="Image two"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - April</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            data-gallery-item-src="http://placehold.it/1200x1200"
-                            aria-hidden="true"
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <img 
-                                    alt="Image three"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - April</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            data-gallery-item-src="http://placehold.it/1200x1200"
-                            aria-hidden="true"
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <img 
-                                    alt="Image four"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - May</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
-                    </button>
-                </div>
-            </section>`;
-    [ instance ] = gallery('.js-gallery');
-});
-
-describe('Gallery > image loading', () => {
-
-    it('should load the previous and next images', async () => {
-        //loadImage is asynchonrous but we do not want to
-        //- return a promise from initialisation... do we?
-        //- broadcast a custom event just for testing (no other concrete use-case yet)
-        //so we're using a bit of a Jest hack to wait for loadImage to have run its course
-        await flushPromises();
-        const { items } = instance.getState();
-        items.forEach((item, i) => {
-            //four items, we expect 0 (startIndex), 1 (next), and 3 (previous) to be loaded
-            expect(item.loaded).toEqual(i !== 2);
-        });
-        //navigate to the next item
-        instance.goTo(1);
-        //wait for loadImage to run its course
-        await flushPromises();
-        //all should be loaded now
-        items.forEach((item, i) => {
-            //four items, we expect 0 (startIndex), 1 (next), and 3 (previous) to be loaded
-            expect(item.loaded).toEqual(true);
-        });
-    });
-
-});
\ No newline at end of file
diff --git a/packages/gallery/__tests__/initialisation/index.js b/packages/gallery/__tests__/initialisation/index.js
index c812da49..b472cdc9 100644
--- a/packages/gallery/__tests__/initialisation/index.js
+++ b/packages/gallery/__tests__/initialisation/index.js
@@ -1,5 +1,4 @@
 import gallery from '../../src';
-import defaults from '../../src/lib/defaults';
 
 describe('Gallery > initialisation', () => {
 
@@ -84,164 +83,6 @@ describe('Gallery > initialisation', () => {
         expect(console.warn).toHaveBeenCalledWith('Gallery cannot be initialised, no items found');
     });
 
-    it('Should warn if no image container is found', () => {
-        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
-                <h2 class="visually-hidden">Gallery</h2>
-                <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
-                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
-                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
-                    </button>
-                </div>
-                <div class="gallery__main">
-                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
-                    </button>
-                    <ul class="gallery__list">
-                        <li
-                            class="gallery__item is--active"
-                            data-gallery-item
-                            data-gallery-item-loaded
-                        >
-                            <div class="gallery__item-img-container">
-                                <img 
-                                    alt="Image one"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="http://placehold.it/800x800"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - March</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            data-gallery-item-src="http://placehold.it/1200x1200"
-                            aria-hidden="true"
-                        >
-                            <div class="gallery__item-img-container">
-                                <img 
-                                    alt="Image two"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - April</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
-                    </button>
-                </div>
-            </section>`;
-        console.warn = jest.fn();
-        gallery('.js-gallery');
-        expect(console.warn).toHaveBeenCalledWith(`Gallery cannot find image container ${defaults.selector.imgContainer}`);
-        
-    });
-
-    it('Should warn if no img src, srcset, or loaded attributes are found', () => {
-        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
-                <h2 class="visually-hidden">Gallery</h2>
-                <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
-                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
-                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
-                    </button>
-                </div>
-                <div class="gallery__main">
-                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
-                    </button>
-                    <ul class="gallery__list">
-                        <li
-                            class="gallery__item is--active"
-                            data-gallery-item
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <img 
-                                    alt="Image one"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="http://placehold.it/800x800"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - March</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            aria-hidden="true"
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <img 
-                                    alt="Image two"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - April</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
-                    </button>
-                </div>
-            </section>`;
-        console.warn = jest.fn();
-        gallery('.js-gallery');
-        expect(console.warn).toHaveBeenCalledWith('Gallery cannot be initialised, no image sources found');
-    });
 
     it('Should return an array of gallery objects', () => {
         document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
diff --git a/packages/gallery/__tests__/initialisation/manual.js b/packages/gallery/__tests__/initialisation/manual.js
index f2e1ba75..fa48b64f 100644
--- a/packages/gallery/__tests__/initialisation/manual.js
+++ b/packages/gallery/__tests__/initialisation/manual.js
@@ -1,6 +1,5 @@
 import gallery from '../../src';
 import defaults from '../../src/lib/defaults';
-import { ATTRIBUTE } from '../../src/lib/constants';
 
 describe('Gallery > initialisation > manual initialisation', () => {
     //mock image complete because JSDom cannot load images
@@ -29,7 +28,6 @@ describe('Gallery > initialisation > manual initialisation', () => {
                         <li
                             class="gallery__item"
                             data-gallery-item
-                            data-gallery-item-src="http://placehold.it/800x800"
                             aria-hidden="true"
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
@@ -37,7 +35,7 @@ describe('Gallery > initialisation > manual initialisation', () => {
                                     alt="Image one"
                                     class="gallery__item-img"
                                     decoding="async"
-                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                    src="http://placehold.it/800x800""
                                 />
                             </div>
                             <div class="gallery__item-footer">
@@ -57,15 +55,14 @@ describe('Gallery > initialisation > manual initialisation', () => {
                         <li
                             class="gallery__item"
                             data-gallery-item
-                            data-gallery-item-src="http://placehold.it/1200x1200"
                             aria-hidden="true"
                         >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                            <div class="gallery__item-img-container">
                                 <img 
                                     alt="Image two"
                                     class="gallery__item-img"
                                     decoding="async"
-                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                    src="http://placehold.it/1200x1200"
                                 />
                             </div>
                             <div class="gallery__item-footer">
@@ -94,13 +91,9 @@ describe('Gallery > initialisation > manual initialisation', () => {
         expect(items[0].node.hasAttribute('aria-hidden')).toEqual(true);
         expect(items[0].node.classList.contains(defaults.className.active)).toEqual(false);
 
-        const imgs = await instance.initialise();
-        expect(items[0].node.hasAttribute(ATTRIBUTE.LOADED)).toEqual(true);
+        await instance.initialise();
         expect(items[0].node.hasAttribute('aria-hidden')).toEqual(false);
         expect(items[0].node.classList.contains(defaults.className.active)).toEqual(true);
-        expect(imgs.length).toEqual(2);
-        expect(imgs[0].src).toEqual('http://placehold.it/800x800');
-        expect(imgs[1].src).toEqual('http://placehold.it/1200x1200');
     });
 
 });
\ No newline at end of file
diff --git a/packages/gallery/__tests__/picture.js b/packages/gallery/__tests__/picture.js
deleted file mode 100644
index 6afea5a5..00000000
--- a/packages/gallery/__tests__/picture.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import gallery from '../src';
-const flushPromises = () => new Promise(setImmediate);
-let instance;
-
-beforeAll(() => {
-    //mock image complete because JSDom cannot load images
-    Object.defineProperty(Image.prototype, 'complete', {
-        get() {
-            return true;
-        }
-    });
-
-    document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
-                <h2 class="visually-hidden">Gallery</h2>
-                <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
-                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
-                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
-                    </button>
-                </div>
-                <div class="gallery__main">
-                    <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
-                    </button>
-                    <ul class="gallery__list">
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            data-gallery-item-src="https://via.placeholder.com/500x200.png"
-                            data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/700x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1000x200.png", "media": "(min-width:700px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1000px)" }]'
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <div data-gallery-item-loader>Loading...</div>
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - March</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            data-gallery-item-src="https://via.placeholder.com/420x300.png"
-                            data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/710x200.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1100x200.png", "media": "(min-width:710px)" }, { "srcset": "https://via.placeholder.com/1600x200.jpg", "media": "(min-width:1100px)" }]'
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <div data-gallery-item-loader>Loading...</div>
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - April</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            data-gallery-item-src="https://via.placeholder.com/430x300.png"
-                            data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/730x200.png", "media": "(min-width:430px)" }, { "srcset": "https://via.placeholder.com/1300x200.png", "media": "(min-width:730px)" }, { "srcset": "https://via.placeholder.com/1630x200.jpg", "media": "(min-width:1300px)"}]'
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <div data-gallery-item-loader>Loading...</div>
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - April</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
-                    </button>
-                </div>
-            </section>`;
-    [ instance ] = gallery('.js-gallery');
-});
-
-describe('Gallery > picture loading', () => {
-
-    it('should create a picture element and add sources', async () => {
-
-        await flushPromises();
-        const { items } = instance.getState();
-        items.forEach((item, i) => {
-            expect(item.loaded).toEqual(true);
-            const picture = item.node.querySelector('picture');
-            expect(picture).toBeDefined();
-            const sources = Array.from(picture.querySelectorAll('source'));
-            expect(sources.length).toEqual(item.sources.length);
-            const img = picture.querySelector('img');
-            
-            expect(item.img).toEqual(img);
-        });
-
-    });
-
-});
\ No newline at end of file
diff --git a/packages/gallery/__tests__/preload.js b/packages/gallery/__tests__/preload.js
deleted file mode 100644
index a0aab675..00000000
--- a/packages/gallery/__tests__/preload.js
+++ /dev/null
@@ -1,159 +0,0 @@
-import gallery from '../src';
-import defaults from '../src/lib/defaults';
-import { ATTRIBUTE } from '../src/lib/constants';
-const flushPromises = () => new Promise(setImmediate);
-
-describe('Gallery > preload', () => {
-    //mock image complete because JSDom cannot load images
-    beforeAll(() => {
-        Object.defineProperty(Image.prototype, 'complete', {
-            get() {
-                return true;
-            }
-        });
-    });
-
-    it('Should preload all images', async () => {
-        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
-                <h2 class="visually-hidden">Gallery</h2>
-                <div class="gallery__header">
-                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
-                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
-                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
-                    </button>
-                </div>
-                <div class="gallery__main">
-                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
-                    </button>
-                    <ul class="gallery__list">
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            data-gallery-item-src="http://placehold.it/800x800"
-                            aria-hidden="true"
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <img 
-                                    alt="Image one"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - March</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            data-gallery-item-src="http://placehold.it/1200x1200"
-                            aria-hidden="true"
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <img 
-                                    alt="Image two"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - April</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            data-gallery-item-src="http://placehold.it/1200x1200"
-                            aria-hidden="true"
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <img 
-                                    alt="Image two"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - May</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                        <li
-                            class="gallery__item"
-                            data-gallery-item
-                            data-gallery-item-src="http://placehold.it/1200x1200"
-                            aria-hidden="true"
-                        >
-                            <div class="gallery__item-img-container" data-gallery-item-img-container>
-                                <img 
-                                    alt="Image two"
-                                    class="gallery__item-img"
-                                    decoding="async"
-                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                                />
-                            </div>
-                            <div class="gallery__item-footer">
-                                <div class="gallery__item-meta">
-                                    <div class="gallery__item-description">
-                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                        <div class="gallery__item-category">Architecture - June</div>
-                                        <div class="gallery__item-title">Example project name here</div>
-                                    </div>
-                                    <ul class="gallery__item-tags">
-                                        <li class="gallery__item-tag">Example tag</li>
-                                        <li class="gallery__item-tag">Example tag</li>
-                                    </ul>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
-                    </button>
-                </div>
-            </section>`;
-        const [ instance ] = gallery('.js-gallery', { preload: true });
-        await flushPromises();
-
-        const { items } = instance.getState();
-
-        items.forEach(item => {
-            expect(item.node.hasAttribute(ATTRIBUTE.LOADED)).toEqual(true);
-            expect(item.img.src).toEqual(item.node.getAttribute(ATTRIBUTE.SRC));
-        });
-    });
-
-});
\ No newline at end of file
diff --git a/packages/gallery/__tests__/store.js b/packages/gallery/__tests__/store.js
index 1378e195..4bd13136 100644
--- a/packages/gallery/__tests__/store.js
+++ b/packages/gallery/__tests__/store.js
@@ -1,38 +1,38 @@
 import { createStore } from '../src/lib/store';
 
-describe(`Gallery > Store`, () => {
+describe(`Gallery > store`, () => {
 
-    const Store = createStore();
+    const store = createStore();
     let effect = false;
     const sideEffect = state => {
         effect = !effect;
     };
 
-    it('createStore should return an Object with an API', async () => {
-        expect(Store).not.toBeNull();
-        expect(Store.getState).not.toBeNull();
-        expect(Store.dispatch).not.toBeNull();
+    it('createstore should return an Object with an API', async () => {
+        expect(store).not.toBeNull();
+        expect(store.getState).not.toBeNull();
+        expect(store.update).not.toBeNull();
     });
 
     it('should have a getState function that returns a private state Object', async () => {
-        expect(Store.state).toBeUndefined();
-        expect(Store.getState()).toEqual({});
+        expect(store.state).toBeUndefined();
+        expect(store.getState()).toEqual({});
     });
 
     it('should have a dispatch function that updates state', async () => {
         const nextState = { isOpen: true };
-        Store.dispatch(nextState);
-        expect(Store.getState()).toEqual(nextState);
+        store.update(nextState);
+        expect(store.getState()).toEqual(nextState);
     });
 
     it('should have a dispatch function that does not update state if nextState is not passed', async () => {
-        const Store = createStore();
-        Store.dispatch();
-        expect(Store.getState()).toEqual({});
+        const store = createStore();
+        store.update();
+        expect(store.getState()).toEqual({});
     });
 
     it('should have a dispatch function that invokes any side effect functions passed after the state change, with new state as only argument', async () => {
-        Store.dispatch({}, [sideEffect]);
+        store.update({}, [sideEffect]);
         expect(effect).toEqual(true);
     });
 
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index a087f1f1..034187f9 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -231,7 +231,7 @@
         <div class="gallery__main">
             <ul class="gallery__list">
 
-                <li
+                <!-- <li
                     class="gallery__item"
                     data-gallery-item
                     data-gallery-item-src="_987Xgd443c"
@@ -252,7 +252,7 @@ <h2 class="gallery__item-artist">YouTube creator</h2>
                             </ul>
                         </div>
                     </div>
-                </li>
+                </li> -->
 
                 <!-- <li
                     class="gallery__item"
@@ -280,14 +280,14 @@ <h2 class="gallery__item-artist">YouTube creator</h2>
 
 
 
-                <li
-                    class="gallery__item"
-                    data-gallery-item
-                    data-gallery-item-src="https://via.placeholder.com/500x200.png"
-                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/700x400.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1000x600.png", "media": "(min-width:700px)" }, { "srcset": "https://via.placeholder.com/1600x1000.jpg", "media": "(min-width:1000px)" }]'
-                >
-                    <div class="gallery__item-img-container" data-gallery-item-img-container>
-                        <div data-gallery-item-loader>Loading...</div>
+                <li class="gallery__item" data-gallery-item>
+                    <div class="gallery__item-img-container">
+                        <picture>
+                            <source srcset="https://placehold.co/1600x1000.jpg" media="(min-width:1000px)">
+                            <source srcset="https://placehold.co/1000x600.png" media="(min-width:700px)">
+                            <source srcset="https://placehold.co/700x400.png" media="(min-width:400px)">
+                            <img loading="lazy" src="https://placehold.co/500x200.png">
+                        </picture>
                     </div>
                     <div class="gallery__item-footer">
                         <div class="gallery__item-meta">
@@ -303,14 +303,10 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                         </div>
                     </div>
                 </li>
-                <li
-                    class="gallery__item"
-                    data-gallery-item
-                    data-gallery-item-src="https://via.placeholder.com/420x300.png"
-                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/710x900.png", "media": "(min-width:400px)" }, { "srcset": "https://via.placeholder.com/1100x1000.png", "media": "(min-width:710px)" }, { "srcset": "https://via.placeholder.com/1600x1400.jpg", "media": "(min-width:1100px)" }]'
-                >
-                    <div class="gallery__item-img-container" data-gallery-item-img-container>
-                        <div data-gallery-item-loader>Loading...</div>
+                <li class="gallery__item"  data-gallery-item>
+                    <div class="gallery__item-img-container">
+                        <!-- <div data-gallery-item-loader>Loading...</div> -->
+                        <picture><source srcset="https://placehold.co/1600x1400.jpg" media="(min-width:1100px)"><source srcset="https://placehold.co/1100x1000.png" media="(min-width:710px)"><source srcset="https://placehold.co/710x900.png" media="(min-width:400px)"><img loading="lazy" src="https://placehold.co/420x300.png"></picture>
                     </div>
                     <div class="gallery__item-footer">
                         <div class="gallery__item-meta">
@@ -326,14 +322,10 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                         </div>
                     </div>
                 </li>
-                <li
-                    class="gallery__item"
-                    data-gallery-item
-                    data-gallery-item-src="https://via.placeholder.com/430x300.png"
-                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/730x300.png", "media": "(min-width:430px)" }, { "srcset": "https://via.placeholder.com/1300x1200.png", "media": "(min-width:730px)" }, { "srcset": "https://via.placeholder.com/1630x1500.jpg", "media": "(min-width:1300px)"}]'
-                >
-                    <div class="gallery__item-img-container" data-gallery-item-img-container>
-                        <div data-gallery-item-loader>Loading...</div>
+                <li class="gallery__item" data-gallery-item>
+                    <div class="gallery__item-img-container">
+                        <!-- <div data-gallery-item-loader>Loading...</div> -->
+                        <picture><source srcset="https://placehold.co/1630x1500.jpg" media="(min-width:1300px)"><source srcset="https://placehold.co/1300x1200.png" media="(min-width:730px)"><source srcset="https://placehold.co/730x300.png" media="(min-width:430px)"><img loading="lazy" src="https://placehold.co/430x300.png"></picture>
                     </div>
                     <div class="gallery__item-footer">
                         <div class="gallery__item-meta">
@@ -349,14 +341,10 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
                         </div>
                     </div>
                 </li>
-                <li
-                    class="gallery__item"
-                    data-gallery-item
-                    data-gallery-item-src="https://via.placeholder.com/430x300.png"
-                    data-gallery-item-sources='[{ "srcset": "https://via.placeholder.com/740x1200.png", "media": "(min-width:440px)" }, { "srcset": "https://via.placeholder.com/1400x2200.png", "media": "(min-width:740px)" }, { "srcset": "https://via.placeholder.com/1640x2400.jpg", "media": "(min-width:1400px)"}]'
-                >
-                    <div class="gallery__item-img-container" data-gallery-item-img-container>
-                        <div data-gallery-item-loader>Loading...</div>
+                <li class="gallery__item" data-gallery-item>
+                    <div class="gallery__item-img-container">
+                        <!-- <div data-gallery-item-loader>Loading...</div> -->
+                        <picture><source srcset="https://placehold.co/1640x2400.jpg" media="(min-width:1400px)"><source srcset="https://placehold.co/1400x2200.png" media="(min-width:740px)"><source srcset="https://placehold.co/740x1200.png" media="(min-width:440px)"><img loading="lazy" src="https://placehold.co/430x300.png"></picture>
                     </div>
                     <div class="gallery__item-footer">
                         <div class="gallery__item-meta">
diff --git a/packages/gallery/example/webpack.config.js b/packages/gallery/example/webpack.config.js
index c6b42ad2..a2d72d75 100644
--- a/packages/gallery/example/webpack.config.js
+++ b/packages/gallery/example/webpack.config.js
@@ -10,6 +10,11 @@ module.exports = {
         filename: 'app.js',
         path: path.resolve(__dirname, './build')
     },
+    mode: 'development',
+    devtool: 'source-map',
+    devServer: {
+        port: 8081
+    },
     plugins: [
         new webpack.HotModuleReplacementPlugin(),
         new CleanWebpackPlugin(['./build']),
diff --git a/packages/gallery/jest.config.js b/packages/gallery/jest.config.js
index 7b7f035b..05652709 100644
--- a/packages/gallery/jest.config.js
+++ b/packages/gallery/jest.config.js
@@ -7,5 +7,6 @@ module.exports = {
         '^.+\\.js$': '../../tools/jest/babel-jest-wrapper.js'
     },
     displayName: pack.name,
-    name: pack.name
+    name: pack.name,
+    testEnvironment: 'jsdom'
 };
\ No newline at end of file
diff --git a/packages/gallery/package.json b/packages/gallery/package.json
index 04b1efc3..86962219 100644
--- a/packages/gallery/package.json
+++ b/packages/gallery/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stormid/gallery",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0",
   "description": "Accessible image gallery",
   "author": "stormid",
   "license": "MIT",
@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "build": "npx microbundle --name Gallery",
-    "test": "node_modules/.bin/jest --coverage",
+    "test": "jest --coverage --passWithNoTests",
     "dev": "webpack-dev-server --config example/webpack.config.js --mode development",
     "prod": "webpack --config example/webpack.config.js --mode production",
     "prepublish": "npm run -s build"
diff --git a/packages/gallery/src/index.js b/packages/gallery/src/index.js
index 9b807595..720a860c 100644
--- a/packages/gallery/src/index.js
+++ b/packages/gallery/src/index.js
@@ -1,8 +1,9 @@
 import defaults from './lib/defaults';
 import factory from './lib/factory';
+import { getSelection } from './lib/utils';
 
 export default (selector, options) => {
-    const galleries = [].slice.call(document.querySelectorAll(selector));
+    const galleries = getSelection(selector);
     if (galleries.length === 0) return void console.warn('Gallery cannot be initialised, no galleries found');
     
     return galleries.map((gallery, index) => Object.create(factory(gallery, { ...defaults, ...options }, index)));
diff --git a/packages/gallery/src/lib/constants.js b/packages/gallery/src/lib/constants.js
index 62437043..0f0f3c52 100644
--- a/packages/gallery/src/lib/constants.js
+++ b/packages/gallery/src/lib/constants.js
@@ -1,14 +1,5 @@
 export const ATTRIBUTE = {
-    SOURCES: 'data-gallery-item-sources',
-    SRCSET: 'data-gallery-item-srcset',
-    SIZES: 'data-gallery-item-sizes',
-    SRC: 'data-gallery-item-src',
-    ALT: 'data-gallery-item-alt',
-    LOADED: 'data-gallery-item-loaded',
-    NAVIGATE: 'data-gallery-navigate',
-    MEDIA_TYPE: 'data-gallery-media-type',
-    MEDIA_TYPE_IMAGE: 'image',
-    MEDIA_TYPE_VIDEO: 'video'
+    NAVIGATE: 'data-gallery-navigate'
 };
 
 export const EVENTS = {
diff --git a/packages/gallery/src/lib/defaults.js b/packages/gallery/src/lib/defaults.js
index 3c3533e0..af13a56e 100644
--- a/packages/gallery/src/lib/defaults.js
+++ b/packages/gallery/src/lib/defaults.js
@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 
 export default {
-    name: false, //for setting the URL, of not set (false) it will get it from the id the container node, or just 'gallery'
+    name: false, //for setting the URL, if not set (false) it will get it from the id the container node, or just 'gallery'
     preload: false,
     totals: true,
     startIndex: 0,
@@ -11,16 +11,13 @@ export default {
         liveRegion: '[data-gallery-live-region]',
         previous: '[data-gallery-previous]',
         next: '[data-gallery-next]',
-        imgContainer: '[data-gallery-item-img-container]',
-        loader: '[data-gallery-item-loader]',
         navigate: '[data-gallery-navigate]'
     },
     className: {
         active: 'is--active',
-        loading: 'is--loading',
         fullscreen: 'is--fullscreen'
     },
-    manualInitialisation: false, //if the gallery is hidden (e.g. in a modal) we may wish to delay initialisation and image loading until it is activiated
+    manualInitialisation: false, //if the gallery is hidden (e.g. in a modals) we may wish to delay initialisation
     updateURL: true, //change URL when item changes
     announcement(current, total){
         return `${current} of ${total}`;
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index bd672a26..de15041a 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -1,54 +1,31 @@
 import { sanitise } from './utils';
 import { ATTRIBUTE, EVENTS } from './constants';
-import loaders from './loaders';
 
-/*
- * Returns an array of Promises
- *
- * @param i, Number, index of item
- */
-const loadItems = Store => i => {
-    const { items, settings } = Store.getState();
-    const indexes = [i];
-
-    if (items.length > 1) indexes.push(i === 0 ? items.length - 1 : i - 1);
-    if (items.length > 2) indexes.push(i === items.length - 1 ? 0 : i + 1);
-    
-    return indexes.map(idx => {
-        if (!items[idx].loaded) {
-            items[idx].node.classList.add(settings.className.loading);
-            // return items[idx].mediaType === ATTRIBUTE.MEDIA_TYPE_VIDEO ?  loadVideo(Store)(items[idx], idx) : loadImage(Store)(items[idx], idx);
-            return loaders[items[idx].mediaType];
-            // return loadImage(Store)(items[idx], idx);
-        }
-    });
-
-};
 
 /*
  * Returns a Promise wrapping the loading image Promises using Promise.all
  *
  * @param i, Number, index of item
  */
-export const init = Store => () => {
-    const state = Store.getState();
+export const init = store => () => {
+    const state = store.getState();
     const { settings, items, dom, activeIndex } = state;
-    
+
     //initialise buttons
     if (!dom.liveRegion) console.warn(`A live region announcing current and total items is recommended for screen readers.`);
     else writeLiveRegion(state);
     if (dom.fullscreen) {
-        dom.fullscreen.addEventListener('click', toggleFullScreen.bind(null, Store));
+        dom.fullscreen.addEventListener('click', toggleFullScreen.bind(null, store));
         document.addEventListener('fullscreenchange', e => {
             if (document.fullscreenElement) document.documentElement.classList.add(settings.className.fullscreen);
             else document.documentElement.classList.remove(settings.className.fullscreen);
         });
     }
-    if (dom.previous) dom.previous.addEventListener('click', previous.bind(null, Store));
-    if (dom.next) dom.next.addEventListener('click', next.bind(null, Store));
+    if (dom.previous) dom.previous.addEventListener('click', previous.bind(null, store));
+    if (dom.next) dom.next.addEventListener('click', next.bind(null, store));
     if (dom.triggers.length) {
         dom.triggers.forEach(trigger => trigger.addEventListener('click', () => {
-            goTo(Store)(+trigger.getAttribute(ATTRIBUTE.NAVIGATE));
+            goTo(store)(+trigger.getAttribute(ATTRIBUTE.NAVIGATE));
         }));
     }
     
@@ -63,76 +40,70 @@ export const init = Store => () => {
             if (!item.node.hasAttribute('aria-hidden')) item.node.setAttribute('aria-hidden', 'true');
         }
     });
-
-    //preload all images if setting is true, or just previous and next
-    if (settings.preload) return Promise.all(items.map(loadImage(Store)));
-    return Promise.all(loadItems(Store)(activeIndex));
     
 };
 
 const writeLiveRegion = ({ activeIndex, items, settings, dom }) => dom.liveRegion.innerHTML = sanitise(settings.announcement(activeIndex + 1, items.length));
 
-export const toggleFullScreen = Store => {
-    const { node } = Store.getState();
+export const toggleFullScreen = store => {
+    const { node } = store.getState();
     if (!document.fullscreenElement) {
         if (node.requestFullscreen) node.requestFullscreen();
     } else if (document.exitFullscreen) document.exitFullscreen();
 };
 
-export const change = (Store, next) => {
-    const { activeIndex, items, settings, name } = Store.getState();
+export const change = (store, next) => {
+    const { activeIndex, items, settings, name } = store.getState();
 
     // Ensure any YouTube videos are stopped
-    let targetOrigin = 'https://www.youtube.com';
-    let youtube_iframes = [...document.querySelectorAll('.data-yt-iframe')];
-    if(youtube_iframes.length){
-        youtube_iframes.forEach(youtube_iframe => {
-            youtube_iframe.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', targetOrigin);
-        })
-    }
+    // let targetOrigin = 'https://www.youtube.com';
+    // let youtube_iframes = [...document.querySelectorAll('.data-yt-iframe')];
+    // if(youtube_iframes.length){
+    //     youtube_iframes.forEach(youtube_iframe => {
+    //         youtube_iframe.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', targetOrigin);
+    //     })
+    // }
 
     //set activeIndex in state,
     //then run all side effects to change the DOM/show and hide items, manage focus, and load updated previous/next
-    Store.dispatch({ activeIndex: next }, [
+    store.update({ ...store.getState(), activeIndex: next }, [
         () => {
             items[activeIndex].node.classList.remove('is--active');
             items[activeIndex].node.setAttribute('aria-hidden', 'true');
             items[next].node.classList.add('is--active');
             items[next].node.removeAttribute('aria-hidden');
         },
-        () => loadItems(Store)(next),
         () => items[next].node.focus(),
         writeLiveRegion,
         () => {
             const num = next + 1;
             settings.updateURL && window.history.replaceState({ URL: `#${name}-${num}` }, '', `#${name}-${num}`);
         },
-        broadcast(Store, EVENTS.CHANGE)
+        broadcast(store, EVENTS.CHANGE)
     ]);
 };
 
-export const broadcast = (Store, eventType) => state => {
+export const broadcast = (store, eventType) => state => {
     const event = new CustomEvent(eventType, {
         bubbles: true,
         detail: {
-            getState: Store.getState
+            getState: store.getState
         }
     });
     state.node.dispatchEvent(event);
 };
 
-export const previous = Store => {
-    const { activeIndex, items } = Store.getState();
-    change(Store, (activeIndex === 0 ? items.length - 1 : activeIndex - 1));
+export const previous = store => {
+    const { activeIndex, items } = store.getState();
+    change(store, (activeIndex === 0 ? items.length - 1 : activeIndex - 1));
 };
 
-export const next = Store => {
-    const { activeIndex, items } = Store.getState();
-    change(Store, (activeIndex === items.length - 1 ? 0 : activeIndex + 1));
+export const next = store => {
+    const { activeIndex, items } = store.getState();
+    change(store, (activeIndex === items.length - 1 ? 0 : activeIndex + 1));
 };
 
-export const goTo = Store => i => {
-    loadItems(Store)(i);
-    change(Store, i);
-    broadcast(Store, EVENTS.TRIGGERED);
+export const goTo = store => i => {
+    change(store, i);
+    broadcast(store, EVENTS.TRIGGERED);
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index 4e72276e..fe8feac8 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -10,7 +10,7 @@ import { composeItems, composeDOM, getIndexFromURL, popstateHandler } from './ut
  * @returns Object, Gallery API: getState, initialise (for deferred or manual initialisation), gotTo, toggleFullScreen
  */
 export default (node, settings, index) => {
-    const Store = createStore();
+    const store = createStore();
 
     const items = [].slice.call(node.querySelectorAll(settings.selector.item));
     if (items.length === 0) return console.warn('Gallery cannot be initialised, no items found'), null;
@@ -18,7 +18,7 @@ export default (node, settings, index) => {
     const name = `${settings.name || node.getAttribute('id') || 'gallery'}-${index + 1}`;
     const [ startIndex, setfromURL = false ] = getIndexFromURL(name, items, location.hash, settings.startIndex);
 
-    Store.dispatch({
+    store.update({
         node,
         name,
         settings,
@@ -26,15 +26,15 @@ export default (node, settings, index) => {
         dom: composeDOM(node, settings),
         activeIndex: startIndex
     }, [
-        () => !settings.manualInitialisation && init(Store)(),
-        () => window.addEventListener('popstate', popstateHandler(Store)),
-        () => setfromURL && broadcast(Store, EVENTS.TRIGGERED)(Store.getState())
+        () => !settings.manualInitialisation && init(store)(),
+        () => window.addEventListener('popstate', popstateHandler(store)),
+        () => setfromURL && broadcast(store, EVENTS.TRIGGERED)(store.getState())
     ]);
 
     return {
-        getState: Store.getState,
-        initialise: init(Store),
-        goTo: goTo(Store),
-        toggleFullScreen: toggleFullScreen.bind(null, Store)
+        getState: store.getState,
+        initialise: init(store),
+        goTo: goTo(store),
+        toggleFullScreen: toggleFullScreen.bind(null, store)
     };
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/loaders.js b/packages/gallery/src/lib/loaders.js
deleted file mode 100644
index f7b31b9b..00000000
--- a/packages/gallery/src/lib/loaders.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ATTRIBUTE } from './constants';
-
-const createPicture = item => {
-    const picture = document.createElement('picture');
-    for (let i in item.sources){
-        const source = document.createElement('source');
-        if (item.sources[i].srcset) source.setAttribute('srcset', item.sources[i].srcset);
-        if (item.sources[i].media) source.setAttribute('media', item.sources[i].media);
-        if (item.sources[i].type) source.setAttribute('type', item.sources[i].type);
-        picture.insertBefore(source, picture.firstElementChild);
-    }
-    return picture;
-};
-
-/*
- * Returns an array of Promises
- *
- * 
- * @param i, Number, index of item
- */
-export const loadImage = Store => (item, i) => new Promise((resolve, reject) => {
-    const { items, settings } = Store.getState();
-
-    // We're here because the library does not think that the item is loaded
-    // because the item does not have the ATTRIBUTE.LOADED attribute,
-    // and the imgNode src does not match the item ATTRIBUTE.SRC
-    // therefore we can assume that any img (or SVG) present is a loading state and should be removed when the 
-    const loadingIndicator = item.imgContainer.querySelector(`img, svg, ${settings.selector.loader}`);
-    const img = new Image();
-    let picture = false;
-    try {
-        const loaded = () => {
-            item.loaded = true;
-            item.node.classList.remove(settings.className.loading);
-            item.node.setAttribute(ATTRIBUTE.LOADED, true);
-            item.img = img;
-            Store.dispatch({ items: items.map((_item, idx) => i === idx ? item : _item ) });
-            resolve(img);
-        };
-        img.onload = loaded;
-        if (item.srcset) img.setAttribute('srcset', item.srcset);
-        if (item.src) img.setAttribute('src', item.src);
-        if (item.sizes) img.setAttribute('sizes', item.sizes);
-        //assume picture tag is not present and we need to create it if there are item.sources
-        if (item.sources && item.sources.length > 0) picture = createPicture(item);
-        if (img.complete) loaded();
-        if (loadingIndicator) loadingIndicator.parentNode.removeChild(loadingIndicator);
-        if (picture) {
-            picture.appendChild(img);
-            item.imgContainer.appendChild(picture);
-        } else item.imgContainer.appendChild(img);
-
-    } catch (e) {
-        console.warn('Gallery cannot load image', e);
-        reject(img);
-    };
-});
-
-export const loadYT = Store => (item, i) => new Promise((resolve, reject) => {
-    const { items, settings } = Store.getState();
-    
-    const loadingIndicator = item.imgContainer.querySelector(`img, svg, ${settings.selector.loader}`);
-    const video = document.createElement('iframe');
-    const videoSrc = item.src;
-
-    video.setAttribute('class','data-yt-iframe');
-    video.setAttribute('allowfullscreen','');
-    video.setAttribute('frameborder','0');
-    video.setAttribute('src','https://www.youtube.com/embed/'+ videoSrc +'?rel=0&showinfo=0&autoplay=0&enablejsapi=1');
-    
-    item.loaded = true;
-    item.node.classList.remove(settings.className.loading);
-    item.node.setAttribute(ATTRIBUTE.LOADED, true);
-    Store.dispatch({ items: items.map((_item, idx) => i === idx ? item : _item ) });
-    if (loadingIndicator) loadingIndicator.parentNode.removeChild(loadingIndicator);
-    item.imgContainer.appendChild(video);
-
-    resolve(item);
-});
-
-export default {
-    image: loadImage,
-    youtube: loadYT
-};
\ No newline at end of file
diff --git a/packages/gallery/src/lib/store.js b/packages/gallery/src/lib/store.js
index a77d5d19..b0a62a25 100644
--- a/packages/gallery/src/lib/store.js
+++ b/packages/gallery/src/lib/store.js
@@ -1,25 +1,13 @@
 export const createStore = () => {
-    //shared centralised validator state
     let state = {};
-
-    //state getter
+    
     const getState = () => state;
 
-    /**
-     * Create next state by invoking reducer on current state
-     * 
-     * Execute side effects of state update, as passed in the update
-     * 
-     * @param type [String] 
-     * @param nextState [Object] New slice of state to combine with current state to create next state
-     * @param effects [Array] Array of side effect functions to invoke after state update (DOM, operations, cmds...)
-     */
-    const dispatch = (nextState, effects) => {
-        state = nextState ? ({ ...state, ...nextState }) : state;
-        
+    const update = (nextState, effects) => {
+        state = nextState ?? state;
         if (!effects) return;
         effects.forEach(effect => effect(state));
     };
-
-    return { dispatch, getState };
+    
+    return { update, getState };
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 02c1d0df..d76e300a 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -1,41 +1,8 @@
-import { ATTRIBUTE } from './constants';
 import { change } from './dom';
 
 export const sanitise = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
-export const composeItems = (nodes, settings) => nodes.map(node => {
-    const sourcesValue = node.getAttribute(ATTRIBUTE.SOURCES);
-    let sources = false;
-    if (sourcesValue) {
-        try {
-            sources = JSON.parse(sourcesValue);
-        } catch (e) {
-            console.warn('Gallery cannot parse sources', e);
-        }
-    }
-    let item = {
-        node,
-        sources,
-        srcset: node.getAttribute(ATTRIBUTE.SRCSET),
-        sizes: node.getAttribute(ATTRIBUTE.SIZES),
-        src: node.getAttribute(ATTRIBUTE.SRC),
-        alt: node.getAttribute(ATTRIBUTE.ALT),
-        mediaType: node.getAttribute(ATTRIBUTE.MEDIA_TYPE)
-    };
-    //must contain an img container element
-    const imgContainer = node.querySelector(settings.selector.imgContainer);
-    if (!imgContainer) return console.warn(`Gallery cannot find image container ${settings.selector.imgContainer}`), item;
-    const imgNode = imgContainer.querySelector('img');
-
-    item = {
-        ...item,
-        imgContainer,
-        loaded: node.hasAttribute(ATTRIBUTE.LOADED) || (imgNode && imgNode.getAttribute('src') === node.getAttribute(ATTRIBUTE.SRC))
-    };
-    if (!item.sources && !item.srcset && !item.src && !item.loaded) return void console.warn('Gallery cannot be initialised, no image sources found'), item;
-
-    return item;
-});
+export const composeItems = (nodes, settings) => nodes.map(node => ({ node }));
 
 export const composeDOM = (node, settings) => ({
     liveRegion: node.querySelector(settings.selector.liveRegion),
@@ -55,11 +22,19 @@ export const getIndexFromURL = (name, items, url, fallback = false) => {
     return [ index, true ];
 };
 
-export const popstateHandler = Store => e => {
+export const popstateHandler = store => e => {
     if (!e.state) return;
     const url = e.state.URL;
-    const { name, items } = Store.getState();
+    const { name, items } = store.getState();
     const [ index ] = getIndexFromURL(name, items, url);
     if (index === false) return;
-    change(Store, index);
+    change(store, index);
+};
+
+export const getSelection = selector => {
+    if (typeof selector === 'string') return [].slice.call(document.querySelectorAll(selector));
+    if (selector instanceof Array) return selector;
+    if (Object.prototype.isPrototypeOf.call(NodeList.prototype, selector)) return [].slice.call(selector);
+    if (selector instanceof HTMLElement) return [selector];
+    return [];
 };
\ No newline at end of file

From d085b187d3752481ef4083bb5c49ca1b90f8b25c Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Fri, 14 Mar 2025 16:54:02 +0000
Subject: [PATCH 29/49] Add playwright axe test

---
 .../__tests__/{ => jest}/announcements.js     |   2 +-
 packages/gallery/__tests__/{ => jest}/api.js  |   4 +-
 .../gallery/__tests__/{ => jest}/fromURL.js   |   2 +-
 .../{ => jest}/initialisation/index.js        |   2 +-
 .../{ => jest}/initialisation/manual.js       |   4 +-
 .../{ => jest}/initialisation/multiple.js     |   2 +-
 .../__tests__/{ => jest}/interactions.js      |   2 +-
 .../gallery/__tests__/{ => jest}/popstate.js  |   2 +-
 .../gallery/__tests__/{ => jest}/store.js     |   2 +-
 .../gallery/__tests__/{ => jest}/updateURL.js |   2 +-
 .../gallery/__tests__/{ => jest}/utils.js     |  43 ++-
 .../__tests__/playwright/playwright.spec.js   |  14 +
 packages/gallery/example/src/index.html       | 276 +++++++++---------
 packages/gallery/package.json                 |   2 +-
 packages/gallery/playwright.config.js         |  16 +
 packages/gallery/src/lib/dom.js               |   6 +-
 .../tools/playwright.webpack.config.js        |   8 +
 packages/gallery/tools/webpack.config.js      |  45 +++
 18 files changed, 275 insertions(+), 159 deletions(-)
 rename packages/gallery/__tests__/{ => jest}/announcements.js (99%)
 rename packages/gallery/__tests__/{ => jest}/api.js (99%)
 rename packages/gallery/__tests__/{ => jest}/fromURL.js (97%)
 rename packages/gallery/__tests__/{ => jest}/initialisation/index.js (99%)
 rename packages/gallery/__tests__/{ => jest}/initialisation/manual.js (98%)
 rename packages/gallery/__tests__/{ => jest}/initialisation/multiple.js (98%)
 rename packages/gallery/__tests__/{ => jest}/interactions.js (98%)
 rename packages/gallery/__tests__/{ => jest}/popstate.js (97%)
 rename packages/gallery/__tests__/{ => jest}/store.js (96%)
 rename packages/gallery/__tests__/{ => jest}/updateURL.js (97%)
 rename packages/gallery/__tests__/{ => jest}/utils.js (65%)
 create mode 100644 packages/gallery/__tests__/playwright/playwright.spec.js
 create mode 100644 packages/gallery/playwright.config.js
 create mode 100644 packages/gallery/tools/playwright.webpack.config.js
 create mode 100644 packages/gallery/tools/webpack.config.js

diff --git a/packages/gallery/__tests__/announcements.js b/packages/gallery/__tests__/jest/announcements.js
similarity index 99%
rename from packages/gallery/__tests__/announcements.js
rename to packages/gallery/__tests__/jest/announcements.js
index f45fec7c..664549ba 100644
--- a/packages/gallery/__tests__/announcements.js
+++ b/packages/gallery/__tests__/jest/announcements.js
@@ -1,4 +1,4 @@
-import gallery from '../src';
+import gallery from '../../src';
 
 describe('Gallery > announcements', () => {
     
diff --git a/packages/gallery/__tests__/api.js b/packages/gallery/__tests__/jest/api.js
similarity index 99%
rename from packages/gallery/__tests__/api.js
rename to packages/gallery/__tests__/jest/api.js
index 540913bb..8d92294d 100644
--- a/packages/gallery/__tests__/api.js
+++ b/packages/gallery/__tests__/jest/api.js
@@ -1,5 +1,5 @@
-import gallery from '../src';
-import defaults from '../src/lib/defaults';
+import gallery from '../../src';
+import defaults from '../../src/lib/defaults';
 
 let instance;
 
diff --git a/packages/gallery/__tests__/fromURL.js b/packages/gallery/__tests__/jest/fromURL.js
similarity index 97%
rename from packages/gallery/__tests__/fromURL.js
rename to packages/gallery/__tests__/jest/fromURL.js
index c98dac72..2fddf385 100644
--- a/packages/gallery/__tests__/fromURL.js
+++ b/packages/gallery/__tests__/jest/fromURL.js
@@ -1,4 +1,4 @@
-import gallery from '../src';
+import gallery from '../../src';
 
 let instance;
 
diff --git a/packages/gallery/__tests__/initialisation/index.js b/packages/gallery/__tests__/jest/initialisation/index.js
similarity index 99%
rename from packages/gallery/__tests__/initialisation/index.js
rename to packages/gallery/__tests__/jest/initialisation/index.js
index b472cdc9..d4bf1e5f 100644
--- a/packages/gallery/__tests__/initialisation/index.js
+++ b/packages/gallery/__tests__/jest/initialisation/index.js
@@ -1,4 +1,4 @@
-import gallery from '../../src';
+import gallery from '../../../src';
 
 describe('Gallery > initialisation', () => {
 
diff --git a/packages/gallery/__tests__/initialisation/manual.js b/packages/gallery/__tests__/jest/initialisation/manual.js
similarity index 98%
rename from packages/gallery/__tests__/initialisation/manual.js
rename to packages/gallery/__tests__/jest/initialisation/manual.js
index fa48b64f..05bf2980 100644
--- a/packages/gallery/__tests__/initialisation/manual.js
+++ b/packages/gallery/__tests__/jest/initialisation/manual.js
@@ -1,5 +1,5 @@
-import gallery from '../../src';
-import defaults from '../../src/lib/defaults';
+import gallery from '../../../src';
+import defaults from '../../../src/lib/defaults';
 
 describe('Gallery > initialisation > manual initialisation', () => {
     //mock image complete because JSDom cannot load images
diff --git a/packages/gallery/__tests__/initialisation/multiple.js b/packages/gallery/__tests__/jest/initialisation/multiple.js
similarity index 98%
rename from packages/gallery/__tests__/initialisation/multiple.js
rename to packages/gallery/__tests__/jest/initialisation/multiple.js
index 977ab07d..dacdca00 100644
--- a/packages/gallery/__tests__/initialisation/multiple.js
+++ b/packages/gallery/__tests__/jest/initialisation/multiple.js
@@ -1,4 +1,4 @@
-import gallery from '../../src';
+import gallery from '../../../src';
 
 describe('Gallery > initialisation > multiple', () => {
 
diff --git a/packages/gallery/__tests__/interactions.js b/packages/gallery/__tests__/jest/interactions.js
similarity index 98%
rename from packages/gallery/__tests__/interactions.js
rename to packages/gallery/__tests__/jest/interactions.js
index a42ca10d..10072d66 100644
--- a/packages/gallery/__tests__/interactions.js
+++ b/packages/gallery/__tests__/jest/interactions.js
@@ -1,4 +1,4 @@
-import gallery from '../src';
+import gallery from '../../src';
 
 let instance;
 
diff --git a/packages/gallery/__tests__/popstate.js b/packages/gallery/__tests__/jest/popstate.js
similarity index 97%
rename from packages/gallery/__tests__/popstate.js
rename to packages/gallery/__tests__/jest/popstate.js
index 612e78d3..19b7170e 100644
--- a/packages/gallery/__tests__/popstate.js
+++ b/packages/gallery/__tests__/jest/popstate.js
@@ -1,4 +1,4 @@
-import gallery from '../src';
+import gallery from '../../src';
 
 let instance;
 
diff --git a/packages/gallery/__tests__/store.js b/packages/gallery/__tests__/jest/store.js
similarity index 96%
rename from packages/gallery/__tests__/store.js
rename to packages/gallery/__tests__/jest/store.js
index 4bd13136..9bad15ed 100644
--- a/packages/gallery/__tests__/store.js
+++ b/packages/gallery/__tests__/jest/store.js
@@ -1,4 +1,4 @@
-import { createStore } from '../src/lib/store';
+import { createStore } from '../../src/lib/store';
 
 describe(`Gallery > store`, () => {
 
diff --git a/packages/gallery/__tests__/updateURL.js b/packages/gallery/__tests__/jest/updateURL.js
similarity index 97%
rename from packages/gallery/__tests__/updateURL.js
rename to packages/gallery/__tests__/jest/updateURL.js
index 1ad1de05..bc8a5313 100644
--- a/packages/gallery/__tests__/updateURL.js
+++ b/packages/gallery/__tests__/jest/updateURL.js
@@ -1,4 +1,4 @@
-import gallery from '../src';
+import gallery from '../../src';
 
 let instance;
 
diff --git a/packages/gallery/__tests__/utils.js b/packages/gallery/__tests__/jest/utils.js
similarity index 65%
rename from packages/gallery/__tests__/utils.js
rename to packages/gallery/__tests__/jest/utils.js
index aa1bd74e..96d7b548 100644
--- a/packages/gallery/__tests__/utils.js
+++ b/packages/gallery/__tests__/jest/utils.js
@@ -1,4 +1,4 @@
-import { sanitise, getIndexFromURL } from '../src/lib/utils';
+import { sanitise, getIndexFromURL, getSelection } from '../../src/lib/utils';
 
 describe('Gallery > Utils > sanitize', () => {
 
@@ -20,9 +20,6 @@ describe('Gallery > Utils > sanitize', () => {
 
 });
 
-//composeItems
-
-//composeDOM
 describe('Gallery > getIndexFromURL', () => {
     //return fallback if url.split throws
     it('Should return fallback if url.split throws', () => {
@@ -62,4 +59,42 @@ describe('Gallery > getIndexFromURL', () => {
     });
 
 
+});
+
+
+describe('Gallery > Utils > Get Selection', () => {
+
+    const setupDOM = () => {
+        document.body.innerHTML = `<div class="js-gallery test"></div>`;
+    };
+
+    beforeAll(setupDOM);
+
+    it('should return an array when passed a DOM element', async () => {
+        const node = document.querySelector('.js-gallery');
+        const els = getSelection(node);
+        expect(els instanceof Array).toBe(true);
+        expect(els.length).toEqual(1);
+    });
+
+    it('should return an array when passed a NodeList element', async () => {
+        const node = document.querySelectorAll('.js-gallery');
+        const els = getSelection(node);
+        expect(els instanceof Array).toBe(true);
+        expect(els.length).toEqual(1);
+    });
+
+    it('should return an array when passed an array of DOM elements', async () => {
+        const node = document.querySelector('.js-gallery');
+        const els = getSelection([node]);
+        expect(els instanceof Array).toBe(true);
+        expect(els.length).toEqual(1);
+    });
+
+    it('should return an array when passed a string', async () => {
+        const els = getSelection('.js-gallery');
+        expect(els instanceof Array).toBe(true);
+        expect(els.length).toEqual(1);
+    });
+
 });
\ No newline at end of file
diff --git a/packages/gallery/__tests__/playwright/playwright.spec.js b/packages/gallery/__tests__/playwright/playwright.spec.js
new file mode 100644
index 00000000..bec81944
--- /dev/null
+++ b/packages/gallery/__tests__/playwright/playwright.spec.js
@@ -0,0 +1,14 @@
+const { test, expect } = require('@playwright/test');
+import AxeBuilder from '@axe-core/playwright';
+
+test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+});
+
+test.describe('Gallery > Axe', { tag: '@reduced' }, () => {
+    test('Should not have any automatically detectable accessibility issues', async ({ page }) => {
+        const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+        expect(accessibilityScanResults.violations).toEqual([]);
+    });
+});
+
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 034187f9..ad8f2cdf 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
   <head>
     <title>StormID</title>
     <style>
@@ -216,162 +216,164 @@
     </style>
   </head>
   <body>
-    <div class="gallery js-gallery" id="gallery">
-        <div class="gallery__header">
-            <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
-            <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
-                <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="33.547" height="33.281" viewBox="0 0 33.547 33.281">
-                    <g transform="translate(-1434 -40.572)">
-                        <path d="M7.334,13.243a.919.919,0,0,0,.007-1.294L3.073,7.667l9.847,0a.914.914,0,0,0,0-1.828l-9.847,0L7.348,1.557A.925.925,0,0,0,7.341.263.91.91,0,0,0,6.054.27L.26,6.106h0a1.026,1.026,0,0,0-.19.288A.872.872,0,0,0,0,6.746a.916.916,0,0,0,.26.64l5.794,5.836A.9.9,0,0,0,7.334,13.243Z" transform="translate(1467.547 50.119) rotate(135)" fill="#fff"/>
-                        <path d="M7.334,13.243a.919.919,0,0,0,.007-1.294L3.073,7.667l9.847,0a.914.914,0,0,0,0-1.828l-9.847,0L7.348,1.557A.925.925,0,0,0,7.341.263.91.91,0,0,0,6.054.27L.26,6.106h0a1.026,1.026,0,0,0-.19.288A.872.872,0,0,0,0,6.746a.916.916,0,0,0,.26.64l5.794,5.836A.9.9,0,0,0,7.334,13.243Z" transform="translate(1434 64.307) rotate(-45)" fill="#fff"/>
-                    </g>
-                </svg>
-            </button>
-        </div>
-        <div class="gallery__main">
-            <ul class="gallery__list">
+    <main>
+        <h1>Gallery example</h1>
+        <div class="gallery js-gallery" id="gallery">
+            <div class="gallery__header">
+                <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
+                <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                    <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="33.547" height="33.281" viewBox="0 0 33.547 33.281">
+                        <g transform="translate(-1434 -40.572)">
+                            <path d="M7.334,13.243a.919.919,0,0,0,.007-1.294L3.073,7.667l9.847,0a.914.914,0,0,0,0-1.828l-9.847,0L7.348,1.557A.925.925,0,0,0,7.341.263.91.91,0,0,0,6.054.27L.26,6.106h0a1.026,1.026,0,0,0-.19.288A.872.872,0,0,0,0,6.746a.916.916,0,0,0,.26.64l5.794,5.836A.9.9,0,0,0,7.334,13.243Z" transform="translate(1467.547 50.119) rotate(135)" fill="#fff"/>
+                            <path d="M7.334,13.243a.919.919,0,0,0,.007-1.294L3.073,7.667l9.847,0a.914.914,0,0,0,0-1.828l-9.847,0L7.348,1.557A.925.925,0,0,0,7.341.263.91.91,0,0,0,6.054.27L.26,6.106h0a1.026,1.026,0,0,0-.19.288A.872.872,0,0,0,0,6.746a.916.916,0,0,0,.26.64l5.794,5.836A.9.9,0,0,0,7.334,13.243Z" transform="translate(1434 64.307) rotate(-45)" fill="#fff"/>
+                        </g>
+                    </svg>
+                </button>
+            </div>
+            <div class="gallery__main">
+                <ul class="gallery__list">
 
-                <!-- <li
-                    class="gallery__item"
-                    data-gallery-item
-                    data-gallery-item-src="_987Xgd443c"
-                    data-gallery-media-type="video"
-                >
-                    <div class="gallery__item-img-container" data-gallery-item-img-container>
-                        <div data-gallery-item-loader>Loading...</div>
-                    </div>
-                    <div class="gallery__item-footer">
-                        <div class="gallery__item-meta">
-                            <div class="gallery__item-description">
-                                <h2 class="gallery__item-artist">YouTube creator</h2>
-                                <div class="gallery__item-category">Video example</div>
-                                <div class="gallery__item-title">Example project name here</div>
+                    <!-- <li
+                        class="gallery__item"
+                        data-gallery-item
+                        data-gallery-item-src="_987Xgd443c"
+                        data-gallery-media-type="video"
+                    >
+                        <div class="gallery__item-img-container" data-gallery-item-img-container>
+                            <div data-gallery-item-loader>Loading...</div>
+                        </div>
+                        <div class="gallery__item-footer">
+                            <div class="gallery__item-meta">
+                                <div class="gallery__item-description">
+                                    <h2 class="gallery__item-artist">YouTube creator</h2>
+                                    <div class="gallery__item-category">Video example</div>
+                                    <div class="gallery__item-title">Example project name here</div>
+                                </div>
+                                <ul class="gallery__item-tags">
+                                    <li class="gallery__item-tag">Example tag</li>
+                                </ul>
                             </div>
-                            <ul class="gallery__item-tags">
-                                <li class="gallery__item-tag">Example tag</li>
-                            </ul>
                         </div>
-                    </div>
-                </li> -->
+                    </li> -->
 
-                <!-- <li
-                    class="gallery__item"
-                    data-gallery-item
-                    data-gallery-item-src="HC9kFY-upK0"
-                    data-gallery-media-type="video"
-                >
-                    <div class="gallery__item-img-container" data-gallery-item-img-container>
-                        <div data-gallery-item-loader>Loading...</div>
-                    </div>
-                    <div class="gallery__item-footer">
-                        <div class="gallery__item-meta">
-                            <div class="gallery__item-description">
-                                <h2 class="gallery__item-artist">YouTube creator</h2>
-                                <div class="gallery__item-category">Video example</div>
-                                <div class="gallery__item-title">Example project name here</div>
+                    <!-- <li
+                        class="gallery__item"
+                        data-gallery-item
+                        data-gallery-item-src="HC9kFY-upK0"
+                        data-gallery-media-type="video"
+                    >
+                        <div class="gallery__item-img-container" data-gallery-item-img-container>
+                            <div data-gallery-item-loader>Loading...</div>
+                        </div>
+                        <div class="gallery__item-footer">
+                            <div class="gallery__item-meta">
+                                <div class="gallery__item-description">
+                                    <h2 class="gallery__item-artist">YouTube creator</h2>
+                                    <div class="gallery__item-category">Video example</div>
+                                    <div class="gallery__item-title">Example project name here</div>
+                                </div>
+                                <ul class="gallery__item-tags">
+                                    <li class="gallery__item-tag">Example tag</li>
+                                </ul>
                             </div>
-                            <ul class="gallery__item-tags">
-                                <li class="gallery__item-tag">Example tag</li>
-                            </ul>
                         </div>
-                    </div>
-                </li> -->
+                    </li> -->
 
 
 
 
-                <li class="gallery__item" data-gallery-item>
-                    <div class="gallery__item-img-container">
-                        <picture>
-                            <source srcset="https://placehold.co/1600x1000.jpg" media="(min-width:1000px)">
-                            <source srcset="https://placehold.co/1000x600.png" media="(min-width:700px)">
-                            <source srcset="https://placehold.co/700x400.png" media="(min-width:400px)">
-                            <img loading="lazy" src="https://placehold.co/500x200.png">
-                        </picture>
-                    </div>
-                    <div class="gallery__item-footer">
-                        <div class="gallery__item-meta">
-                            <div class="gallery__item-description">
-                                <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                <div class="gallery__item-category">Architecture - March</div>
-                                <div class="gallery__item-title">Example project name here</div>
+                    <li class="gallery__item" data-gallery-item>
+                        <div class="gallery__item-img-container">
+                            <picture>
+                                <source srcset="https://placehold.co/1600x1000.jpg" media="(min-width:1000px)">
+                                <source srcset="https://placehold.co/1000x600.png" media="(min-width:700px)">
+                                <source srcset="https://placehold.co/700x400.png" media="(min-width:400px)">
+                                <img loading="lazy" src="https://placehold.co/500x200.png" alt="Test image">
+                            </picture>
+                        </div>
+                        <div class="gallery__item-footer">
+                            <div class="gallery__item-meta">
+                                <div class="gallery__item-description">
+                                    <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                    <div class="gallery__item-category">Architecture - March</div>
+                                    <div class="gallery__item-title">Example project name here</div>
+                                </div>
+                                <!-- <ul class="gallery__item-tags">
+                                    <li class="gallery__item-tag">Example tag</li>
+                                    <li class="gallery__item-tag">Example tag</li>
+                                </ul> -->
                             </div>
-                            <!-- <ul class="gallery__item-tags">
-                                <li class="gallery__item-tag">Example tag</li>
-                                <li class="gallery__item-tag">Example tag</li>
-                            </ul> -->
                         </div>
-                    </div>
-                </li>
-                <li class="gallery__item"  data-gallery-item>
-                    <div class="gallery__item-img-container">
-                        <!-- <div data-gallery-item-loader>Loading...</div> -->
-                        <picture><source srcset="https://placehold.co/1600x1400.jpg" media="(min-width:1100px)"><source srcset="https://placehold.co/1100x1000.png" media="(min-width:710px)"><source srcset="https://placehold.co/710x900.png" media="(min-width:400px)"><img loading="lazy" src="https://placehold.co/420x300.png"></picture>
-                    </div>
-                    <div class="gallery__item-footer">
-                        <div class="gallery__item-meta">
-                            <div class="gallery__item-description">
-                                <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                <div class="gallery__item-category">Architecture - April</div>
-                                <div class="gallery__item-title">Example project name here</div>
+                    </li>
+                    <li class="gallery__item"  data-gallery-item>
+                        <div class="gallery__item-img-container">
+                            <!-- <div data-gallery-item-loader>Loading...</div> -->
+                            <picture><source srcset="https://placehold.co/1600x1400.jpg" media="(min-width:1100px)"><source srcset="https://placehold.co/1100x1000.png" media="(min-width:710px)"><source srcset="https://placehold.co/710x900.png" media="(min-width:400px)"><img loading="lazy" src="https://placehold.co/420x300.png" alt="Test image"></picture>
+                        </div>
+                        <div class="gallery__item-footer">
+                            <div class="gallery__item-meta">
+                                <div class="gallery__item-description">
+                                    <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                    <div class="gallery__item-category">Architecture - April</div>
+                                    <div class="gallery__item-title">Example project name here</div>
+                                </div>
+                                <!-- <ul class="gallery__item-tags">
+                                    <li class="gallery__item-tag">Example tag</li>
+                                    <li class="gallery__item-tag">Example tag</li>
+                                </ul> -->
                             </div>
-                            <!-- <ul class="gallery__item-tags">
-                                <li class="gallery__item-tag">Example tag</li>
-                                <li class="gallery__item-tag">Example tag</li>
-                            </ul> -->
                         </div>
-                    </div>
-                </li>
-                <li class="gallery__item" data-gallery-item>
-                    <div class="gallery__item-img-container">
-                        <!-- <div data-gallery-item-loader>Loading...</div> -->
-                        <picture><source srcset="https://placehold.co/1630x1500.jpg" media="(min-width:1300px)"><source srcset="https://placehold.co/1300x1200.png" media="(min-width:730px)"><source srcset="https://placehold.co/730x300.png" media="(min-width:430px)"><img loading="lazy" src="https://placehold.co/430x300.png"></picture>
-                    </div>
-                    <div class="gallery__item-footer">
-                        <div class="gallery__item-meta">
-                            <div class="gallery__item-description">
-                                <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                <div class="gallery__item-category">Architecture - May</div>
-                                <div class="gallery__item-title">Example project name here</div>
+                    </li>
+                    <li class="gallery__item" data-gallery-item>
+                        <div class="gallery__item-img-container">
+                            <!-- <div data-gallery-item-loader>Loading...</div> -->
+                            <picture><source srcset="https://placehold.co/1630x1500.jpg" media="(min-width:1300px)"><source srcset="https://placehold.co/1300x1200.png" media="(min-width:730px)"><source srcset="https://placehold.co/730x300.png" media="(min-width:430px)"><img loading="lazy" src="https://placehold.co/430x300.png" alt="Test image"></picture>
+                        </div>
+                        <div class="gallery__item-footer">
+                            <div class="gallery__item-meta">
+                                <div class="gallery__item-description">
+                                    <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                    <div class="gallery__item-category">Architecture - May</div>
+                                    <div class="gallery__item-title">Example project name here</div>
+                                </div>
+                                <!-- <ul class="gallery__item-tags">
+                                    <li class="gallery__item-tag">Example tag</li>
+                                    <li class="gallery__item-tag">Example tag</li>
+                                </ul> -->
                             </div>
-                            <!-- <ul class="gallery__item-tags">
-                                <li class="gallery__item-tag">Example tag</li>
-                                <li class="gallery__item-tag">Example tag</li>
-                            </ul> -->
                         </div>
-                    </div>
-                </li>
-                <li class="gallery__item" data-gallery-item>
-                    <div class="gallery__item-img-container">
-                        <!-- <div data-gallery-item-loader>Loading...</div> -->
-                        <picture><source srcset="https://placehold.co/1640x2400.jpg" media="(min-width:1400px)"><source srcset="https://placehold.co/1400x2200.png" media="(min-width:740px)"><source srcset="https://placehold.co/740x1200.png" media="(min-width:440px)"><img loading="lazy" src="https://placehold.co/430x300.png"></picture>
-                    </div>
-                    <div class="gallery__item-footer">
-                        <div class="gallery__item-meta">
-                            <div class="gallery__item-description">
-                                <h2 class="gallery__item-artist">Kate Murphy</h2>
-                                <div class="gallery__item-category">Architecture - June</div>
-                                <div class="gallery__item-title">Example project name here</div>
+                    </li>
+                    <li class="gallery__item" data-gallery-item>
+                        <div class="gallery__item-img-container">
+                            <!-- <div data-gallery-item-loader>Loading...</div> -->
+                            <picture><source srcset="https://placehold.co/1640x2400.jpg" media="(min-width:1400px)"><source srcset="https://placehold.co/1400x2200.png" media="(min-width:740px)"><source srcset="https://placehold.co/740x1200.png" media="(min-width:440px)"><img loading="lazy" src="https://placehold.co/430x300.png" alt="Test image"></picture>
+                        </div>
+                        <div class="gallery__item-footer">
+                            <div class="gallery__item-meta">
+                                <div class="gallery__item-description">
+                                    <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                    <div class="gallery__item-category">Architecture - June</div>
+                                    <div class="gallery__item-title">Example project name here</div>
+                                </div>
+                                <!-- <ul class="gallery__item-tags">
+                                    <li class="gallery__item-tag">Example tag</li>
+                                    <li class="gallery__item-tag">Example tag</li>
+                                </ul> -->
                             </div>
-                            <!-- <ul class="gallery__item-tags">
-                                <li class="gallery__item-tag">Example tag</li>
-                                <li class="gallery__item-tag">Example tag</li>
-                            </ul> -->
                         </div>
-                    </div>
-                </li>
+                    </li>
 
 
-            </ul>
-            
-            <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
-                <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
-            </button>
-            <button class="gallery__next" aria-label="Next image" data-gallery-next>
-                <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
-            </button>
+                </ul>
+                
+                <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                    <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                </button>
+                <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                    <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                </button>
+            </div>
         </div>
-    </div>
-    <div style="height:1000px"></div>
+    </main>
   </body>
 </html>
diff --git a/packages/gallery/package.json b/packages/gallery/package.json
index 86962219..0456e64d 100644
--- a/packages/gallery/package.json
+++ b/packages/gallery/package.json
@@ -22,7 +22,7 @@
   ],
   "scripts": {
     "build": "npx microbundle --name Gallery",
-    "test": "jest --coverage --passWithNoTests",
+    "test": "jest --coverage & npx playwright test",
     "dev": "webpack-dev-server --config example/webpack.config.js --mode development",
     "prod": "webpack --config example/webpack.config.js --mode production",
     "prepublish": "npm run -s build"
diff --git a/packages/gallery/playwright.config.js b/packages/gallery/playwright.config.js
new file mode 100644
index 00000000..b9c22fb4
--- /dev/null
+++ b/packages/gallery/playwright.config.js
@@ -0,0 +1,16 @@
+
+const { defineConfig } = require('@playwright/test');
+const baseConfig = require('../../tools/playwright/config.base.js');
+const server = require('./tools/playwright.webpack.config.js');
+
+module.exports = defineConfig({
+    ...baseConfig,
+    use: {
+        ...baseConfig.use,
+        baseURL: `http://127.0.0.1:${server.devServer.port}/`,
+    },
+    webServer: {
+        ...baseConfig.webServer,
+        url: `http://127.0.0.1:${server.devServer.port}/`,
+    },
+});
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index de15041a..4ab5b137 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -3,15 +3,12 @@ import { ATTRIBUTE, EVENTS } from './constants';
 
 
 /*
- * Returns a Promise wrapping the loading image Promises using Promise.all
- *
- * @param i, Number, index of item
+ * @param store, Object, store instance
  */
 export const init = store => () => {
     const state = store.getState();
     const { settings, items, dom, activeIndex } = state;
 
-    //initialise buttons
     if (!dom.liveRegion) console.warn(`A live region announcing current and total items is recommended for screen readers.`);
     else writeLiveRegion(state);
     if (dom.fullscreen) {
@@ -29,7 +26,6 @@ export const init = store => () => {
         }));
     }
     
-    //set initial DOM state
     items.forEach((item, i) => {
         if (!item.node.hasAttribute('tabindex')) item.node.setAttribute('tabindex', 0);
         if (i === activeIndex) {
diff --git a/packages/gallery/tools/playwright.webpack.config.js b/packages/gallery/tools/playwright.webpack.config.js
new file mode 100644
index 00000000..c3d55188
--- /dev/null
+++ b/packages/gallery/tools/playwright.webpack.config.js
@@ -0,0 +1,8 @@
+const baseConfig = require('./webpack.config');
+
+module.exports = {
+    ...baseConfig,
+    devServer: {
+        port: 8081
+    }
+};
diff --git a/packages/gallery/tools/webpack.config.js b/packages/gallery/tools/webpack.config.js
new file mode 100644
index 00000000..e04f3969
--- /dev/null
+++ b/packages/gallery/tools/webpack.config.js
@@ -0,0 +1,45 @@
+const path = require('path');
+const webpack = require('webpack');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const pkg = require('../package.json');
+
+module.exports = {
+    entry: './example/src/js/index.js',
+    output: {
+        filename: 'app.js',
+        path: path.resolve(__dirname, '../build')
+    },
+    mode: 'development',
+    devtool: 'source-map',
+    devServer: {
+        port: 8081
+    },
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new CleanWebpackPlugin(['../build']),
+        new HtmlWebpackPlugin({
+            title: pkg.name,
+            template: './example/src/index.html',
+            filename: 'index.html'
+        })
+    ],
+    module: {
+        rules: [{
+            test: /\.js$/,
+            exclude: /(node_modules|bower_components)/,
+            use: {
+                loader: 'babel-loader',
+                options: {
+                    rootMode: 'upward',
+                }
+            }
+        },
+        {
+            test: /\.(ico)$/,
+            use: {
+                loader: 'file-loader'
+            }
+        }]
+    }
+};

From feb613d0f0d08c61b35e66ae1f913c1da027fb7f Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Fri, 14 Mar 2025 17:20:56 +0000
Subject: [PATCH 30/49] Docs, housekeeping

---
 packages/gallery/README.md           | 151 +++++++++++++++++++++++++++
 packages/gallery/src/lib/defaults.js |   2 -
 2 files changed, 151 insertions(+), 2 deletions(-)

diff --git a/packages/gallery/README.md b/packages/gallery/README.md
index f4f2bd2a..12dafead 100644
--- a/packages/gallery/README.md
+++ b/packages/gallery/README.md
@@ -1,23 +1,174 @@
 # Gallery
 
+Accessible media gallery that can be used inline or in a modal.
 
 ---
 
 ## Usage
 
+Create the gallery in HTML.
+
+There must be an live region with a `data-gallery-live-region` attribute (an element with `aria-live="polite" aria-atomic="true"` for example) for the accessible announcenments.
+
+Each of the gallery items should have a `data-gallery-item` attribute. For navigation, `data-gallery-previous` and `data-gallery-next` attributes on buttons.
+
+Optionally, a button with `data-gallery-fullscreen` attribute if supporting fullscreen functionality.
+
+```
+<div class="gallery js-gallery" id="gallery">
+    <div class="gallery__header">
+        <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
+        <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+            <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="33.547" height="33.281" viewBox="0 0 33.547 33.281">
+                <g transform="translate(-1434 -40.572)">
+                    <path d="M7.334,13.243a.919.919,0,0,0,.007-1.294L3.073,7.667l9.847,0a.914.914,0,0,0,0-1.828l-9.847,0L7.348,1.557A.925.925,0,0,0,7.341.263.91.91,0,0,0,6.054.27L.26,6.106h0a1.026,1.026,0,0,0-.19.288A.872.872,0,0,0,0,6.746a.916.916,0,0,0,.26.64l5.794,5.836A.9.9,0,0,0,7.334,13.243Z" transform="translate(1467.547 50.119) rotate(135)" fill="#fff"/>
+                    <path d="M7.334,13.243a.919.919,0,0,0,.007-1.294L3.073,7.667l9.847,0a.914.914,0,0,0,0-1.828l-9.847,0L7.348,1.557A.925.925,0,0,0,7.341.263.91.91,0,0,0,6.054.27L.26,6.106h0a1.026,1.026,0,0,0-.19.288A.872.872,0,0,0,0,6.746a.916.916,0,0,0,.26.64l5.794,5.836A.9.9,0,0,0,7.334,13.243Z" transform="translate(1434 64.307) rotate(-45)" fill="#fff"/>
+                </g>
+            </svg>
+        </button>
+    </div>
+    <div class="gallery__main">
+        <ul class="gallery__list">
+            <li class="gallery__item" data-gallery-item>
+                <div class="gallery__item-img-container">
+                    <picture>
+                        <source srcset="https://placehold.co/1600x1000.jpg" media="(min-width:1000px)">
+                        <source srcset="https://placehold.co/1000x600.png" media="(min-width:700px)">
+                        <source srcset="https://placehold.co/700x400.png" media="(min-width:400px)">
+                        <img loading="lazy" src="https://placehold.co/500x200.png" alt="Test image">
+                    </picture>
+                </div>
+                <div class="gallery__item-footer">
+                    <div class="gallery__item-meta">
+                        <div class="gallery__item-description">
+                            <h2 class="gallery__item-artist">Kate Murphy</h2>
+                            <div class="gallery__item-category">Architecture - March</div>
+                            <div class="gallery__item-title">Example project name here</div>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li class="gallery__item" data-gallery-item>
+                <div class="gallery__item-img-container">
+                    <picture>
+                        <source srcset="https://placehold.co/1600x1400.jpg" media="(min-width:1100px)">
+                        <source srcset="https://placehold.co/1100x1000.png" media="(min-width:710px)">
+                        <source srcset="https://placehold.co/710x900.png" media="(min-width:400px)">
+                        <img loading="lazy" src="https://placehold.co/420x300.png" alt="Test image">
+                    </picture>
+                </div>
+                <div class="gallery__item-footer">
+                    <div class="gallery__item-meta">
+                        <div class="gallery__item-description">
+                            <h2 class="gallery__item-artist">Kate Murphy</h2>
+                            <div class="gallery__item-category">Architecture - April</div>
+                            <div class="gallery__item-title">Example project name here</div>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li class="gallery__item" data-gallery-item>
+                <div class="gallery__item-img-container">
+                    <picture>
+                        <source srcset="https://placehold.co/1630x1500.jpg" media="(min-width:1300px)">
+                        <source srcset="https://placehold.co/1300x1200.png" media="(min-width:730px)">
+                        <source srcset="https://placehold.co/730x300.png" media="(min-width:430px)">
+                        <img loading="lazy" src="https://placehold.co/430x300.png" alt="Test image">
+                    </picture>
+                </div>
+                <div class="gallery__item-footer">
+                    <div class="gallery__item-meta">
+                        <div class="gallery__item-description">
+                            <h2 class="gallery__item-artist">Kate Murphy</h2>
+                            <div class="gallery__item-category">Architecture - May</div>
+                            <div class="gallery__item-title">Example project name here</div>
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li class="gallery__item" data-gallery-item>
+                <div class="gallery__item-img-container">
+                    <picture>
+                        <source srcset="https://placehold.co/1640x2400.jpg" media="(min-width:1400px)">
+                        <source srcset="https://placehold.co/1400x2200.png" media="(min-width:740px)">
+                        <source srcset="https://placehold.co/740x1200.png" media="(min-width:440px)">
+                        <img loading="lazy" src="https://placehold.co/430x300.png" alt="Test image">
+                    </picture>
+                </div>
+                <div class="gallery__item-footer">
+                    <div class="gallery__item-meta">
+                        <div class="gallery__item-description">
+                            <h2 class="gallery__item-artist">Kate Murphy</h2>
+                            <div class="gallery__item-category">Architecture - June</div>
+                            <div class="gallery__item-title">Example project name here</div>
+                        </div>
+                    </div>
+                </div>
+            </li>
+
+
+        </ul>
+        <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+            <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+        </button>
+        <button class="gallery__next" aria-label="Next image" data-gallery-next>
+            <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+        </button>
+    </div>
+</div>
+```
+
 Install the package
 ```
 npm i -S @stormid/gallery
 ```
 
+Initialise the gallery
+```
+import gallery from '@stormid/gallery';
+
+const [instance] = gallery('js-gallery);
+
 ## Options
 
 ```
 {
+    name: false, //for use when updating the page URL, if not set (false) it will get it from the id the container node, or just 'gallery'
+    startIndex: 0,
+    selector: { //selectors for the gallery elements
+        item: '[data-gallery-item]',
+        fullscreen: '[data-gallery-fullscreen]',
+        liveRegion: '[data-gallery-live-region]',
+        previous: '[data-gallery-previous]',
+        next: '[data-gallery-next]',
+        navigate: '[data-gallery-navigate]'
+    },
+    className: { // classNames used to style different gallery states
+        active: 'is--active',
+        fullscreen: 'is--fullscreen'
+    },
+    manualInitialisation: false, // to prevent automatic initialisation, so it can be initialised via the API
+    updateURL: true, //change URL when item changes
+    announcement(current, total){ //template for the accessible announcement
+        return `${current} of ${total}`;
+    }
 }
 ```
 
 ## API
+gallery() returns an array of instances. Each instance exposes the interface
+```
+{
+    getState //
+    initialise //
+    goTo //
+    toggleFullScreen //
+}
+```
+
+## Events
+There are X custom events that an instance of the gallery dispatches:
+- `gallery.XXX` when xxxxx
 
 
 ## Tests
diff --git a/packages/gallery/src/lib/defaults.js b/packages/gallery/src/lib/defaults.js
index af13a56e..695bfce2 100644
--- a/packages/gallery/src/lib/defaults.js
+++ b/packages/gallery/src/lib/defaults.js
@@ -2,8 +2,6 @@
 
 export default {
     name: false, //for setting the URL, if not set (false) it will get it from the id the container node, or just 'gallery'
-    preload: false,
-    totals: true,
     startIndex: 0,
     selector: {
         item: '[data-gallery-item]',

From d3d3f0d1730ca314f13f156a676725c4db11bcf2 Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Wed, 19 Mar 2025 14:39:24 +0000
Subject: [PATCH 31/49] Add events; housekeeping

---
 .azurite/__azurite_db_blob__.json             |  1 -
 .azurite/__azurite_db_blob_extent__.json      |  1 -
 packages/gallery/__tests__/jest/events.js     | 85 +++++++++++++++++++
 .../__tests__/jest/initialisation/index.js    |  2 +-
 packages/gallery/__tests__/jest/utils.js      | 10 +--
 packages/gallery/src/index.js                 |  2 +-
 packages/gallery/src/lib/constants.js         |  4 +-
 packages/gallery/src/lib/dom.js               |  3 +-
 packages/gallery/src/lib/factory.js           |  9 +-
 packages/gallery/src/lib/utils.js             | 12 +--
 10 files changed, 104 insertions(+), 25 deletions(-)
 delete mode 100644 .azurite/__azurite_db_blob__.json
 delete mode 100644 .azurite/__azurite_db_blob_extent__.json
 create mode 100644 packages/gallery/__tests__/jest/events.js

diff --git a/.azurite/__azurite_db_blob__.json b/.azurite/__azurite_db_blob__.json
deleted file mode 100644
index cc73052f..00000000
--- a/.azurite/__azurite_db_blob__.json
+++ /dev/null
@@ -1 +0,0 @@
-{"filename":"/Users/mick/Development/Open source/components/.azurite/__azurite_db_blob__.json","collections":[{"name":"$SERVICES_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{},"constraints":null,"uniqueNames":["accountName"],"transforms":{},"objType":"$SERVICES_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$CONTAINERS_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"accountName":{"name":"accountName","dirty":false,"values":[]},"name":{"name":"name","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$CONTAINERS_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$BLOBS_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"accountName":{"name":"accountName","dirty":false,"values":[]},"containerName":{"name":"containerName","dirty":false,"values":[]},"name":{"name":"name","dirty":false,"values":[]},"snapshot":{"name":"snapshot","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$BLOBS_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]},{"name":"$BLOCKS_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"accountName":{"name":"accountName","dirty":false,"values":[]},"containerName":{"name":"containerName","dirty":false,"values":[]},"blobName":{"name":"blobName","dirty":false,"values":[]},"name":{"name":"name","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$BLOCKS_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]}],"databaseVersion":1.5,"engineVersion":1.5,"autosave":true,"autosaveInterval":5000,"autosaveHandle":null,"throttledSaves":true,"options":{"persistenceMethod":"fs","autosave":true,"autosaveInterval":5000,"serializationMethod":"normal","destructureDelimiter":"$<\n"},"persistenceMethod":"fs","persistenceAdapter":null,"verbose":false,"events":{"init":[null],"loaded":[],"flushChanges":[],"close":[],"changes":[],"warning":[]},"ENV":"NODEJS"}
\ No newline at end of file
diff --git a/.azurite/__azurite_db_blob_extent__.json b/.azurite/__azurite_db_blob_extent__.json
deleted file mode 100644
index f4f40d61..00000000
--- a/.azurite/__azurite_db_blob_extent__.json
+++ /dev/null
@@ -1 +0,0 @@
-{"filename":"/Users/mick/Development/Open source/components/.azurite/__azurite_db_blob_extent__.json","collections":[{"name":"$EXTENTS_COLLECTION$","data":[],"idIndex":null,"binaryIndices":{"id":{"name":"id","dirty":false,"values":[]}},"constraints":null,"uniqueNames":[],"transforms":{},"objType":"$EXTENTS_COLLECTION$","dirty":false,"cachedIndex":null,"cachedBinaryIndex":null,"cachedData":null,"adaptiveBinaryIndices":true,"transactional":false,"cloneObjects":false,"cloneMethod":"parse-stringify","asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"autoupdate":false,"serializableIndices":true,"disableFreeze":true,"ttl":null,"maxId":0,"DynamicViews":[],"events":{"insert":[],"update":[],"pre-insert":[],"pre-update":[],"close":[],"flushbuffer":[],"error":[],"delete":[null],"warning":[null]},"changes":[],"dirtyIds":[]}],"databaseVersion":1.5,"engineVersion":1.5,"autosave":true,"autosaveInterval":5000,"autosaveHandle":null,"throttledSaves":true,"options":{"persistenceMethod":"fs","autosave":true,"autosaveInterval":5000,"serializationMethod":"normal","destructureDelimiter":"$<\n"},"persistenceMethod":"fs","persistenceAdapter":null,"verbose":false,"events":{"init":[null],"loaded":[],"flushChanges":[],"close":[],"changes":[],"warning":[]},"ENV":"NODEJS"}
\ No newline at end of file
diff --git a/packages/gallery/__tests__/jest/events.js b/packages/gallery/__tests__/jest/events.js
new file mode 100644
index 00000000..4e4e63c8
--- /dev/null
+++ b/packages/gallery/__tests__/jest/events.js
@@ -0,0 +1,85 @@
+import gallery from '../../src';
+import { EVENTS } from '../../src/lib/constants';
+
+describe('Gallery > Events', () => {
+
+
+    it('should dispatch an initialisation event when initialised', () => {
+        document.body.innerHTML = `<section class="gallery js-gallery" id="gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list">
+                        <li class="gallery__item is--active" data-gallery-item>
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li data-gallery-item>
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </section>`;
+        const node = document.querySelector('.js-gallery');
+        const initialisationHandler = jest.fn();
+        node.addEventListener(EVENTS.INITIALISED, initialisationHandler);
+        const [ instance ] = gallery('.js-gallery');
+        expect(initialisationHandler).toHaveBeenCalled();
+        
+        const changeHandler = jest.fn();
+        node.addEventListener(EVENTS.CHANGE, changeHandler);
+        instance.goTo(1);
+        expect(changeHandler).toHaveBeenCalled();
+    });
+
+});
\ No newline at end of file
diff --git a/packages/gallery/__tests__/jest/initialisation/index.js b/packages/gallery/__tests__/jest/initialisation/index.js
index d4bf1e5f..71feb262 100644
--- a/packages/gallery/__tests__/jest/initialisation/index.js
+++ b/packages/gallery/__tests__/jest/initialisation/index.js
@@ -6,7 +6,7 @@ describe('Gallery > initialisation', () => {
         document.body.innerHTML = ``;
         console.warn = jest.fn();
         gallery('.js-gallery');
-        expect(console.warn).toHaveBeenCalledWith('Gallery cannot be initialised, no galleries found');
+        expect(console.warn).toHaveBeenCalledWith("Gallery not initialised, no elements found for selector '.js-gallery'");
     });
 
     it('Should console.warn if no items are found', () => {
diff --git a/packages/gallery/__tests__/jest/utils.js b/packages/gallery/__tests__/jest/utils.js
index 96d7b548..e39d076d 100644
--- a/packages/gallery/__tests__/jest/utils.js
+++ b/packages/gallery/__tests__/jest/utils.js
@@ -25,21 +25,21 @@ describe('Gallery > getIndexFromURL', () => {
     it('Should return fallback if url.split throws', () => {
         const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const result = getIndexFromURL('test-name', [], '#');
-        expect(result).toEqual([false]);
+        expect(result).toEqual(0);
         warn.mockRestore();
     });
     
     it('Should return fallback if hash does not contain gallery name', () => {
         const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const result = getIndexFromURL('test-name', [], '#potato');
-        expect(result).toEqual([false]);
+        expect(result).toEqual(0);
         warn.mockRestore();
     });
     
     it('Should return fallback and console warn if hash does not contain a number', () => {
         const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const result = getIndexFromURL('test-name', [], '#test-name-potato');
-        expect(result).toEqual([false]);
+        expect(result).toEqual(0);
         expect(warn).toHaveBeenCalledWith('Gallery hash not valid');
         warn.mockRestore();
     });
@@ -47,7 +47,7 @@ describe('Gallery > getIndexFromURL', () => {
     it('Should return fallback and console warn if index is out of bounds', () => {
         const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
         const result = getIndexFromURL('test-name', [{}, {}], '#test-name-4');
-        expect(result).toEqual([false]);
+        expect(result).toEqual(0);
         expect(warn).toHaveBeenCalledWith('Gallery index out of bounds');
         warn.mockRestore();
     });
@@ -55,7 +55,7 @@ describe('Gallery > getIndexFromURL', () => {
     it('Should return index if one is found', () => {
         const result = getIndexFromURL('test-name', [{}, {}], '#test-name-1');
         //index is one less than the number in the hash
-        expect(result).toEqual([0, true]);
+        expect(result).toEqual(0);
     });
 
 
diff --git a/packages/gallery/src/index.js b/packages/gallery/src/index.js
index 720a860c..0a7dc233 100644
--- a/packages/gallery/src/index.js
+++ b/packages/gallery/src/index.js
@@ -4,7 +4,7 @@ import { getSelection } from './lib/utils';
 
 export default (selector, options) => {
     const galleries = getSelection(selector);
-    if (galleries.length === 0) return void console.warn('Gallery cannot be initialised, no galleries found');
+    if (galleries.length === 0) return void console.warn(`Gallery not initialised, no elements found for selector '${selector}'`);
     
     return galleries.map((gallery, index) => Object.create(factory(gallery, { ...defaults, ...options }, index)));
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/constants.js b/packages/gallery/src/lib/constants.js
index 0f0f3c52..678867e9 100644
--- a/packages/gallery/src/lib/constants.js
+++ b/packages/gallery/src/lib/constants.js
@@ -3,6 +3,6 @@ export const ATTRIBUTE = {
 };
 
 export const EVENTS = {
-    CHANGE: 'gallery.change',
-    TRIGGERED: 'gallery.triggered'
+    INITIALISED: 'gallery.initialised',
+    CHANGE: 'gallery.change'
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 4ab5b137..e933031c 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -36,7 +36,7 @@ export const init = store => () => {
             if (!item.node.hasAttribute('aria-hidden')) item.node.setAttribute('aria-hidden', 'true');
         }
     });
-    
+    broadcast(store, EVENTS.INITIALISED)(state);
 };
 
 const writeLiveRegion = ({ activeIndex, items, settings, dom }) => dom.liveRegion.innerHTML = sanitise(settings.announcement(activeIndex + 1, items.length));
@@ -101,5 +101,4 @@ export const next = store => {
 
 export const goTo = store => i => {
     change(store, i);
-    broadcast(store, EVENTS.TRIGGERED);
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index fe8feac8..2384a066 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -1,6 +1,5 @@
 import { createStore } from './store';
-import { EVENTS } from './constants';
-import { init, toggleFullScreen, goTo, broadcast } from './dom';
+import { init, toggleFullScreen, goTo } from './dom';
 import { composeItems, composeDOM, getIndexFromURL, popstateHandler } from './utils';
 
 /* 
@@ -16,7 +15,6 @@ export default (node, settings, index) => {
     if (items.length === 0) return console.warn('Gallery cannot be initialised, no items found'), null;
 
     const name = `${settings.name || node.getAttribute('id') || 'gallery'}-${index + 1}`;
-    const [ startIndex, setfromURL = false ] = getIndexFromURL(name, items, location.hash, settings.startIndex);
 
     store.update({
         node,
@@ -24,11 +22,10 @@ export default (node, settings, index) => {
         settings,
         items: composeItems(items, settings),
         dom: composeDOM(node, settings),
-        activeIndex: startIndex
+        activeIndex: getIndexFromURL(name, items, location.hash, settings.startIndex)
     }, [
         () => !settings.manualInitialisation && init(store)(),
-        () => window.addEventListener('popstate', popstateHandler(store)),
-        () => setfromURL && broadcast(store, EVENTS.TRIGGERED)(store.getState())
+        () => window.addEventListener('popstate', popstateHandler(store))
     ]);
 
     return {
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index d76e300a..9165be86 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -12,21 +12,21 @@ export const composeDOM = (node, settings) => ({
     triggers: [].slice.call(document.querySelectorAll(settings.selector.navigate))
 });
 
-export const getIndexFromURL = (name, items, url, fallback = false) => {
+export const getIndexFromURL = (name, items, url, fallback = 0) => {
     const hash = url.split(`#`)[1] || '';
-    if (hash.indexOf(`${name}-`) === -1) return [ fallback ];
+    if (hash.indexOf(`${name}-`) === -1) return fallback;
     const num = Number(hash.split(`${name}-`)[1]);
-    if (isNaN(num)) return console.warn('Gallery hash not valid'), [ fallback ];
+    if (isNaN(num)) return console.warn('Gallery hash not valid'), fallback;
     const index = num - 1;
-    if (index < 0 || index > (items.length - 1)) return console.warn('Gallery index out of bounds'), [ fallback ];
-    return [ index, true ];
+    if (index < 0 || index > (items.length - 1)) return console.warn('Gallery index out of bounds'), fallback;
+    return index;
 };
 
 export const popstateHandler = store => e => {
     if (!e.state) return;
     const url = e.state.URL;
     const { name, items } = store.getState();
-    const [ index ] = getIndexFromURL(name, items, url);
+    const index = getIndexFromURL(name, items, url);
     if (index === false) return;
     change(store, index);
 };

From d17d24f8bbc66de74b3b63696f0e9e86f11a3f30 Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Wed, 19 Mar 2025 18:49:34 +0000
Subject: [PATCH 32/49] Update window history functionality

---
 packages/gallery/README.md                    |  1 -
 .../gallery/__tests__/jest/announcements.js   |  2 +-
 packages/gallery/__tests__/jest/fromURL.js    |  2 +-
 .../jest/{popstate.js => hashchange.js}       | 14 ++---
 .../__tests__/jest/initialisation/manual.js   |  8 +--
 .../__tests__/jest/initialisation/multiple.js | 10 ++--
 packages/gallery/__tests__/jest/utils.js      | 42 +++++++--------
 .../__tests__/playwright/playwright.spec.js   | 19 +++++++
 packages/gallery/example/src/js/index.js      |  5 +-
 packages/gallery/src/lib/constants.js         |  6 +++
 packages/gallery/src/lib/defaults.js          |  1 -
 packages/gallery/src/lib/dom.js               | 51 +++++++++++--------
 packages/gallery/src/lib/factory.js           | 18 ++++---
 packages/gallery/src/lib/utils.js             | 26 ++++------
 14 files changed, 115 insertions(+), 90 deletions(-)
 rename packages/gallery/__tests__/jest/{popstate.js => hashchange.js} (91%)

diff --git a/packages/gallery/README.md b/packages/gallery/README.md
index 12dafead..803e8be2 100644
--- a/packages/gallery/README.md
+++ b/packages/gallery/README.md
@@ -133,7 +133,6 @@ const [instance] = gallery('js-gallery);
 
 ```
 {
-    name: false, //for use when updating the page URL, if not set (false) it will get it from the id the container node, or just 'gallery'
     startIndex: 0,
     selector: { //selectors for the gallery elements
         item: '[data-gallery-item]',
diff --git a/packages/gallery/__tests__/jest/announcements.js b/packages/gallery/__tests__/jest/announcements.js
index 664549ba..893effd5 100644
--- a/packages/gallery/__tests__/jest/announcements.js
+++ b/packages/gallery/__tests__/jest/announcements.js
@@ -198,7 +198,7 @@ describe('Gallery > announcements', () => {
     });
 
     it('Should render a custom announcement based on settings', () => {
-
+        document.location.hash = ''; //reset hash
         document.body.innerHTML = `<section class="gallery js-gallery" id="gallery-2">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
diff --git a/packages/gallery/__tests__/jest/fromURL.js b/packages/gallery/__tests__/jest/fromURL.js
index 2fddf385..b1992eee 100644
--- a/packages/gallery/__tests__/jest/fromURL.js
+++ b/packages/gallery/__tests__/jest/fromURL.js
@@ -110,7 +110,7 @@ beforeAll(() => {
 describe('Gallery > from URL', () => {
 
     it('Should set the initial activeIndex from the URL', () => {
-        window.location.href = `#'gallery-1-3`;
+        window.location.href = `#gallery-1-3`;
         [ instance ] = gallery('.js-gallery');
         expect(instance.getState().activeIndex).toBe(2);
     });
diff --git a/packages/gallery/__tests__/jest/popstate.js b/packages/gallery/__tests__/jest/hashchange.js
similarity index 91%
rename from packages/gallery/__tests__/jest/popstate.js
rename to packages/gallery/__tests__/jest/hashchange.js
index 19b7170e..b0134396 100644
--- a/packages/gallery/__tests__/jest/popstate.js
+++ b/packages/gallery/__tests__/jest/hashchange.js
@@ -108,24 +108,24 @@ beforeEach(() => {
     [ instance ] = gallery('.js-gallery', { updateURL: true });
 });
 
-describe('Gallery > popstate', () => {
+describe('Gallery > hashchange', () => {
 
 
-    it('Should not update the gallery on popstate if a new hash does not match the addressing spec', () => {
+    it('Should not update the gallery on hashchange if a new hash does not match the addressing spec', () => {
         expect(instance.getState().activeIndex).toBe(0);
-        window.dispatchEvent(new PopStateEvent('popstate', { state: { URL: '#test' } }));
+        window.dispatchEvent(new HashChangeEvent('hashchange', { newURL: '#test' }));
         expect(instance.getState().activeIndex).toBe(0);
     });
 
-    it('Should not update the gallery on popstate if the event has no state', () => {
+    it('Should not update the gallery on hashchange if the event has no state', () => {
         expect(instance.getState().activeIndex).toBe(0);
-        window.dispatchEvent(new PopStateEvent('popstate'));
+        window.dispatchEvent(new HashChangeEvent('hashchange'));
         expect(instance.getState().activeIndex).toBe(0);
     });
 
-    it('Should update the gallery on popstate if a new hash matches the addressing spec', () => {
+    it('Should update the gallery on hashchange if a new hash matches the addressing spec', () => {
         expect(instance.getState().activeIndex).toBe(0);
-        window.dispatchEvent(new PopStateEvent('popstate', { state: { URL: '#gallery-1-2' } }));
+        window.dispatchEvent(new HashChangeEvent('hashchange', { newURL: '#gallery-1-2' }));
         expect(instance.getState().activeIndex).toBe(1);
     });
 
diff --git a/packages/gallery/__tests__/jest/initialisation/manual.js b/packages/gallery/__tests__/jest/initialisation/manual.js
index 05bf2980..594f646d 100644
--- a/packages/gallery/__tests__/jest/initialisation/manual.js
+++ b/packages/gallery/__tests__/jest/initialisation/manual.js
@@ -88,12 +88,12 @@ describe('Gallery > initialisation > manual initialisation', () => {
         const [ instance ] = gallery('.js-gallery', { manualInitialisation: true });
         expect(instance.getState).toBeDefined();
         const { items } = instance.getState();
-        expect(items[0].node.hasAttribute('aria-hidden')).toEqual(true);
-        expect(items[0].node.classList.contains(defaults.className.active)).toEqual(false);
+        expect(items[0].hasAttribute('aria-hidden')).toEqual(true);
+        expect(items[0].classList.contains(defaults.className.active)).toEqual(false);
 
         await instance.initialise();
-        expect(items[0].node.hasAttribute('aria-hidden')).toEqual(false);
-        expect(items[0].node.classList.contains(defaults.className.active)).toEqual(true);
+        expect(items[0].hasAttribute('aria-hidden')).toEqual(false);
+        expect(items[0].classList.contains(defaults.className.active)).toEqual(true);
     });
 
 });
\ No newline at end of file
diff --git a/packages/gallery/__tests__/jest/initialisation/multiple.js b/packages/gallery/__tests__/jest/initialisation/multiple.js
index dacdca00..bc90b380 100644
--- a/packages/gallery/__tests__/jest/initialisation/multiple.js
+++ b/packages/gallery/__tests__/jest/initialisation/multiple.js
@@ -163,7 +163,7 @@ describe('Gallery > initialisation > multiple', () => {
         expect(instances[1].getState().activeIndex).toEqual(0);
     });
 
-    it('Should initialise separate instances with differnt settings', () => {
+    it('Should initialise separate instances with different settings', () => {
         document.body.innerHTML = `<section class="gallery js-gallery__1" id="gallery-1">
                 <h2 class="visually-hidden">Gallery</h2>
                 <div class="gallery__header">
@@ -180,7 +180,7 @@ describe('Gallery > initialisation > multiple', () => {
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
-                            data-gallery-item-loaded
+                            id="test-1"
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
@@ -207,7 +207,7 @@ describe('Gallery > initialisation > multiple', () => {
                         <li
                             class="gallery__item"
                             data-gallery-item
-                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            id="test-2"
                             aria-hidden="true"
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
@@ -254,7 +254,7 @@ describe('Gallery > initialisation > multiple', () => {
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
-                            data-gallery-item-loaded
+                            id="another-test-1"
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
@@ -281,7 +281,7 @@ describe('Gallery > initialisation > multiple', () => {
                         <li
                             class="gallery__item"
                             data-gallery-item
-                            data-gallery-item-src="http://placehold.it/1200x1200"
+                            id="another-test-2"
                             aria-hidden="true"
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
diff --git a/packages/gallery/__tests__/jest/utils.js b/packages/gallery/__tests__/jest/utils.js
index e39d076d..56c2630c 100644
--- a/packages/gallery/__tests__/jest/utils.js
+++ b/packages/gallery/__tests__/jest/utils.js
@@ -21,41 +21,33 @@ describe('Gallery > Utils > sanitize', () => {
 });
 
 describe('Gallery > getIndexFromURL', () => {
-    //return fallback if url.split throws
-    it('Should return fallback if url.split throws', () => {
-        const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
-        const result = getIndexFromURL('test-name', [], '#');
-        expect(result).toEqual(0);
-        warn.mockRestore();
-    });
-    
-    it('Should return fallback if hash does not contain gallery name', () => {
+
+    it('Should return fallback if no hash', () => {
         const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
-        const result = getIndexFromURL('test-name', [], '#potato');
-        expect(result).toEqual(0);
+        const result = getIndexFromURL([], '');
+        expect(result).toEqual(false);
         warn.mockRestore();
     });
     
-    it('Should return fallback and console warn if hash does not contain a number', () => {
+    it('Should return fallback if hash does not contain gallery item id', () => {
         const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
-        const result = getIndexFromURL('test-name', [], '#test-name-potato');
-        expect(result).toEqual(0);
-        expect(warn).toHaveBeenCalledWith('Gallery hash not valid');
+        const result = getIndexFromURL([], '#potato');
+        expect(result).toEqual(false);
         warn.mockRestore();
     });
 
-    it('Should return fallback and console warn if index is out of bounds', () => {
-        const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
-        const result = getIndexFromURL('test-name', [{}, {}], '#test-name-4');
-        expect(result).toEqual(0);
-        expect(warn).toHaveBeenCalledWith('Gallery index out of bounds');
-        warn.mockRestore();
+    it('Should return index if one is found', () => {
+        const result = getIndexFromURL([
+            { id: 'gallery-1-1' },
+            { id: 'gallery-1-2' }], '#gallery-1-2');
+
+        expect(result).toEqual(1);
     });
 
-    it('Should return index if one is found', () => {
-        const result = getIndexFromURL('test-name', [{}, {}], '#test-name-1');
-        //index is one less than the number in the hash
-        expect(result).toEqual(0);
+    it('Should return fallback passed as argument if no item matching hash', () => {
+        const result = getIndexFromURL([], '#gallery-1-2', 'fallback');
+
+        expect(result).toEqual('fallback');
     });
 
 
diff --git a/packages/gallery/__tests__/playwright/playwright.spec.js b/packages/gallery/__tests__/playwright/playwright.spec.js
index bec81944..701480a9 100644
--- a/packages/gallery/__tests__/playwright/playwright.spec.js
+++ b/packages/gallery/__tests__/playwright/playwright.spec.js
@@ -5,6 +5,25 @@ test.beforeEach(async ({ page }) => {
     await page.goto('/');
 });
 
+//TO DO
+// add left/right keyboard navigation tests
+test.describe('Gallery > Keyboard Navigation', () => {
+    test('Should navigate to the next item when the right arrow key is pressed', async ({ page }) => {
+        await page.keyboard.press('ArrowRight');
+        const activeItem = await page.$('.gallery__item.active');
+        expect(await activeItem.getAttribute('data-gallery-item')).toEqual('2');
+    });
+
+    test('Should navigate to the previous item when the left arrow key is pressed', async ({ page }) => {
+        await page.keyboard.press('ArrowRight');
+        await page.keyboard.press('ArrowRight');
+        await page.keyboard.press('ArrowLeft');
+        const activeItem = await page.$('.gallery__item.active');
+        expect(await activeItem.getAttribute('data-gallery-item')).toEqual('2');
+    });
+});
+
+
 test.describe('Gallery > Axe', { tag: '@reduced' }, () => {
     test('Should not have any automatically detectable accessibility issues', async ({ page }) => {
         const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
diff --git a/packages/gallery/example/src/js/index.js b/packages/gallery/example/src/js/index.js
index f2b01671..7befcf7e 100644
--- a/packages/gallery/example/src/js/index.js
+++ b/packages/gallery/example/src/js/index.js
@@ -1,5 +1,4 @@
 import gallery from '../../../src';
-    
-const [ instance ] = gallery('.js-gallery');
 
-console.log(instance.getState());
\ No newline at end of file
+const [ instance ] = gallery('.js-gallery', { startIndex: 2 });
+console.log(instance.getState().activeIndex);
\ No newline at end of file
diff --git a/packages/gallery/src/lib/constants.js b/packages/gallery/src/lib/constants.js
index 678867e9..d096a685 100644
--- a/packages/gallery/src/lib/constants.js
+++ b/packages/gallery/src/lib/constants.js
@@ -1,3 +1,4 @@
+/* istanbul ignore file */
 export const ATTRIBUTE = {
     NAVIGATE: 'data-gallery-navigate'
 };
@@ -5,4 +6,9 @@ export const ATTRIBUTE = {
 export const EVENTS = {
     INITIALISED: 'gallery.initialised',
     CHANGE: 'gallery.change'
+};
+
+export const KEYCODES = {
+    LEFT: 37,
+    RIGHT: 39
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/defaults.js b/packages/gallery/src/lib/defaults.js
index 695bfce2..7e9a9c17 100644
--- a/packages/gallery/src/lib/defaults.js
+++ b/packages/gallery/src/lib/defaults.js
@@ -1,7 +1,6 @@
 /* istanbul ignore file */
 
 export default {
-    name: false, //for setting the URL, if not set (false) it will get it from the id the container node, or just 'gallery'
     startIndex: 0,
     selector: {
         item: '[data-gallery-item]',
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index e933031c..c5bc829b 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -1,13 +1,9 @@
 import { sanitise } from './utils';
-import { ATTRIBUTE, EVENTS } from './constants';
+import { ATTRIBUTE, EVENTS, KEYCODES } from './constants';
 
-
-/*
- * @param store, Object, store instance
- */
 export const init = store => () => {
     const state = store.getState();
-    const { settings, items, dom, activeIndex } = state;
+    const { settings, items, dom, activeIndex, node } = state;
 
     if (!dom.liveRegion) console.warn(`A live region announcing current and total items is recommended for screen readers.`);
     else writeLiveRegion(state);
@@ -27,15 +23,27 @@ export const init = store => () => {
     }
     
     items.forEach((item, i) => {
-        if (!item.node.hasAttribute('tabindex')) item.node.setAttribute('tabindex', 0);
+        if (!item.hasAttribute('tabindex')) item.setAttribute('tabindex', 0);
         if (i === activeIndex) {
-            if (!item.node.classList.contains(settings.className.active)) item.node.classList.add(settings.className.active);
-            if (item.node.hasAttribute('aria-hidden')) item.node.removeAttribute('aria-hidden');
+            if (!item.classList.contains(settings.className.active)) item.classList.add(settings.className.active);
+            if (item.hasAttribute('aria-hidden')) item.removeAttribute('aria-hidden');
         } else {
-            if (item.node.classList.contains(settings.className.active)) item.node.classList.remove(settings.className.active);
-            if (!item.node.hasAttribute('aria-hidden')) item.node.setAttribute('aria-hidden', 'true');
+            if (item.classList.contains(settings.className.active)) item.classList.remove(settings.className.active);
+            if (!item.hasAttribute('aria-hidden')) item.setAttribute('aria-hidden', 'true');
+        }
+    });
+
+    node.addEventListener('keydown', e => {
+        switch (e.keyCode) {
+        case KEYCODES.LEFT:
+            previous(store);
+            break;
+        case KEYCODES.RIGHT:
+            next(store);
+            break;
         }
     });
+
     broadcast(store, EVENTS.INITIALISED)(state);
 };
 
@@ -48,8 +56,8 @@ export const toggleFullScreen = store => {
     } else if (document.exitFullscreen) document.exitFullscreen();
 };
 
-export const change = (store, next) => {
-    const { activeIndex, items, settings, name } = store.getState();
+export const change = (store, next, options = { fromListener: false }) => {
+    const { activeIndex, items, settings } = store.getState();
 
     // Ensure any YouTube videos are stopped
     // let targetOrigin = 'https://www.youtube.com';
@@ -64,16 +72,19 @@ export const change = (store, next) => {
     //then run all side effects to change the DOM/show and hide items, manage focus, and load updated previous/next
     store.update({ ...store.getState(), activeIndex: next }, [
         () => {
-            items[activeIndex].node.classList.remove('is--active');
-            items[activeIndex].node.setAttribute('aria-hidden', 'true');
-            items[next].node.classList.add('is--active');
-            items[next].node.removeAttribute('aria-hidden');
+            items[activeIndex].classList.remove('is--active');
+            items[activeIndex].setAttribute('aria-hidden', 'true');
+            items[next].classList.add('is--active');
+            items[next].removeAttribute('aria-hidden');
         },
-        () => items[next].node.focus(),
+        () => items[next].focus(),
         writeLiveRegion,
         () => {
-            const num = next + 1;
-            settings.updateURL && window.history.replaceState({ URL: `#${name}-${num}` }, '', `#${name}-${num}`);
+            const id = items[next].getAttribute('id');
+
+            //TODO
+            //don't pushState if this was fired from a hashchange event
+            settings.updateURL && !options.fromListener && window.history.pushState({ URL: `#${id}` }, '', `#${id}`);
         },
         broadcast(store, EVENTS.CHANGE)
     ]);
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index 2384a066..a1cd0951 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -1,6 +1,6 @@
 import { createStore } from './store';
 import { init, toggleFullScreen, goTo } from './dom';
-import { composeItems, composeDOM, getIndexFromURL, popstateHandler } from './utils';
+import { composeDOM, getIndexFromURL, hashchangeHandler } from './utils';
 
 /* 
  * @param node, HTMLElement, DOM node containing the gallery
@@ -14,18 +14,22 @@ export default (node, settings, index) => {
     const items = [].slice.call(node.querySelectorAll(settings.selector.item));
     if (items.length === 0) return console.warn('Gallery cannot be initialised, no items found'), null;
 
-    const name = `${settings.name || node.getAttribute('id') || 'gallery'}-${index + 1}`;
-
+    //ensure each gallery item has an id
+    //need to do this before setting initial state as it's required for the initial activeIndex
+    //TODO
+    // - add a check for duplicate ids across whole document if multiple galleries initialised separately
+    items.forEach((item, idx) => {
+        if (!item.hasAttribute('id')) item.setAttribute('id', `gallery-${index + 1}-${idx + 1}`);
+    });
     store.update({
         node,
-        name,
         settings,
-        items: composeItems(items, settings),
+        items,
         dom: composeDOM(node, settings),
-        activeIndex: getIndexFromURL(name, items, location.hash, settings.startIndex)
+        activeIndex: getIndexFromURL(items, location.hash, settings.startIndex)
     }, [
         () => !settings.manualInitialisation && init(store)(),
-        () => window.addEventListener('popstate', popstateHandler(store))
+        () => window.addEventListener('hashchange', hashchangeHandler(store))
     ]);
 
     return {
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 9165be86..0ec03d07 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -2,8 +2,6 @@ import { change } from './dom';
 
 export const sanitise = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
-export const composeItems = (nodes, settings) => nodes.map(node => ({ node }));
-
 export const composeDOM = (node, settings) => ({
     liveRegion: node.querySelector(settings.selector.liveRegion),
     fullscreen: node.querySelector(settings.selector.fullscreen),
@@ -12,23 +10,21 @@ export const composeDOM = (node, settings) => ({
     triggers: [].slice.call(document.querySelectorAll(settings.selector.navigate))
 });
 
-export const getIndexFromURL = (name, items, url, fallback = 0) => {
+export const getIndexFromURL = (items, url, fallback = false) => {
     const hash = url.split(`#`)[1] || '';
-    if (hash.indexOf(`${name}-`) === -1) return fallback;
-    const num = Number(hash.split(`${name}-`)[1]);
-    if (isNaN(num)) return console.warn('Gallery hash not valid'), fallback;
-    const index = num - 1;
-    if (index < 0 || index > (items.length - 1)) return console.warn('Gallery index out of bounds'), fallback;
-    return index;
+    if (hash === '') return fallback;
+    for (let i = 0; i < items.length; i++) {
+        if (items[i].id === hash) return i;
+    }
+    return fallback;
 };
 
-export const popstateHandler = store => e => {
-    if (!e.state) return;
-    const url = e.state.URL;
-    const { name, items } = store.getState();
-    const index = getIndexFromURL(name, items, url);
+export const hashchangeHandler = store => e => {
+    const url = e.newURL;
+    const { items } = store.getState();
+    const index = getIndexFromURL(items, url);
     if (index === false) return;
-    change(store, index);
+    change(store, index, { fromListener: true });
 };
 
 export const getSelection = selector => {

From 25ca341830bf670e565520d2fa93f398ebf845c1 Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Thu, 20 Mar 2025 14:29:42 +0000
Subject: [PATCH 33/49] Add keyboard tests

---
 packages/gallery/README.md                    | 13 ++++++------
 .../gallery/__tests__/jest/interactions.js    |  4 ----
 .../__tests__/playwright/playwright.spec.js   | 21 ++++++++++++-------
 packages/gallery/example/src/js/index.js      |  3 +--
 packages/gallery/src/lib/dom.js               |  3 ---
 5 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/packages/gallery/README.md b/packages/gallery/README.md
index 803e8be2..df3e61d7 100644
--- a/packages/gallery/README.md
+++ b/packages/gallery/README.md
@@ -158,16 +158,17 @@ const [instance] = gallery('js-gallery);
 gallery() returns an array of instances. Each instance exposes the interface
 ```
 {
-    getState //
-    initialise //
-    goTo //
-    toggleFullScreen //
+    getState // return the current state Object
+    initialise // to manually initialise if manualInitialisation setting is true
+    goTo // navigate to a slide index (zero indexed)
+    toggleFullScreen // set teh gallery to full screen
 }
 ```
 
 ## Events
-There are X custom events that an instance of the gallery dispatches:
-- `gallery.XXX` when xxxxx
+There are 2 events that an instance of the gallery dispatches:
+- `gallery.initialised` when it's initialised
+- `gallery.change` when navigating to a different slide
 
 
 ## Tests
diff --git a/packages/gallery/__tests__/jest/interactions.js b/packages/gallery/__tests__/jest/interactions.js
index 10072d66..370b69d9 100644
--- a/packages/gallery/__tests__/jest/interactions.js
+++ b/packages/gallery/__tests__/jest/interactions.js
@@ -110,10 +110,6 @@ beforeAll(() => {
     [ instance ] = gallery('.js-gallery');
 });
 
-//Don't need to test keyboard interactions separately (the test won't work by dispatching an event anyway)
-//https://www.w3.org/TR/WCAG20-TECHS/SCR35.html
-//The onclick event is mapped to the default action of a link or button.
-//The default action occurs when the user clicks the element with a mouse, but it also occurs when the user focuses the element and hits enter or space, and when the element is triggered via the accessibility API.
 describe('Gallery > click interactions', () => {
 
     it('should navigate to the next item via the next button', () => {
diff --git a/packages/gallery/__tests__/playwright/playwright.spec.js b/packages/gallery/__tests__/playwright/playwright.spec.js
index 701480a9..c25b71f7 100644
--- a/packages/gallery/__tests__/playwright/playwright.spec.js
+++ b/packages/gallery/__tests__/playwright/playwright.spec.js
@@ -1,4 +1,5 @@
 const { test, expect } = require('@playwright/test');
+import defaults from '../../src/lib/defaults';
 import AxeBuilder from '@axe-core/playwright';
 
 test.beforeEach(async ({ page }) => {
@@ -7,19 +8,25 @@ test.beforeEach(async ({ page }) => {
 
 //TO DO
 // add left/right keyboard navigation tests
-test.describe('Gallery > Keyboard Navigation', () => {
+test.describe('Gallery > Keyboard Navigation', { tag: '@reduced' }, () => {
     test('Should navigate to the next item when the right arrow key is pressed', async ({ page }) => {
+        const items = await page.locator('[data-gallery-item]').all();
+        await items[0].focus();
+        await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
         await page.keyboard.press('ArrowRight');
-        const activeItem = await page.$('.gallery__item.active');
-        expect(await activeItem.getAttribute('data-gallery-item')).toEqual('2');
+        await expect(items[1]).toHaveClass(`gallery__item ${defaults.className.active}`);
+        await page.keyboard.press('ArrowRight');
+        await expect(items[2]).toHaveClass(`gallery__item ${defaults.className.active}`);
     });
 
     test('Should navigate to the previous item when the left arrow key is pressed', async ({ page }) => {
-        await page.keyboard.press('ArrowRight');
-        await page.keyboard.press('ArrowRight');
+        const items = await page.locator('[data-gallery-item]').all();
+        await items[0].focus();
+        await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
+        await page.keyboard.press('ArrowLeft');
+        await expect(items[items.length - 1]).toHaveClass(`gallery__item ${defaults.className.active}`);
         await page.keyboard.press('ArrowLeft');
-        const activeItem = await page.$('.gallery__item.active');
-        expect(await activeItem.getAttribute('data-gallery-item')).toEqual('2');
+        await expect(items[items.length - 2]).toHaveClass(`gallery__item ${defaults.className.active}`);
     });
 });
 
diff --git a/packages/gallery/example/src/js/index.js b/packages/gallery/example/src/js/index.js
index 7befcf7e..d833f8c3 100644
--- a/packages/gallery/example/src/js/index.js
+++ b/packages/gallery/example/src/js/index.js
@@ -1,4 +1,3 @@
 import gallery from '../../../src';
 
-const [ instance ] = gallery('.js-gallery', { startIndex: 2 });
-console.log(instance.getState().activeIndex);
\ No newline at end of file
+const [ instance ] = gallery('.js-gallery');
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index c5bc829b..35f99753 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -81,9 +81,6 @@ export const change = (store, next, options = { fromListener: false }) => {
         writeLiveRegion,
         () => {
             const id = items[next].getAttribute('id');
-
-            //TODO
-            //don't pushState if this was fired from a hashchange event
             settings.updateURL && !options.fromListener && window.history.pushState({ URL: `#${id}` }, '', `#${id}`);
         },
         broadcast(store, EVENTS.CHANGE)

From 87340330125609ae8e0b306af9ded2da46b59a81 Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Thu, 20 Mar 2025 15:17:00 +0000
Subject: [PATCH 34/49] Docs

---
 packages/gallery/README.md              | 16 ++++++++++------
 packages/gallery/example/src/index.html |  3 ++-
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/gallery/README.md b/packages/gallery/README.md
index df3e61d7..0ad7b5b0 100644
--- a/packages/gallery/README.md
+++ b/packages/gallery/README.md
@@ -10,12 +10,16 @@ Create the gallery in HTML.
 
 There must be an live region with a `data-gallery-live-region` attribute (an element with `aria-live="polite" aria-atomic="true"` for example) for the accessible announcenments.
 
-Each of the gallery items should have a `data-gallery-item` attribute. For navigation, `data-gallery-previous` and `data-gallery-next` attributes on buttons.
+Each of the gallery items should have a `data-gallery-item` attribute and an id, which is used to update the document URL and makes slides addressable - you can link to a specific gallery slide using a URL hash matching a slide id. If ids are not added they are programmatically generated.
+
+For navigation, `data-gallery-previous` and `data-gallery-next` attributes on buttons identify them as navigation triggers.
 
 Optionally, a button with `data-gallery-fullscreen` attribute if supporting fullscreen functionality.
 
+Optionally, any buttons with a `data-gallery-navigate` attribute will navigate the gallery to a specific slide, e.g. `data-gallery-navigate="2"`.
+
 ```
-<div class="gallery js-gallery" id="gallery">
+<div role="region" class="gallery js-gallery" id="gallery">
     <div class="gallery__header">
         <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
         <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
@@ -29,7 +33,7 @@ Optionally, a button with `data-gallery-fullscreen` attribute if supporting full
     </div>
     <div class="gallery__main">
         <ul class="gallery__list">
-            <li class="gallery__item" data-gallery-item>
+            <li class="gallery__item" data-gallery-item id="gallery-1">
                 <div class="gallery__item-img-container">
                     <picture>
                         <source srcset="https://placehold.co/1600x1000.jpg" media="(min-width:1000px)">
@@ -48,7 +52,7 @@ Optionally, a button with `data-gallery-fullscreen` attribute if supporting full
                     </div>
                 </div>
             </li>
-            <li class="gallery__item" data-gallery-item>
+            <li class="gallery__item" data-gallery-item id="gallery-2">
                 <div class="gallery__item-img-container">
                     <picture>
                         <source srcset="https://placehold.co/1600x1400.jpg" media="(min-width:1100px)">
@@ -67,7 +71,7 @@ Optionally, a button with `data-gallery-fullscreen` attribute if supporting full
                     </div>
                 </div>
             </li>
-            <li class="gallery__item" data-gallery-item>
+            <li class="gallery__item" data-gallery-item id="gallery-3">
                 <div class="gallery__item-img-container">
                     <picture>
                         <source srcset="https://placehold.co/1630x1500.jpg" media="(min-width:1300px)">
@@ -86,7 +90,7 @@ Optionally, a button with `data-gallery-fullscreen` attribute if supporting full
                     </div>
                 </div>
             </li>
-            <li class="gallery__item" data-gallery-item>
+            <li class="gallery__item" data-gallery-item id="gallery-4">
                 <div class="gallery__item-img-container">
                     <picture>
                         <source srcset="https://placehold.co/1640x2400.jpg" media="(min-width:1400px)">
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index ad8f2cdf..28363ef1 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -218,7 +218,8 @@
   <body>
     <main>
         <h1>Gallery example</h1>
-        <div class="gallery js-gallery" id="gallery">
+        <div role="region" class="gallery js-gallery" id="gallery">
+            <h2 class="visually-hidden">Gallery</h2>
             <div class="gallery__header">
                 <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
                 <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>

From a2cc3c713a113374b77961ee52d8377f7fa2747b Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Thu, 20 Mar 2025 15:51:11 +0000
Subject: [PATCH 35/49] Revert

---
 packages/modal-gallery/src/lib/dom.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/modal-gallery/src/lib/dom.js b/packages/modal-gallery/src/lib/dom.js
index e8448b44..5b5b9ba3 100644
--- a/packages/modal-gallery/src/lib/dom.js
+++ b/packages/modal-gallery/src/lib/dom.js
@@ -68,7 +68,7 @@ export const initUI = store => state => {
         initUIButtons(store),
         () => document.addEventListener('keydown', keyListener),
         toggle(store),
-        writeLiveRegion
+        writeTotals
     ]);
 };
 
@@ -168,8 +168,8 @@ const toggle = store => state => {
     settings.fullscreen && toggleFullScreen(state);
 };
 
-const writeLiveRegion = ({ dom, current, items, settings }) => {
-    if (settings.totals) dom.liveRegions.innerHTML = `${current + 1}/${items.length}`;
+const writeTotals = ({ dom, current, items, settings }) => {
+    if (settings.totals) dom.totals.innerHTML = `${current + 1}/${items.length}`;
 };
 
 const toggleFullScreen = ({ isOpen, dom }) => {
@@ -199,7 +199,7 @@ export const previous = store => {
         () => dom.items[current].classList.remove('is--active'),
         () => dom.items[next].classList.add('is--active'),
         load(store),
-        writeLiveRegion
+        writeTotals
     ]);
 };
 
@@ -213,7 +213,7 @@ export const next = store => {
         () => dom.items[current].classList.remove('is--active'),
         () => dom.items[next].classList.add('is--active'),
         load(store),
-        writeLiveRegion
+        writeTotals
     ]);
 };
 

From c11b70f13ad8a745f6a6f6e38724bb740ce4beb4 Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Thu, 20 Mar 2025 16:33:24 +0000
Subject: [PATCH 36/49] Change playwright test port

---
 packages/gallery/tools/playwright.webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gallery/tools/playwright.webpack.config.js b/packages/gallery/tools/playwright.webpack.config.js
index c3d55188..b2741254 100644
--- a/packages/gallery/tools/playwright.webpack.config.js
+++ b/packages/gallery/tools/playwright.webpack.config.js
@@ -3,6 +3,6 @@ const baseConfig = require('./webpack.config');
 module.exports = {
     ...baseConfig,
     devServer: {
-        port: 8081
+        port: 8088
     }
 };

From 96839c8a516b7d6032517b71ba8625ffd1469edb Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Thu, 20 Mar 2025 17:08:06 +0000
Subject: [PATCH 37/49] Add viewport meta

---
 packages/gallery/example/src/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 28363ef1..0424f4e1 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <title>StormID</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <style>
         * {
             margin:0;

From 8ebc9a4a54f1b186e139d25bf5f5e94edb27d7bf Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Thu, 20 Mar 2025 17:32:49 +0000
Subject: [PATCH 38/49] Run keyboard tests across all browsers

---
 packages/gallery/__tests__/playwright/playwright.spec.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/gallery/__tests__/playwright/playwright.spec.js b/packages/gallery/__tests__/playwright/playwright.spec.js
index c25b71f7..dc9a8ccb 100644
--- a/packages/gallery/__tests__/playwright/playwright.spec.js
+++ b/packages/gallery/__tests__/playwright/playwright.spec.js
@@ -6,9 +6,7 @@ test.beforeEach(async ({ page }) => {
     await page.goto('/');
 });
 
-//TO DO
-// add left/right keyboard navigation tests
-test.describe('Gallery > Keyboard Navigation', { tag: '@reduced' }, () => {
+test.describe('Gallery > Keyboard Navigation', { tag: '@all' }, () => {
     test('Should navigate to the next item when the right arrow key is pressed', async ({ page }) => {
         const items = await page.locator('[data-gallery-item]').all();
         await items[0].focus();

From 5f91eabb2b886f0afdcfb5a7b64eafc4f1e1e3f8 Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Fri, 21 Mar 2025 11:18:45 +0000
Subject: [PATCH 39/49] Remove fullscreen button if not supported (iphone)

---
 .../__tests__/playwright/playwright.spec.js   | 10 +++++++++
 packages/gallery/src/lib/dom.js               | 22 +++++++++++++------
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/packages/gallery/__tests__/playwright/playwright.spec.js b/packages/gallery/__tests__/playwright/playwright.spec.js
index dc9a8ccb..a304ac4f 100644
--- a/packages/gallery/__tests__/playwright/playwright.spec.js
+++ b/packages/gallery/__tests__/playwright/playwright.spec.js
@@ -28,6 +28,16 @@ test.describe('Gallery > Keyboard Navigation', { tag: '@all' }, () => {
     });
 });
 
+test.describe('Gallery > Full screen mode support', { tag: '@all' }, () => {
+    test('Should remove the fullscreen button if not supported', async ({ page }) => {
+        const supportsFullscreen = await page.evaluate(() => document.fullscreenEnabled || document.webkitFullscreenEnabled);
+        if (!supportsFullscreen) {
+            await expect(page.locator('[data-gallery-fullscreen]')).not.toBeVisible();
+        } else {
+            await expect(page.locator('[data-gallery-fullscreen]')).toBeVisible();
+        }
+    });
+});
 
 test.describe('Gallery > Axe', { tag: '@reduced' }, () => {
     test('Should not have any automatically detectable accessibility issues', async ({ page }) => {
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 35f99753..3af7e169 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -8,11 +8,13 @@ export const init = store => () => {
     if (!dom.liveRegion) console.warn(`A live region announcing current and total items is recommended for screen readers.`);
     else writeLiveRegion(state);
     if (dom.fullscreen) {
-        dom.fullscreen.addEventListener('click', toggleFullScreen.bind(null, store));
-        document.addEventListener('fullscreenchange', e => {
-            if (document.fullscreenElement) document.documentElement.classList.add(settings.className.fullscreen);
-            else document.documentElement.classList.remove(settings.className.fullscreen);
-        });
+        if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
+            dom.fullscreen.addEventListener('click', toggleFullScreen.bind(null, store));
+            document.addEventListener('fullscreenchange', e => {
+                if (document.fullscreenElement) document.documentElement.classList.add(settings.className.fullscreen);
+                else document.documentElement.classList.remove(settings.className.fullscreen);
+            });
+        } else dom.fullscreen.parentNode.removeChild(dom.fullscreen);
     }
     if (dom.previous) dom.previous.addEventListener('click', previous.bind(null, store));
     if (dom.next) dom.next.addEventListener('click', next.bind(null, store));
@@ -52,8 +54,14 @@ const writeLiveRegion = ({ activeIndex, items, settings, dom }) => dom.liveRegio
 export const toggleFullScreen = store => {
     const { node } = store.getState();
     if (!document.fullscreenElement) {
-        if (node.requestFullscreen) node.requestFullscreen();
-    } else if (document.exitFullscreen) document.exitFullscreen();
+        if (node.requestFullscreen) {
+            node.requestFullscreen && node.requestFullscreen();
+            node.webkitRequestFullscreen && node.webkitRequestFullscreen();
+        }
+    } else if (document.exitFullscreen) {
+        node.requestFullscreen && node.exitFullscreen();
+        node.webkitExitFullscreen && node.webkitExitFullscreen();
+    }
 };
 
 export const change = (store, next, options = { fromListener: false }) => {

From 3cbaa1928e78de2976c7c8c37e9385c767719e2c Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Fri, 28 Mar 2025 18:24:30 +0000
Subject: [PATCH 40/49] Scroll version

---
 packages/gallery/example/src/index.html | 28 ++++++++++++-----
 packages/gallery/src/lib/defaults.js    |  1 +
 packages/gallery/src/lib/dom.js         | 39 ++++++++---------------
 packages/gallery/src/lib/factory.js     |  6 ++--
 packages/gallery/src/lib/utils.js       | 41 ++++++++++++++++++++++++-
 5 files changed, 78 insertions(+), 37 deletions(-)

diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index 0424f4e1..e432b934 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -29,9 +29,6 @@
             overflow: hidden;
             clip: rect(0 0 0 0);
         }
-        .gallery__item:not(.is--active) {
-            display: none;
-        }
         button {
             background:#191919;
             color:#fff;
@@ -96,9 +93,15 @@
             height: 32px;
         }
         .gallery__item {
-            display: none;
+            width: 100%;
+            /* display: none; */
+            flex-shrink: 0;
+            scroll-snap-align: start;
         }
-        .gallery__item.is--active {
+        /* .gallery__item:not(.is--active) {
+            display: none;
+        } */
+        /* .gallery__item.is--active {
             display: flex;
             flex-direction: column;
             width: 100%;
@@ -106,7 +109,7 @@
         .gallery__item.is--active:focus {
             outline: 0 none !important;
             box-shadow: none !important;
-        }
+        } */
         .gallery__previous,
         .gallery__next {
             position: absolute;
@@ -146,8 +149,17 @@
             }
         }
         .gallery__list {
-            display: flex;
+            display: grid;
+            grid-auto-flow: column;
+            grid-auto-columns: 100%;
+            height: 100%;
             width: 100%;
+            scroll-snap-type: x mandatory;
+            overflow: scroll hidden;
+            scroll-behavior: auto;
+            overscroll-behavior: contain;
+            scrollbar-width: none;
+            list-style: none;
         }
         .gallery__item-img-container {
             flex-grow: 1;
@@ -233,7 +245,7 @@ <h2 class="visually-hidden">Gallery</h2>
                 </button>
             </div>
             <div class="gallery__main">
-                <ul class="gallery__list">
+                <ul class="gallery__list" data-gallery-list>
 
                     <!-- <li
                         class="gallery__item"
diff --git a/packages/gallery/src/lib/defaults.js b/packages/gallery/src/lib/defaults.js
index 7e9a9c17..530d6d3d 100644
--- a/packages/gallery/src/lib/defaults.js
+++ b/packages/gallery/src/lib/defaults.js
@@ -3,6 +3,7 @@
 export default {
     startIndex: 0,
     selector: {
+        list: '[data-gallery-list]',
         item: '[data-gallery-item]',
         fullscreen: '[data-gallery-fullscreen]',
         liveRegion: '[data-gallery-live-region]',
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index 3af7e169..dc7cf228 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -24,16 +24,16 @@ export const init = store => () => {
         }));
     }
     
-    items.forEach((item, i) => {
-        if (!item.hasAttribute('tabindex')) item.setAttribute('tabindex', 0);
-        if (i === activeIndex) {
-            if (!item.classList.contains(settings.className.active)) item.classList.add(settings.className.active);
-            if (item.hasAttribute('aria-hidden')) item.removeAttribute('aria-hidden');
-        } else {
-            if (item.classList.contains(settings.className.active)) item.classList.remove(settings.className.active);
-            if (!item.hasAttribute('aria-hidden')) item.setAttribute('aria-hidden', 'true');
-        }
-    });
+    // items.forEach((item, i) => {
+    //     if (!item.hasAttribute('tabindex')) item.setAttribute('tabindex', 0);
+    //     if (i === activeIndex) {
+    //         if (!item.classList.contains(settings.className.active)) item.classList.add(settings.className.active);
+    //         if (item.hasAttribute('aria-hidden')) item.removeAttribute('aria-hidden');
+    //     } else {
+    //         if (item.classList.contains(settings.className.active)) item.classList.remove(settings.className.active);
+    //         if (!item.hasAttribute('aria-hidden')) item.setAttribute('aria-hidden', 'true');
+    //     }
+    // });
 
     node.addEventListener('keydown', e => {
         switch (e.keyCode) {
@@ -64,28 +64,15 @@ export const toggleFullScreen = store => {
     }
 };
 
-export const change = (store, next, options = { fromListener: false }) => {
-    const { activeIndex, items, settings } = store.getState();
-
-    // Ensure any YouTube videos are stopped
-    // let targetOrigin = 'https://www.youtube.com';
-    // let youtube_iframes = [...document.querySelectorAll('.data-yt-iframe')];
-    // if(youtube_iframes.length){
-    //     youtube_iframes.forEach(youtube_iframe => {
-    //         youtube_iframe.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', targetOrigin);
-    //     })
-    // }
+export const change = (store, next, options = { fromListener: false, fromScroll: false }) => {
+    const { list, items, settings } = store.getState();
 
     //set activeIndex in state,
     //then run all side effects to change the DOM/show and hide items, manage focus, and load updated previous/next
     store.update({ ...store.getState(), activeIndex: next }, [
         () => {
-            items[activeIndex].classList.remove('is--active');
-            items[activeIndex].setAttribute('aria-hidden', 'true');
-            items[next].classList.add('is--active');
-            items[next].removeAttribute('aria-hidden');
+            if (!options.fromScroll) list.scrollLeft = (next * items[next].clientWidth);
         },
-        () => items[next].focus(),
         writeLiveRegion,
         () => {
             const id = items[next].getAttribute('id');
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index a1cd0951..9ac4f852 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -1,6 +1,6 @@
 import { createStore } from './store';
 import { init, toggleFullScreen, goTo } from './dom';
-import { composeDOM, getIndexFromURL, hashchangeHandler } from './utils';
+import { composeDOM, getIndexFromURL, hashchangeHandler, scrollHandler, throttle } from './utils';
 
 /* 
  * @param node, HTMLElement, DOM node containing the gallery
@@ -25,11 +25,13 @@ export default (node, settings, index) => {
         node,
         settings,
         items,
+        list: node.querySelector(settings.selector.list),
         dom: composeDOM(node, settings),
         activeIndex: getIndexFromURL(items, location.hash, settings.startIndex)
     }, [
         () => !settings.manualInitialisation && init(store)(),
-        () => window.addEventListener('hashchange', hashchangeHandler(store))
+        () => window.addEventListener('hashchange', hashchangeHandler(store)),
+        ({ list }) => list.addEventListener('scroll', throttle(scrollHandler(store), 150))
     ]);
 
     return {
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 0ec03d07..02c75b4b 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -1,4 +1,4 @@
-import { change } from './dom';
+import { change, writeLiveRegion } from './dom';
 
 export const sanitise = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
@@ -19,6 +19,15 @@ export const getIndexFromURL = (items, url, fallback = false) => {
     return fallback;
 };
 
+export const getPosition = ({ list, items }) => {
+    const scrollPosition = list.scrollLeft;
+    const itemWidth = items[0].clientWidth;
+    if (scrollPosition === 0 && itemWidth === 0) return;
+    if (Number.isNaN(itemWidth) || Number.isNaN(scrollPosition)) return;
+    if (scrollPosition === 0) return 0;
+    return Math.round(scrollPosition / itemWidth);
+};
+
 export const hashchangeHandler = store => e => {
     const url = e.newURL;
     const { items } = store.getState();
@@ -27,10 +36,40 @@ export const hashchangeHandler = store => e => {
     change(store, index, { fromListener: true });
 };
 
+export const scrollHandler = store => e => {
+    const index = getPosition(store.getState());
+    if (index === undefined) return;
+    change(store, index, { fromScroll: true });
+};
+
 export const getSelection = selector => {
     if (typeof selector === 'string') return [].slice.call(document.querySelectorAll(selector));
     if (selector instanceof Array) return selector;
     if (Object.prototype.isPrototypeOf.call(NodeList.prototype, selector)) return [].slice.call(selector);
     if (selector instanceof HTMLElement) return [selector];
     return [];
+};
+
+export function throttle (fn, boundary) {
+    let last = -Infinity;
+    let timer;
+    return function bounced () {
+        if (timer) {
+            return;
+        }
+        unbound();
+  
+        function unbound () {
+            clearTimeout(timer);
+            timer = null;
+            let next = last + boundary;
+            let now = Date.now();
+            if (now > next) {
+                last = now;
+                fn();
+            } else {
+                timer = setTimeout(unbound, next - now);
+            }
+        }
+    };
 };
\ No newline at end of file

From 8ef0ddaaa8b6a99518a980bd5567a7e4312e188e Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Mon, 31 Mar 2025 17:31:21 +0100
Subject: [PATCH 41/49] Optimise scroll handler; patch ids; update fullscreen;
 update tests

---
 .../gallery/__tests__/jest/announcements.js   |  2 +-
 packages/gallery/__tests__/jest/api.js        |  2 +-
 packages/gallery/__tests__/jest/events.js     |  2 +-
 packages/gallery/__tests__/jest/fromURL.js    |  2 +-
 packages/gallery/__tests__/jest/hashchange.js |  2 +-
 .../__tests__/jest/initialisation/index.js    |  2 +-
 .../__tests__/jest/initialisation/manual.js   | 16 ++---
 .../__tests__/jest/initialisation/multiple.js |  4 +-
 .../gallery/__tests__/jest/interactions.js    |  2 +-
 packages/gallery/__tests__/jest/updateURL.js  |  2 +-
 .../__tests__/playwright/playwright.spec.js   | 60 +++++++++----------
 packages/gallery/example/src/index.html       |  7 +++
 packages/gallery/src/lib/dom.js               | 28 +++------
 packages/gallery/src/lib/factory.js           | 13 ++--
 packages/gallery/src/lib/utils.js             | 27 ++++++++-
 15 files changed, 94 insertions(+), 77 deletions(-)

diff --git a/packages/gallery/__tests__/jest/announcements.js b/packages/gallery/__tests__/jest/announcements.js
index 893effd5..34e5e751 100644
--- a/packages/gallery/__tests__/jest/announcements.js
+++ b/packages/gallery/__tests__/jest/announcements.js
@@ -211,7 +211,7 @@ describe('Gallery > announcements', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
diff --git a/packages/gallery/__tests__/jest/api.js b/packages/gallery/__tests__/jest/api.js
index 8d92294d..b9f0ab90 100644
--- a/packages/gallery/__tests__/jest/api.js
+++ b/packages/gallery/__tests__/jest/api.js
@@ -16,7 +16,7 @@ beforeAll(() => {
                     <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
diff --git a/packages/gallery/__tests__/jest/events.js b/packages/gallery/__tests__/jest/events.js
index 4e4e63c8..0734a949 100644
--- a/packages/gallery/__tests__/jest/events.js
+++ b/packages/gallery/__tests__/jest/events.js
@@ -17,7 +17,7 @@ describe('Gallery > Events', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li class="gallery__item is--active" data-gallery-item>
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
diff --git a/packages/gallery/__tests__/jest/fromURL.js b/packages/gallery/__tests__/jest/fromURL.js
index b1992eee..96c864a8 100644
--- a/packages/gallery/__tests__/jest/fromURL.js
+++ b/packages/gallery/__tests__/jest/fromURL.js
@@ -15,7 +15,7 @@ beforeAll(() => {
                     <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
diff --git a/packages/gallery/__tests__/jest/hashchange.js b/packages/gallery/__tests__/jest/hashchange.js
index b0134396..df1e5b67 100644
--- a/packages/gallery/__tests__/jest/hashchange.js
+++ b/packages/gallery/__tests__/jest/hashchange.js
@@ -15,7 +15,7 @@ beforeEach(() => {
                     <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
diff --git a/packages/gallery/__tests__/jest/initialisation/index.js b/packages/gallery/__tests__/jest/initialisation/index.js
index 71feb262..782bfd14 100644
--- a/packages/gallery/__tests__/jest/initialisation/index.js
+++ b/packages/gallery/__tests__/jest/initialisation/index.js
@@ -179,7 +179,7 @@ describe('Gallery > initialisation', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
diff --git a/packages/gallery/__tests__/jest/initialisation/manual.js b/packages/gallery/__tests__/jest/initialisation/manual.js
index 594f646d..4c0094a8 100644
--- a/packages/gallery/__tests__/jest/initialisation/manual.js
+++ b/packages/gallery/__tests__/jest/initialisation/manual.js
@@ -1,5 +1,5 @@
 import gallery from '../../../src';
-import defaults from '../../../src/lib/defaults';
+import { EVENTS } from '../../../src/lib/constants';
 
 describe('Gallery > initialisation > manual initialisation', () => {
     //mock image complete because JSDom cannot load images
@@ -24,7 +24,7 @@ describe('Gallery > initialisation > manual initialisation', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item"
                             data-gallery-item
@@ -85,15 +85,17 @@ describe('Gallery > initialisation > manual initialisation', () => {
                     </button>
                 </div>
             </section>`;
+
+        const node = document.querySelector('.js-gallery');
+        const initialisationHandler = jest.fn();
+        node.addEventListener(EVENTS.INITIALISED, initialisationHandler);
         const [ instance ] = gallery('.js-gallery', { manualInitialisation: true });
         expect(instance.getState).toBeDefined();
-        const { items } = instance.getState();
-        expect(items[0].hasAttribute('aria-hidden')).toEqual(true);
-        expect(items[0].classList.contains(defaults.className.active)).toEqual(false);
+        expect(instance.getState().items).toBeDefined();
+        expect(initialisationHandler).not.toHaveBeenCalled();
 
         await instance.initialise();
-        expect(items[0].hasAttribute('aria-hidden')).toEqual(false);
-        expect(items[0].classList.contains(defaults.className.active)).toEqual(true);
+        expect(initialisationHandler).toHaveBeenCalled();
     });
 
 });
\ No newline at end of file
diff --git a/packages/gallery/__tests__/jest/initialisation/multiple.js b/packages/gallery/__tests__/jest/initialisation/multiple.js
index bc90b380..c019054a 100644
--- a/packages/gallery/__tests__/jest/initialisation/multiple.js
+++ b/packages/gallery/__tests__/jest/initialisation/multiple.js
@@ -176,7 +176,7 @@ describe('Gallery > initialisation > multiple', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
@@ -250,7 +250,7 @@ describe('Gallery > initialisation > multiple', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
diff --git a/packages/gallery/__tests__/jest/interactions.js b/packages/gallery/__tests__/jest/interactions.js
index 370b69d9..551c9c3a 100644
--- a/packages/gallery/__tests__/jest/interactions.js
+++ b/packages/gallery/__tests__/jest/interactions.js
@@ -17,7 +17,7 @@ beforeAll(() => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
diff --git a/packages/gallery/__tests__/jest/updateURL.js b/packages/gallery/__tests__/jest/updateURL.js
index bc8a5313..19d0ead4 100644
--- a/packages/gallery/__tests__/jest/updateURL.js
+++ b/packages/gallery/__tests__/jest/updateURL.js
@@ -15,7 +15,7 @@ beforeAll(() => {
                     <button class="gallery__previous" aria-label="Previous image" disabled data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
diff --git a/packages/gallery/__tests__/playwright/playwright.spec.js b/packages/gallery/__tests__/playwright/playwright.spec.js
index a304ac4f..39251873 100644
--- a/packages/gallery/__tests__/playwright/playwright.spec.js
+++ b/packages/gallery/__tests__/playwright/playwright.spec.js
@@ -6,38 +6,38 @@ test.beforeEach(async ({ page }) => {
     await page.goto('/');
 });
 
-test.describe('Gallery > Keyboard Navigation', { tag: '@all' }, () => {
-    test('Should navigate to the next item when the right arrow key is pressed', async ({ page }) => {
-        const items = await page.locator('[data-gallery-item]').all();
-        await items[0].focus();
-        await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
-        await page.keyboard.press('ArrowRight');
-        await expect(items[1]).toHaveClass(`gallery__item ${defaults.className.active}`);
-        await page.keyboard.press('ArrowRight');
-        await expect(items[2]).toHaveClass(`gallery__item ${defaults.className.active}`);
-    });
+// test.describe('Gallery > Keyboard Navigation', { tag: '@all' }, () => {
+//     test('Should navigate to the next item when the right arrow key is pressed', async ({ page }) => {
+//         const items = await page.locator('[data-gallery-item]').all();
+//         await items[0].focus();
+//         await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
+//         await page.keyboard.press('ArrowRight');
+//         await expect(items[1]).toHaveClass(`gallery__item ${defaults.className.active}`);
+//         await page.keyboard.press('ArrowRight');
+//         await expect(items[2]).toHaveClass(`gallery__item ${defaults.className.active}`);
+//     });
 
-    test('Should navigate to the previous item when the left arrow key is pressed', async ({ page }) => {
-        const items = await page.locator('[data-gallery-item]').all();
-        await items[0].focus();
-        await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
-        await page.keyboard.press('ArrowLeft');
-        await expect(items[items.length - 1]).toHaveClass(`gallery__item ${defaults.className.active}`);
-        await page.keyboard.press('ArrowLeft');
-        await expect(items[items.length - 2]).toHaveClass(`gallery__item ${defaults.className.active}`);
-    });
-});
+//     test('Should navigate to the previous item when the left arrow key is pressed', async ({ page }) => {
+//         const items = await page.locator('[data-gallery-item]').all();
+//         await items[0].focus();
+//         await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
+//         await page.keyboard.press('ArrowLeft');
+//         await expect(items[items.length - 1]).toHaveClass(`gallery__item ${defaults.className.active}`);
+//         await page.keyboard.press('ArrowLeft');
+//         await expect(items[items.length - 2]).toHaveClass(`gallery__item ${defaults.className.active}`);
+//     });
+// });
 
-test.describe('Gallery > Full screen mode support', { tag: '@all' }, () => {
-    test('Should remove the fullscreen button if not supported', async ({ page }) => {
-        const supportsFullscreen = await page.evaluate(() => document.fullscreenEnabled || document.webkitFullscreenEnabled);
-        if (!supportsFullscreen) {
-            await expect(page.locator('[data-gallery-fullscreen]')).not.toBeVisible();
-        } else {
-            await expect(page.locator('[data-gallery-fullscreen]')).toBeVisible();
-        }
-    });
-});
+// test.describe('Gallery > Full screen mode support', { tag: '@all' }, () => {
+//     test('Should remove the fullscreen button if not supported', async ({ page }) => {
+//         const supportsFullscreen = await page.evaluate(() => document.fullscreenEnabled || document.webkitFullscreenEnabled);
+//         if (!supportsFullscreen) {
+//             await expect(page.locator('[data-gallery-fullscreen]')).not.toBeVisible();
+//         } else {
+//             await expect(page.locator('[data-gallery-fullscreen]')).toBeVisible();
+//         }
+//     });
+// });
 
 test.describe('Gallery > Axe', { tag: '@reduced' }, () => {
     test('Should not have any automatically detectable accessibility issues', async ({ page }) => {
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index e432b934..eae5c2b5 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -226,6 +226,13 @@
         .is--fullscreen .gallery__header {
             padding:calc(var(--baseline)/2) var(--gutter)
         }
+        .is--fullscreen .gallery__main {
+            width: 100%;
+        }
+        .is--fullscreen .gallery__item {
+            padding-left: var(--gutter);
+            padding-right: var(--gutter);
+        }
     </style>
   </head>
   <body>
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index dc7cf228..d9440cb9 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -3,7 +3,7 @@ import { ATTRIBUTE, EVENTS, KEYCODES } from './constants';
 
 export const init = store => () => {
     const state = store.getState();
-    const { settings, items, dom, activeIndex, node } = state;
+    const { settings, dom, list } = state;
 
     if (!dom.liveRegion) console.warn(`A live region announcing current and total items is recommended for screen readers.`);
     else writeLiveRegion(state);
@@ -23,19 +23,9 @@ export const init = store => () => {
             goTo(store)(+trigger.getAttribute(ATTRIBUTE.NAVIGATE));
         }));
     }
-    
-    // items.forEach((item, i) => {
-    //     if (!item.hasAttribute('tabindex')) item.setAttribute('tabindex', 0);
-    //     if (i === activeIndex) {
-    //         if (!item.classList.contains(settings.className.active)) item.classList.add(settings.className.active);
-    //         if (item.hasAttribute('aria-hidden')) item.removeAttribute('aria-hidden');
-    //     } else {
-    //         if (item.classList.contains(settings.className.active)) item.classList.remove(settings.className.active);
-    //         if (!item.hasAttribute('aria-hidden')) item.setAttribute('aria-hidden', 'true');
-    //     }
-    // });
 
-    node.addEventListener('keydown', e => {
+    list.addEventListener('keydown', e => {
+        e.preventDefault();
         switch (e.keyCode) {
         case KEYCODES.LEFT:
             previous(store);
@@ -54,13 +44,11 @@ const writeLiveRegion = ({ activeIndex, items, settings, dom }) => dom.liveRegio
 export const toggleFullScreen = store => {
     const { node } = store.getState();
     if (!document.fullscreenElement) {
-        if (node.requestFullscreen) {
-            node.requestFullscreen && node.requestFullscreen();
-            node.webkitRequestFullscreen && node.webkitRequestFullscreen();
-        }
-    } else if (document.exitFullscreen) {
-        node.requestFullscreen && node.exitFullscreen();
-        node.webkitExitFullscreen && node.webkitExitFullscreen();
+        if (node.requestFullscreen) node.requestFullscreen();
+        else if (node.webkitRequestFullscreen) node.webkitRequestFullscreen();
+    } else {
+        if (document.exitFullscreen) document.exitFullscreen();
+        else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
     }
 };
 
diff --git a/packages/gallery/src/lib/factory.js b/packages/gallery/src/lib/factory.js
index 9ac4f852..8b56c255 100644
--- a/packages/gallery/src/lib/factory.js
+++ b/packages/gallery/src/lib/factory.js
@@ -1,6 +1,6 @@
 import { createStore } from './store';
 import { init, toggleFullScreen, goTo } from './dom';
-import { composeDOM, getIndexFromURL, hashchangeHandler, scrollHandler, throttle } from './utils';
+import { composeDOM, getIndexFromURL, hashchangeHandler, scrollHandler, patchIds, throttle } from './utils';
 
 /* 
  * @param node, HTMLElement, DOM node containing the gallery
@@ -11,16 +11,13 @@ import { composeDOM, getIndexFromURL, hashchangeHandler, scrollHandler, throttle
 export default (node, settings, index) => {
     const store = createStore();
 
-    const items = [].slice.call(node.querySelectorAll(settings.selector.item));
+    let items = [].slice.call(node.querySelectorAll(settings.selector.item));
     if (items.length === 0) return console.warn('Gallery cannot be initialised, no items found'), null;
 
     //ensure each gallery item has an id
     //need to do this before setting initial state as it's required for the initial activeIndex
-    //TODO
-    // - add a check for duplicate ids across whole document if multiple galleries initialised separately
-    items.forEach((item, idx) => {
-        if (!item.hasAttribute('id')) item.setAttribute('id', `gallery-${index + 1}-${idx + 1}`);
-    });
+    items = patchIds(items, index);
+    
     store.update({
         node,
         settings,
@@ -31,7 +28,7 @@ export default (node, settings, index) => {
     }, [
         () => !settings.manualInitialisation && init(store)(),
         () => window.addEventListener('hashchange', hashchangeHandler(store)),
-        ({ list }) => list.addEventListener('scroll', throttle(scrollHandler(store), 150))
+        ({ list }) => list.addEventListener('scroll', throttle(scrollHandler(store), 160))
     ]);
 
     return {
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 02c75b4b..5025565d 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -1,4 +1,4 @@
-import { change, writeLiveRegion } from './dom';
+import { change } from './dom';
 
 export const sanitise = item => item.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
@@ -37,11 +37,34 @@ export const hashchangeHandler = store => e => {
 };
 
 export const scrollHandler = store => e => {
-    const index = getPosition(store.getState());
+    const { list, items, activeIndex } = store.getState();
+    const index = getPosition({ list, items } );
     if (index === undefined) return;
+    if (index === activeIndex) return;
     change(store, index, { fromScroll: true });
 };
 
+//ensure each gallery item has a unique id
+//used for updating the URL and for accessibility
+export const patchAccessibility = (items, index) => items.map((item, idx) => {
+    // if the item has an id, but it is a duplicate, warn the user
+    if (item.hasAttribute('id')) {
+        if (Array.from(document.querySelectorAll(`#${item.id}`)).length > 1) {
+            console.warn(`Gallery item id "${item.id}" is not unique, please ensure each gallery item has a unique id`);
+        }
+    } else {
+        let id = `gallery-${index + 1}-${idx + 1}`;
+        // check for duplicate ids across whole document in case multiple galleries have been initialised separately, add 100 to index
+        while (document.getElementById(id)) {
+            id = `gallery-${(index + 100) + 1}-${idx + 1}`;
+        }
+        item.setAttribute('id', id);
+    }
+    //ensure the item is focusable
+    // if (!item.hasAttribute('tabindex')) item.setAttribute('tabindex', 0);
+    return item;
+});
+
 export const getSelection = selector => {
     if (typeof selector === 'string') return [].slice.call(document.querySelectorAll(selector));
     if (selector instanceof Array) return selector;

From 0bcff1d43a28428d70a05b25572e9431b78b2013 Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Tue, 1 Apr 2025 17:36:56 +0100
Subject: [PATCH 42/49] Update tests, add test hooks

---
 .../gallery/__tests__/jest/announcements.js   |   4 +-
 packages/gallery/__tests__/jest/api.js        |  13 +-
 .../__tests__/jest/initialisation/index.js    |   4 +-
 .../__tests__/jest/initialisation/multiple.js |   4 +-
 packages/gallery/__tests__/jest/utils.js      | 379 +++++++++++++++++-
 .../__tests__/playwright/playwright.spec.js   |  90 +++--
 packages/gallery/example/src/index.html       |   9 +-
 packages/gallery/src/lib/constants.js         |   3 +-
 packages/gallery/src/lib/dom.js               |  15 +-
 packages/gallery/src/lib/utils.js             |  12 +-
 10 files changed, 470 insertions(+), 63 deletions(-)

diff --git a/packages/gallery/__tests__/jest/announcements.js b/packages/gallery/__tests__/jest/announcements.js
index 34e5e751..04f2c1ad 100644
--- a/packages/gallery/__tests__/jest/announcements.js
+++ b/packages/gallery/__tests__/jest/announcements.js
@@ -15,7 +15,7 @@ describe('Gallery > announcements', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
@@ -97,7 +97,7 @@ describe('Gallery > announcements', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
diff --git a/packages/gallery/__tests__/jest/api.js b/packages/gallery/__tests__/jest/api.js
index b9f0ab90..d292898e 100644
--- a/packages/gallery/__tests__/jest/api.js
+++ b/packages/gallery/__tests__/jest/api.js
@@ -1,5 +1,4 @@
 import gallery from '../../src';
-import defaults from '../../src/lib/defaults';
 
 let instance;
 
@@ -18,9 +17,8 @@ beforeAll(() => {
                     </button>
                     <ul class="gallery__list" data-gallery-list>
                         <li
-                            class="gallery__item is--active"
+                            class="gallery__item"
                             data-gallery-item
-                            data-gallery-item-loaded
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
@@ -47,8 +45,6 @@ beforeAll(() => {
                         <li
                             class="gallery__item"
                             data-gallery-item
-                            data-gallery-item-src="http://placehold.it/600x600"
-                            aria-hidden="true"
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
@@ -75,8 +71,6 @@ beforeAll(() => {
                         <li
                             class="gallery__item"
                             data-gallery-item
-                            data-gallery-item-src="http://placehold.it/1200x1200"
-                            aria-hidden="true"
                         >
                             <div class="gallery__item-img-container" data-gallery-item-img-container>
                                 <img 
@@ -128,11 +122,6 @@ describe('Gallery > API', () => {
         expect(instance.getState().activeIndex).toEqual(0);
         instance.goTo(2);
         expect(instance.getState().activeIndex).toEqual(2);
-        const galleryItems = Array.from(document.querySelectorAll(defaults.selector.item));
-        expect(galleryItems[0].classList.contains(defaults.className.active)).toEqual(false);
-        expect(galleryItems[0].hasAttribute('aria-hidden')).toEqual(true);
-        expect(galleryItems[2].classList.contains(defaults.className.active)).toEqual(true);
-        expect(galleryItems[2].hasAttribute('aria-hidden')).toEqual(false);
     });
 
     it('Should have an API method toggleFullScreen', () => {
diff --git a/packages/gallery/__tests__/jest/initialisation/index.js b/packages/gallery/__tests__/jest/initialisation/index.js
index 782bfd14..607f3e8a 100644
--- a/packages/gallery/__tests__/jest/initialisation/index.js
+++ b/packages/gallery/__tests__/jest/initialisation/index.js
@@ -22,7 +22,7 @@ describe('Gallery > initialisation', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                         >
@@ -97,7 +97,7 @@ describe('Gallery > initialisation', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
diff --git a/packages/gallery/__tests__/jest/initialisation/multiple.js b/packages/gallery/__tests__/jest/initialisation/multiple.js
index c019054a..617d5b00 100644
--- a/packages/gallery/__tests__/jest/initialisation/multiple.js
+++ b/packages/gallery/__tests__/jest/initialisation/multiple.js
@@ -15,7 +15,7 @@ describe('Gallery > initialisation > multiple', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
@@ -89,7 +89,7 @@ describe('Gallery > initialisation > multiple', () => {
                     <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
                         <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
                     </button>
-                    <ul class="gallery__list">
+                    <ul class="gallery__list" data-gallery-list>
                         <li
                             class="gallery__item is--active"
                             data-gallery-item
diff --git a/packages/gallery/__tests__/jest/utils.js b/packages/gallery/__tests__/jest/utils.js
index 56c2630c..c741c582 100644
--- a/packages/gallery/__tests__/jest/utils.js
+++ b/packages/gallery/__tests__/jest/utils.js
@@ -1,4 +1,4 @@
-import { sanitise, getIndexFromURL, getSelection } from '../../src/lib/utils';
+import { sanitise, getIndexFromURL, getSelection, throttle, patchIds } from '../../src/lib/utils';
 
 describe('Gallery > Utils > sanitize', () => {
 
@@ -89,4 +89,381 @@ describe('Gallery > Utils > Get Selection', () => {
         expect(els.length).toEqual(1);
     });
 
+});
+
+
+describe('Gallery > Utils > Throttle', () => {
+    jest.useFakeTimers();
+    let mockFn;
+    let throttledFn;
+
+    beforeEach(() => {
+        mockFn = jest.fn();
+        throttledFn = throttle(mockFn, 1000); // 1-second boundary
+    });
+
+    it('should call the function immediately on the first invocation', () => {
+        throttledFn();
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call the function again within the boundary time', () => {
+        throttledFn();
+        throttledFn();
+        jest.advanceTimersByTime(500); // Half the boundary time
+        throttledFn();
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    it('should call the function again after the boundary time', () => {
+        throttledFn();
+        jest.advanceTimersByTime(1001); // Full boundary time plus 1
+        throttledFn();
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    it('should handle rapid consecutive calls correctly', () => {
+        throttledFn();
+        throttledFn();
+        throttledFn();
+        jest.advanceTimersByTime(1001);
+        throttledFn();
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    it('should reset the timer after each valid call', () => {
+        throttledFn();
+        jest.advanceTimersByTime(1001);
+        throttledFn();
+        jest.advanceTimersByTime(1001);
+        throttledFn();
+        expect(mockFn).toHaveBeenCalledTimes(3);
+    });
+});
+
+
+describe('Gallery > Utils > patchIds', () => {
+
+    it('should respect authored item ids, but warn if duplicate', () => {
+
+        document.body.innerHTML = `
+            <div id="first" />
+            <div role="region" class="gallery js-gallery" id="gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list" data-gallery-list>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            id="first"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                            id="second"
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </div>`;
+
+        console.warn = jest.fn();
+        const items = Array.from(document.querySelectorAll('.gallery__item'));
+        patchIds(items, 0);
+        expect(console.warn).toHaveBeenCalledWith('Gallery item id "first" is not unique, please ensure each gallery item has a unique id');
+
+    });
+
+    it('should auto-generate ids on items that are missing them', () => {
+        document.body.innerHTML = `
+            <div role="region" class="gallery js-gallery" id="gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list" data-gallery-list>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </div>`;
+
+        const items = Array.from(document.querySelectorAll('.gallery__item'));
+        patchIds(items, 0);
+        expect(items[0].id).toEqual('gallery-1-1');
+        expect(items[1].id).toEqual('gallery-1-2');
+
+    });
+
+    it('should auto-generate ids on items that are missing them, managing uniqueness across multiple invocations', () => {
+        document.body.innerHTML = `
+            <div role="region" class="gallery js-gallery" id="gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list" data-gallery-list>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </div>
+            <div role="region" class="gallery js-gallery-2" id="gallery">
+                <h2 class="visually-hidden">Gallery</h2>
+                <div class="gallery__header">
+                    <div class="gallery__total" aria-live="polite" aria-atomic="true" data-gallery-live-region>1 of 5</div>
+                    <button class="gallery__fullscreen" aria-label="Full screen" data-gallery-fullscreen>
+                        <svg class="gallery__fullscreen-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
+                    </button>
+                </div>
+                <div class="gallery__main">
+                    <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                    </button>
+                    <ul class="gallery__list" data-gallery-list>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image one"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="http://placehold.it/800x800"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - March</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                        <li
+                            class="gallery__item"
+                            data-gallery-item
+                        >
+                            <div class="gallery__item-img-container" data-gallery-item-img-container>
+                                <img 
+                                    alt="Image two"
+                                    class="gallery__item-img"
+                                    decoding="async"
+                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                />
+                            </div>
+                            <div class="gallery__item-footer">
+                                <div class="gallery__item-meta">
+                                    <div class="gallery__item-description">
+                                        <h2 class="gallery__item-artist">Kate Murphy</h2>
+                                        <div class="gallery__item-category">Architecture - April</div>
+                                        <div class="gallery__item-title">Example project name here</div>
+                                    </div>
+                                    <ul class="gallery__item-tags">
+                                        <li class="gallery__item-tag">Example tag</li>
+                                        <li class="gallery__item-tag">Example tag</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    </button>
+                </div>
+            </div>`;
+
+        const firstGroup = Array.from(document.querySelectorAll('.js-gallery .gallery__item'));
+        const secondGroup = Array.from(document.querySelectorAll('.js-gallery-2 .gallery__item'));
+        patchIds(firstGroup, 0);
+        patchIds(secondGroup, 0);
+        expect(firstGroup[0].id).toEqual('gallery-1-1');
+        expect(firstGroup[1].id).toEqual('gallery-1-2');
+        expect(secondGroup[0].id).toEqual('gallery-101-1');
+        expect(secondGroup[1].id).toEqual('gallery-101-2');
+
+    });
+
 });
\ No newline at end of file
diff --git a/packages/gallery/__tests__/playwright/playwright.spec.js b/packages/gallery/__tests__/playwright/playwright.spec.js
index 39251873..0ebc07ee 100644
--- a/packages/gallery/__tests__/playwright/playwright.spec.js
+++ b/packages/gallery/__tests__/playwright/playwright.spec.js
@@ -6,38 +6,64 @@ test.beforeEach(async ({ page }) => {
     await page.goto('/');
 });
 
-// test.describe('Gallery > Keyboard Navigation', { tag: '@all' }, () => {
-//     test('Should navigate to the next item when the right arrow key is pressed', async ({ page }) => {
-//         const items = await page.locator('[data-gallery-item]').all();
-//         await items[0].focus();
-//         await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
-//         await page.keyboard.press('ArrowRight');
-//         await expect(items[1]).toHaveClass(`gallery__item ${defaults.className.active}`);
-//         await page.keyboard.press('ArrowRight');
-//         await expect(items[2]).toHaveClass(`gallery__item ${defaults.className.active}`);
-//     });
-
-//     test('Should navigate to the previous item when the left arrow key is pressed', async ({ page }) => {
-//         const items = await page.locator('[data-gallery-item]').all();
-//         await items[0].focus();
-//         await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
-//         await page.keyboard.press('ArrowLeft');
-//         await expect(items[items.length - 1]).toHaveClass(`gallery__item ${defaults.className.active}`);
-//         await page.keyboard.press('ArrowLeft');
-//         await expect(items[items.length - 2]).toHaveClass(`gallery__item ${defaults.className.active}`);
-//     });
-// });
-
-// test.describe('Gallery > Full screen mode support', { tag: '@all' }, () => {
-//     test('Should remove the fullscreen button if not supported', async ({ page }) => {
-//         const supportsFullscreen = await page.evaluate(() => document.fullscreenEnabled || document.webkitFullscreenEnabled);
-//         if (!supportsFullscreen) {
-//             await expect(page.locator('[data-gallery-fullscreen]')).not.toBeVisible();
-//         } else {
-//             await expect(page.locator('[data-gallery-fullscreen]')).toBeVisible();
-//         }
-//     });
-// });
+test.describe('Gallery > Keyboard Navigation', { tag: '@all' }, () => {
+    test('Should navigate to the next item when the right arrow key is pressed', async ({ page }) => {
+        const list = await page.locator('[data-gallery-list]');
+        const items = await page.locator('[data-gallery-item]').all();
+        await list.focus();
+        await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
+        await page.keyboard.press('ArrowRight');
+        await expect(items[1]).toHaveClass(`gallery__item ${defaults.className.active}`);
+        await page.keyboard.press('ArrowRight');
+        await expect(items[2]).toHaveClass(`gallery__item ${defaults.className.active}`);
+    });
+
+    test('Should navigate to the previous item when the left arrow key is pressed', async ({ page }) => {
+        const list = await page.locator('[data-gallery-list]');
+        const items = await page.locator('[data-gallery-item]').all();
+        await list.focus();
+        await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
+        await page.keyboard.press('ArrowLeft');
+        await expect(items[items.length - 1]).toHaveClass(`gallery__item ${defaults.className.active}`);
+        await page.keyboard.press('ArrowLeft');
+        await expect(items[items.length - 2]).toHaveClass(`gallery__item ${defaults.className.active}`);
+    });
+});
+
+test.describe('Gallery > Full screen mode support', { tag: '@all' }, () => {
+    test('Should update the URL when item changes', async ({ page }) => {
+        const list = await page.locator('[data-gallery-list]');
+        await list.focus();
+        await page.keyboard.press('ArrowRight');
+        await expect(page.url()).toContain('#gallery-1-2');
+        await page.keyboard.press('ArrowRight');
+        await expect(page.url()).toContain('#gallery-1-3');
+    });
+});
+
+test.describe('Gallery > scrolling support', { tag: '@desktop' }, () => {
+    test('Should update the active item when scrolled to', async ({ page }) => {
+        const list = await page.locator('[data-gallery-list]');
+        const items = await page.locator('[data-gallery-item]').all();
+        const itemWidth = await items[0].evaluate((node) => node.offsetWidth);
+        await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
+        await list.hover();
+        await page.mouse.wheel(itemWidth/.75, 0);
+        await expect(items[1]).toHaveClass(`gallery__item ${defaults.className.active}`);
+    });
+});
+
+
+test.describe('Gallery > Full screen mode support', { tag: '@all' }, () => {
+    test('Should remove the fullscreen button if not supported', async ({ page }) => {
+        const supportsFullscreen = await page.evaluate(() => document.fullscreenEnabled || document.webkitFullscreenEnabled);
+        if (!supportsFullscreen) {
+            await expect(page.locator('[data-gallery-fullscreen]')).not.toBeVisible();
+        } else {
+            await expect(page.locator('[data-gallery-fullscreen]')).toBeVisible();
+        }
+    });
+});
 
 test.describe('Gallery > Axe', { tag: '@reduced' }, () => {
     test('Should not have any automatically detectable accessibility issues', async ({ page }) => {
diff --git a/packages/gallery/example/src/index.html b/packages/gallery/example/src/index.html
index eae5c2b5..1076bf0f 100644
--- a/packages/gallery/example/src/index.html
+++ b/packages/gallery/example/src/index.html
@@ -252,7 +252,11 @@ <h2 class="visually-hidden">Gallery</h2>
                 </button>
             </div>
             <div class="gallery__main">
-                <ul class="gallery__list" data-gallery-list>
+                <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+                    <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+                </button>
+                
+                <ul class="gallery__list" data-gallery-list tabindex="0">
 
                     <!-- <li
                         class="gallery__item"
@@ -387,9 +391,6 @@ <h2 class="gallery__item-artist">Kate Murphy</h2>
 
                 </ul>
                 
-                <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
-                    <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
-                </button>
                 <button class="gallery__next" aria-label="Next image" data-gallery-next>
                     <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                 </button>
diff --git a/packages/gallery/src/lib/constants.js b/packages/gallery/src/lib/constants.js
index d096a685..32e84648 100644
--- a/packages/gallery/src/lib/constants.js
+++ b/packages/gallery/src/lib/constants.js
@@ -10,5 +10,6 @@ export const EVENTS = {
 
 export const KEYCODES = {
     LEFT: 37,
-    RIGHT: 39
+    RIGHT: 39,
+    // TAB: 9
 };
\ No newline at end of file
diff --git a/packages/gallery/src/lib/dom.js b/packages/gallery/src/lib/dom.js
index d9440cb9..7849cff8 100644
--- a/packages/gallery/src/lib/dom.js
+++ b/packages/gallery/src/lib/dom.js
@@ -1,4 +1,4 @@
-import { sanitise } from './utils';
+import { sanitise, updateCSS } from './utils';
 import { ATTRIBUTE, EVENTS, KEYCODES } from './constants';
 
 export const init = store => () => {
@@ -7,6 +7,7 @@ export const init = store => () => {
 
     if (!dom.liveRegion) console.warn(`A live region announcing current and total items is recommended for screen readers.`);
     else writeLiveRegion(state);
+    /* istanbul ignore next */
     if (dom.fullscreen) {
         if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
             dom.fullscreen.addEventListener('click', toggleFullScreen.bind(null, store));
@@ -24,23 +25,30 @@ export const init = store => () => {
         }));
     }
 
+    /* istanbul ignore next */
     list.addEventListener('keydown', e => {
-        e.preventDefault();
         switch (e.keyCode) {
         case KEYCODES.LEFT:
+            e.preventDefault();
             previous(store);
             break;
         case KEYCODES.RIGHT:
+            e.preventDefault();
             next(store);
             break;
+        // case KEYCODES.TAB:
+        //     next(store);
+        //     break;
         }
     });
 
+    updateCSS(state);
     broadcast(store, EVENTS.INITIALISED)(state);
 };
 
 const writeLiveRegion = ({ activeIndex, items, settings, dom }) => dom.liveRegion.innerHTML = sanitise(settings.announcement(activeIndex + 1, items.length));
 
+/* istanbul ignore next */
 export const toggleFullScreen = store => {
     const { node } = store.getState();
     if (!document.fullscreenElement) {
@@ -55,13 +63,12 @@ export const toggleFullScreen = store => {
 export const change = (store, next, options = { fromListener: false, fromScroll: false }) => {
     const { list, items, settings } = store.getState();
 
-    //set activeIndex in state,
-    //then run all side effects to change the DOM/show and hide items, manage focus, and load updated previous/next
     store.update({ ...store.getState(), activeIndex: next }, [
         () => {
             if (!options.fromScroll) list.scrollLeft = (next * items[next].clientWidth);
         },
         writeLiveRegion,
+        updateCSS,
         () => {
             const id = items[next].getAttribute('id');
             settings.updateURL && !options.fromListener && window.history.pushState({ URL: `#${id}` }, '', `#${id}`);
diff --git a/packages/gallery/src/lib/utils.js b/packages/gallery/src/lib/utils.js
index 5025565d..a2fa32ea 100644
--- a/packages/gallery/src/lib/utils.js
+++ b/packages/gallery/src/lib/utils.js
@@ -19,6 +19,7 @@ export const getIndexFromURL = (items, url, fallback = false) => {
     return fallback;
 };
 
+/* istanbul ignore next */
 export const getPosition = ({ list, items }) => {
     const scrollPosition = list.scrollLeft;
     const itemWidth = items[0].clientWidth;
@@ -36,6 +37,7 @@ export const hashchangeHandler = store => e => {
     change(store, index, { fromListener: true });
 };
 
+/* istanbul ignore next */
 export const scrollHandler = store => e => {
     const { list, items, activeIndex } = store.getState();
     const index = getPosition({ list, items } );
@@ -44,9 +46,10 @@ export const scrollHandler = store => e => {
     change(store, index, { fromScroll: true });
 };
 
+
 //ensure each gallery item has a unique id
 //used for updating the URL and for accessibility
-export const patchAccessibility = (items, index) => items.map((item, idx) => {
+export const patchIds = (items, index) => items.map((item, idx) => {
     // if the item has an id, but it is a duplicate, warn the user
     if (item.hasAttribute('id')) {
         if (Array.from(document.querySelectorAll(`#${item.id}`)).length > 1) {
@@ -60,11 +63,14 @@ export const patchAccessibility = (items, index) => items.map((item, idx) => {
         }
         item.setAttribute('id', id);
     }
-    //ensure the item is focusable
-    // if (!item.hasAttribute('tabindex')) item.setAttribute('tabindex', 0);
     return item;
 });
 
+export const updateCSS = ({ activeIndex, node, items, settings }) => {
+    node.querySelector(settings.className.active)?.classList.remove(settings.className.active);
+    items[activeIndex].classList.add(settings.className.active);
+};
+
 export const getSelection = selector => {
     if (typeof selector === 'string') return [].slice.call(document.querySelectorAll(selector));
     if (selector instanceof Array) return selector;

From 707c74dc339aedd6e934f7c9ab3865da706098ba Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Tue, 1 Apr 2025 18:03:41 +0100
Subject: [PATCH 43/49] Update packages/gallery/README.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/gallery/README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/gallery/README.md b/packages/gallery/README.md
index 0ad7b5b0..c14f7dbe 100644
--- a/packages/gallery/README.md
+++ b/packages/gallery/README.md
@@ -8,8 +8,7 @@ Accessible media gallery that can be used inline or in a modal.
 
 Create the gallery in HTML.
 
-There must be an live region with a `data-gallery-live-region` attribute (an element with `aria-live="polite" aria-atomic="true"` for example) for the accessible announcenments.
-
+There must be an live region with a `data-gallery-live-region` attribute (an element with `aria-live="polite" aria-atomic="true"` for example) for the accessible announcements.
 Each of the gallery items should have a `data-gallery-item` attribute and an id, which is used to update the document URL and makes slides addressable - you can link to a specific gallery slide using a URL hash matching a slide id. If ids are not added they are programmatically generated.
 
 For navigation, `data-gallery-previous` and `data-gallery-next` attributes on buttons identify them as navigation triggers.

From d8bec6a71f82b7b761ab6b0489fcdaa83780bc2c Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Tue, 1 Apr 2025 18:03:52 +0100
Subject: [PATCH 44/49] Update
 packages/gallery/__tests__/jest/initialisation/manual.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/gallery/__tests__/jest/initialisation/manual.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gallery/__tests__/jest/initialisation/manual.js b/packages/gallery/__tests__/jest/initialisation/manual.js
index 4c0094a8..58f74575 100644
--- a/packages/gallery/__tests__/jest/initialisation/manual.js
+++ b/packages/gallery/__tests__/jest/initialisation/manual.js
@@ -35,7 +35,7 @@ describe('Gallery > initialisation > manual initialisation', () => {
                                     alt="Image one"
                                     class="gallery__item-img"
                                     decoding="async"
-                                    src="http://placehold.it/800x800""
+                                    src="http://placehold.it/800x800"
                                 />
                             </div>
                             <div class="gallery__item-footer">

From 81c86689dbd07cc57e38e6dc8120fcdfa67f793e Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Tue, 1 Apr 2025 18:09:31 +0100
Subject: [PATCH 45/49] Update readme

---
 packages/gallery/README.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/gallery/README.md b/packages/gallery/README.md
index c14f7dbe..cf855f33 100644
--- a/packages/gallery/README.md
+++ b/packages/gallery/README.md
@@ -31,7 +31,10 @@ Optionally, any buttons with a `data-gallery-navigate` attribute will navigate t
         </button>
     </div>
     <div class="gallery__main">
-        <ul class="gallery__list">
+        <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
+            <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
+        </button>
+        <ul class="gallery__list" tabindex="0">
             <li class="gallery__item" data-gallery-item id="gallery-1">
                 <div class="gallery__item-img-container">
                     <picture>
@@ -108,12 +111,7 @@ Optionally, any buttons with a `data-gallery-navigate` attribute will navigate t
                     </div>
                 </div>
             </li>
-
-
         </ul>
-        <button class="gallery__previous" aria-label="Previous image" data-gallery-previous>
-            <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><polygon points="17.77,3.77 16,2 6,12 16,22 17.77,20.23 9.54,12"/></g></svg>
-        </button>
         <button class="gallery__next" aria-label="Next image" data-gallery-next>
             <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
         </button>
@@ -138,6 +136,7 @@ const [instance] = gallery('js-gallery);
 {
     startIndex: 0,
     selector: { //selectors for the gallery elements
+        list: '[data-gallery-list]',
         item: '[data-gallery-item]',
         fullscreen: '[data-gallery-fullscreen]',
         liveRegion: '[data-gallery-live-region]',

From 4cdd2fc79cb254883725e38086081fae5b7f5e70 Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Tue, 1 Apr 2025 18:33:32 +0100
Subject: [PATCH 46/49] Add wait for scroll to test for Safari

---
 packages/gallery/__tests__/playwright/playwright.spec.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/gallery/__tests__/playwright/playwright.spec.js b/packages/gallery/__tests__/playwright/playwright.spec.js
index 0ebc07ee..787feed9 100644
--- a/packages/gallery/__tests__/playwright/playwright.spec.js
+++ b/packages/gallery/__tests__/playwright/playwright.spec.js
@@ -49,6 +49,7 @@ test.describe('Gallery > scrolling support', { tag: '@desktop' }, () => {
         await expect(items[0]).toHaveClass(`gallery__item ${defaults.className.active}`);
         await list.hover();
         await page.mouse.wheel(itemWidth/.75, 0);
+        await items[1].scrollIntoViewIfNeeded();
         await expect(items[1]).toHaveClass(`gallery__item ${defaults.className.active}`);
     });
 });

From fece9a45f46d9b5e90aa50747156815a578d6019 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Tue, 1 Apr 2025 18:39:00 +0100
Subject: [PATCH 47/49] Update packages/gallery/README.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/gallery/README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/gallery/README.md b/packages/gallery/README.md
index cf855f33..2dd0d826 100644
--- a/packages/gallery/README.md
+++ b/packages/gallery/README.md
@@ -128,8 +128,7 @@ Initialise the gallery
 ```
 import gallery from '@stormid/gallery';
 
-const [instance] = gallery('js-gallery);
-
+const [instance] = gallery('.js-gallery');
 ## Options
 
 ```

From ab4cdb672277f72066c1f87118ef0be9f9d56445 Mon Sep 17 00:00:00 2001
From: Mick Perkins <mick.perkins@stormid.com>
Date: Tue, 1 Apr 2025 18:39:11 +0100
Subject: [PATCH 48/49] Update packages/gallery/README.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/gallery/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gallery/README.md b/packages/gallery/README.md
index 2dd0d826..9b3595db 100644
--- a/packages/gallery/README.md
+++ b/packages/gallery/README.md
@@ -162,7 +162,7 @@ gallery() returns an array of instances. Each instance exposes the interface
     getState // return the current state Object
     initialise // to manually initialise if manualInitialisation setting is true
     goTo // navigate to a slide index (zero indexed)
-    toggleFullScreen // set teh gallery to full screen
+    toggleFullScreen // set the gallery to full screen
 }
 ```
 

From 1b2946c3ebf0b3a498069c10515ed27a44a7d8c9 Mon Sep 17 00:00:00 2001
From: Mick <mick.perkins@stormid.com>
Date: Wed, 2 Apr 2025 09:21:42 +0100
Subject: [PATCH 49/49] Update test html

---
 packages/gallery/__tests__/jest/announcements.js | 12 ++++++------
 packages/gallery/__tests__/jest/api.js           |  4 ++--
 packages/gallery/__tests__/jest/events.js        |  4 ++--
 packages/gallery/__tests__/jest/fromURL.js       |  4 ++--
 packages/gallery/__tests__/jest/hashchange.js    |  4 ++--
 .../__tests__/jest/initialisation/index.js       | 12 ++++++------
 .../__tests__/jest/initialisation/manual.js      |  4 ++--
 .../__tests__/jest/initialisation/multiple.js    | 16 ++++++++--------
 packages/gallery/__tests__/jest/interactions.js  |  4 ++--
 packages/gallery/__tests__/jest/updateURL.js     |  4 ++--
 packages/gallery/__tests__/jest/utils.js         | 16 ++++++++--------
 11 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/packages/gallery/__tests__/jest/announcements.js b/packages/gallery/__tests__/jest/announcements.js
index 04f2c1ad..a9fea4f5 100644
--- a/packages/gallery/__tests__/jest/announcements.js
+++ b/packages/gallery/__tests__/jest/announcements.js
@@ -72,8 +72,8 @@ describe('Gallery > announcements', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
@@ -182,8 +182,8 @@ describe('Gallery > announcements', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
@@ -296,8 +296,8 @@ describe('Gallery > announcements', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
diff --git a/packages/gallery/__tests__/jest/api.js b/packages/gallery/__tests__/jest/api.js
index d292898e..88a36fc7 100644
--- a/packages/gallery/__tests__/jest/api.js
+++ b/packages/gallery/__tests__/jest/api.js
@@ -95,8 +95,8 @@ beforeAll(() => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
diff --git a/packages/gallery/__tests__/jest/events.js b/packages/gallery/__tests__/jest/events.js
index 0734a949..4b973006 100644
--- a/packages/gallery/__tests__/jest/events.js
+++ b/packages/gallery/__tests__/jest/events.js
@@ -65,8 +65,8 @@ describe('Gallery > Events', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
diff --git a/packages/gallery/__tests__/jest/fromURL.js b/packages/gallery/__tests__/jest/fromURL.js
index 96c864a8..2aac55ec 100644
--- a/packages/gallery/__tests__/jest/fromURL.js
+++ b/packages/gallery/__tests__/jest/fromURL.js
@@ -100,8 +100,8 @@ beforeAll(() => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
diff --git a/packages/gallery/__tests__/jest/hashchange.js b/packages/gallery/__tests__/jest/hashchange.js
index df1e5b67..e81cbb3d 100644
--- a/packages/gallery/__tests__/jest/hashchange.js
+++ b/packages/gallery/__tests__/jest/hashchange.js
@@ -100,8 +100,8 @@ beforeEach(() => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
diff --git a/packages/gallery/__tests__/jest/initialisation/index.js b/packages/gallery/__tests__/jest/initialisation/index.js
index 607f3e8a..5ed8ceef 100644
--- a/packages/gallery/__tests__/jest/initialisation/index.js
+++ b/packages/gallery/__tests__/jest/initialisation/index.js
@@ -73,8 +73,8 @@ describe('Gallery > initialisation', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
@@ -154,8 +154,8 @@ describe('Gallery > initialisation', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
@@ -236,8 +236,8 @@ describe('Gallery > initialisation', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
diff --git a/packages/gallery/__tests__/jest/initialisation/manual.js b/packages/gallery/__tests__/jest/initialisation/manual.js
index 58f74575..72be1d60 100644
--- a/packages/gallery/__tests__/jest/initialisation/manual.js
+++ b/packages/gallery/__tests__/jest/initialisation/manual.js
@@ -80,8 +80,8 @@ describe('Gallery > initialisation > manual initialisation', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
diff --git a/packages/gallery/__tests__/jest/initialisation/multiple.js b/packages/gallery/__tests__/jest/initialisation/multiple.js
index 617d5b00..907d269b 100644
--- a/packages/gallery/__tests__/jest/initialisation/multiple.js
+++ b/packages/gallery/__tests__/jest/initialisation/multiple.js
@@ -72,8 +72,8 @@ describe('Gallery > initialisation > multiple', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>
@@ -146,8 +146,8 @@ describe('Gallery > initialisation > multiple', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
@@ -233,8 +233,8 @@ describe('Gallery > initialisation > multiple', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>
@@ -307,8 +307,8 @@ describe('Gallery > initialisation > multiple', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
diff --git a/packages/gallery/__tests__/jest/interactions.js b/packages/gallery/__tests__/jest/interactions.js
index 551c9c3a..de5669de 100644
--- a/packages/gallery/__tests__/jest/interactions.js
+++ b/packages/gallery/__tests__/jest/interactions.js
@@ -102,8 +102,8 @@ beforeAll(() => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
diff --git a/packages/gallery/__tests__/jest/updateURL.js b/packages/gallery/__tests__/jest/updateURL.js
index 19d0ead4..2555b5d3 100644
--- a/packages/gallery/__tests__/jest/updateURL.js
+++ b/packages/gallery/__tests__/jest/updateURL.js
@@ -100,8 +100,8 @@ beforeAll(() => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </section>`;
diff --git a/packages/gallery/__tests__/jest/utils.js b/packages/gallery/__tests__/jest/utils.js
index c741c582..ba69da82 100644
--- a/packages/gallery/__tests__/jest/utils.js
+++ b/packages/gallery/__tests__/jest/utils.js
@@ -216,8 +216,8 @@ describe('Gallery > Utils > patchIds', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </div>`;
@@ -297,8 +297,8 @@ describe('Gallery > Utils > patchIds', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </div>`;
@@ -378,8 +378,8 @@ describe('Gallery > Utils > patchIds', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </div>
@@ -449,8 +449,8 @@ describe('Gallery > Utils > patchIds', () => {
                             </div>
                         </li>
                     </ul>
-                    <button class="gallery__previous" aria-label="Next image" data-gallery-next>
-                        <svg class="gallery__previous-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
+                    <button class="gallery__next" aria-label="Next image" data-gallery-next>
+                        <svg class="gallery__next-icon" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12"/></g></svg>
                     </button>
                 </div>
             </div>`;