improve a11y for image gallery thumbnails

basher · Nov 18, 2024 · 919e1d1 · 919e1d1
1 parent 2f5e769
commit 919e1d1
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git a/ui/npm-shrinkwrap.json b/ui/npm-shrinkwrap.json
diff --git 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
@@ -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/.../6. Web Components Or Custom Elements/WebUI Image Gallery/WebUIImageGallery.mdx b/.../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.