Accessibility fixes for lyqbox/accordion

css/lib/lyqbox.scss

@@ -155,6 +155,12 @@
 		right: 0;
 		top: 0;
 		background-image: url(../images/icons/ios-close.svg);
+		color: inherit;
+		border: none;
+		padding: 0;
+		font: inherit;
+		cursor: pointer;
+		outline: inherit;
 	}
 
 	// prev button

js/lib/accordion.js

@@ -193,6 +193,29 @@ if(lqx && !('accordion' in lqx)) {
 						}
 					});
 
+					// Track whether focus is inside the accordion
+					let isFocusInsideAccordion = false;
+
+					a.elem.on('focusin', function(){
+						isFocusInsideAccordion = true;
+						if(a.elem.hasClass('closed')) {
+							open(a.elem.attr('data-accordion'));
+						}
+					});
+
+					a.elem.on('focusout', function(event){
+						// Use a timeout to check if focus moved outside the accordion
+						setTimeout(function() {
+							if (!a.elem.has(event.relatedTarget).length) {
+								// Focus has moved outside the accordion, close it
+								if(a.elem.hasClass('open')) {
+									close(a.elem.attr('data-accordion'));
+								}
+								isFocusInsideAccordion = false;
+							}
+						}, 0);
+					});
+
 					// Save accordion index
 					a.elem.attr('data-accordion', vars.length);
 

js/lib/lyqbox.js

@@ -68,7 +68,7 @@ if(lqx && !('lyqbox' in lqx)) {
 							'<div class="credit"></div>' +
 						'</div>' +
 					'</div>' +
-					'<div class="close"></div>' +
+					'<button class="close" aria-label="Close modal"></button>' +
 					'<div class="prev"></div>' +
 					'<div class="next"></div>' +
 					'<div class="zoom-in"></div>' +
@@ -404,6 +404,35 @@ if(lqx && !('lyqbox' in lqx)) {
 
 			// Load content
 			load(startIndex);
+
+			// Set focus to the close button
+			vars.closeElem.focus();
+
+			// Trap focus within the lightbox
+			trapFocus();
+		};
+
+		// Function to trap focus within the lyqbox
+		var trapFocus = function() {
+			var focusableElements = vars.overlay.find('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
+			var firstFocusableElement = focusableElements.first();
+			var lastFocusableElement = focusableElements.last();
+
+			// Handle forward tabbing
+			lastFocusableElement.on('keydown', function(e) {
+				if (e.key === 'Tab' && !e.shiftKey) {
+					e.preventDefault();
+					firstFocusableElement.focus();
+				}
+			});
+
+			// Handle backward tabbing
+			firstFocusableElement.on('keydown', function(e) {
+				if (e.key === 'Tab' && e.shiftKey) {
+					e.preventDefault();
+					lastFocusableElement.focus();
+				}
+			});
 		};
 
 		// change content, for now we have 3 types, image, iframe and HTML.
@@ -423,7 +452,7 @@ if(lqx && !('lyqbox' in lqx)) {
 					break;
 
 				case 'video':
-					updateContent('<iframe src="' + vars.album[index].link + '"></iframe>', index, vars.album[index].type);
+					updateContent('<iframe tabindex="0" aria-label="Play Video" src="' + vars.album[index].link + '"></iframe>', index, vars.album[index].type);
 					break;
 
 				case 'html':
@@ -613,6 +642,9 @@ if(lqx && !('lyqbox' in lqx)) {
 
 		// Closing time
 		var end = function() {
+			// Store the element that had focus before the lightbox was opened
+			var previouslyFocusedElement = document.activeElement;
+
 			// Check if we are exiting from an alert, set cookie and show hash
 			if(vars.album[vars.currentIndex].type == 'alert') {
 				lqx.util.cookie('lyqbox-alert-' + vars.album[vars.currentIndex].albumId.slugify(), 1, {maxAge: parseInt(vars.album[vars.currentIndex].expire)});
@@ -644,6 +676,9 @@ if(lqx && !('lyqbox' in lqx)) {
 					'nonInteraction': opts.analytics.nonInteraction
 				});
 			}
+
+			// Return focus to the previously focused element
+			previouslyFocusedElement.focus();
 		};
 
 		return {