From 919e1d15b5728c448bc692ba4d71434daa000883 Mon Sep 17 00:00:00 2001
From: basher <basher@madasafish.com>
Date: Mon, 18 Nov 2024 15:20:00 +0000
Subject: [PATCH] improve a11y for image gallery thumbnails

---
 ui/npm-shrinkwrap.json                        |  4 ++--
 .../javascript/web-components/webui-modal.ts  | 18 +++++++++++++++--
 .../WebUI Image Gallery/WebUIImageGallery.js  | 20 +++++++++----------
 .../WebUI Image Gallery/WebUIImageGallery.mdx |  1 +
 4 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/ui/npm-shrinkwrap.json b/ui/npm-shrinkwrap.json
index 0ef71e5..c249881 100644
--- a/ui/npm-shrinkwrap.json
+++ b/ui/npm-shrinkwrap.json
@@ -1,12 +1,12 @@
 {
     "name": "web-ui-boilerplate",
-    "version": "4.0.4",
+    "version": "4.0.5",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "web-ui-boilerplate",
-            "version": "4.0.4",
+            "version": "4.0.5",
             "license": "ISC",
             "dependencies": {
                 "dialog-polyfill": "^0.5.6"
diff --git a/ui/src/javascript/web-components/webui-modal.ts b/ui/src/javascript/web-components/webui-modal.ts
index 84137a2..e4f1408 100644
--- a/ui/src/javascript/web-components/webui-modal.ts
+++ b/ui/src/javascript/web-components/webui-modal.ts
@@ -16,12 +16,22 @@ export default class WebUIModal extends HTMLElement {
 
         if (!this.btnModalOpen || !this.dialog) return;
 
+        this.setupA11y();
+
         this.btnModalOpen?.addEventListener('click', this);
+        this.btnModalOpen?.addEventListener('keydown', this);
         this.btnsModalClose.forEach((btnModalClose) => {
             btnModalClose?.addEventListener('click', this);
         });
     }
 
+    private setupA11y(): void {
+        if (this.btnModalOpen?.nodeName === 'A') {
+            // Assign 'button' role to <a>.
+            this.btnModalOpen.setAttribute('role', 'button');
+        }
+    }
+
     private handleOpen(): void {
         if (!this.dialog?.open) {
             this.dialog?.showModal();
@@ -58,12 +68,16 @@ export default class WebUIModal extends HTMLElement {
     }
 
     // Handle constructor() event listeners.
-    public handleEvent(e: MouseEvent) {
+    public handleEvent(e: KeyboardEvent) {
         const target = e.currentTarget as HTMLButtonElement;
 
+        // Ensure <a role="button"> can open modal with ENTER and SPACEBAR.
+        if (e.type === 'keydown' && e.code !== 'Enter' && e.code !== 'Space')
+            return;
+
         // Click 'open' button.
         if (target?.dataset.open === '') {
-            // Prevent default behaviour on any links that open a modal.
+            // Prevent default behaviour on <a role="button">.
             e.preventDefault();
 
             this.handleOpen();
diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.js b/ui/stories/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.js
index a5795dc..6744944 100644
--- a/ui/stories/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.js	
+++ b/ui/stories/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.js	
@@ -15,7 +15,7 @@ export const WebUIImageGalleryHtml = () => `
                         <img
                             class="image"
                             src="https://dummyimage.com/400x300"
-                            alt="[alt]"
+                            alt="[thumbnail 1]"
                             loading="lazy"
                             height="300"
                             width="400"
@@ -59,7 +59,7 @@ export const WebUIImageGalleryHtml = () => `
                             <img
                                 class="image"
                                 src="https://dummyimage.com/1440x810&text=image+1"
-                                alt="[alt]"
+                                alt="[large image 1]"
                                 loading="lazy"
                                 height="810"
                                 width="1440"
@@ -83,7 +83,7 @@ export const WebUIImageGalleryHtml = () => `
                         <img
                             class="image"
                             src="https://dummyimage.com/400x300"
-                            alt="[alt]"
+                            alt="[thumbnail 2]"
                             loading="lazy"
                             height="300"
                             width="400"
@@ -127,7 +127,7 @@ export const WebUIImageGalleryHtml = () => `
                             <img
                                 class="image"
                                 src="https://dummyimage.com/1440x810&text=image+2"
-                                alt="[alt]"
+                                alt="[large image 2]"
                                 loading="lazy"
                                 height="810"
                                 width="1440"
@@ -151,7 +151,7 @@ export const WebUIImageGalleryHtml = () => `
                         <img
                             class="image"
                             src="https://dummyimage.com/400x300"
-                            alt="[alt]"
+                            alt="[thumbnail 3]"
                             loading="lazy"
                             height="300"
                             width="400"
@@ -195,7 +195,7 @@ export const WebUIImageGalleryHtml = () => `
                             <img
                                 class="image"
                                 src="https://dummyimage.com/1440x810&text=image+3"
-                                alt="[alt]"
+                                alt="[large image 3]"
                                 loading="lazy"
                                 height="810"
                                 width="1440"
@@ -219,7 +219,7 @@ export const WebUIImageGalleryHtml = () => `
                         <img
                             class="image"
                             src="https://dummyimage.com/400x300"
-                            alt="[alt]"
+                            alt="[thumbnail 4]"
                             loading="lazy"
                             height="300"
                             width="400"
@@ -263,7 +263,7 @@ export const WebUIImageGalleryHtml = () => `
                             <img
                                 class="image"
                                 src="https://dummyimage.com/1440x810&text=image+4"
-                                alt="[alt]"
+                                alt="[large image 4]"
                                 loading="lazy"
                                 height="810"
                                 width="1440"
@@ -287,7 +287,7 @@ export const WebUIImageGalleryHtml = () => `
                         <img
                             class="image"
                             src="https://dummyimage.com/400x300"
-                            alt="[alt]"
+                            alt="[thumbnail 5]"
                             loading="lazy"
                             height="300"
                             width="400"
@@ -331,7 +331,7 @@ export const WebUIImageGalleryHtml = () => `
                             <img
                                 class="image"
                                 src="https://dummyimage.com/1440x810&text=image+5"
-                                alt="[alt]"
+                                alt="[large image 5]"
                                 loading="lazy"
                                 height="810"
                                 width="1440"
diff --git a/ui/stories/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.mdx b/ui/stories/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.mdx
index c2c5fe1..14d4985 100644
--- a/ui/stories/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.mdx	
+++ b/ui/stories/6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.mdx	
@@ -7,6 +7,7 @@ import * as WebUIImageGallery from './WebUIImageGallery.stories';
 - Uses a simple [grid list layout](/story/layout-grid--grid-list) to arrange the image thumbnails.
 - Without JavaScript, clicking thumbnails opens the large images in current browser window.
 - With JavaScript, the large images are shown in the [`<webui-modal>`](/docs/web-components-or-custom-elements-webui-modal--docs) Web Component.
+- The thumbnail `<a>` elements have been given ARIA `role="button"` and keyboard bindings for `ENTER` and `SPACEBAR` to ensure they behave as buttons.
 
 > Please note: For brevity, the large images only have a subset of [responsive image](/story/components-images--responsive-image) `<source>` markup.