ux improvements: contrast, readability, accessibility, keyboard nav

js/album.js

@@ -9,8 +9,12 @@
     var items = Array.from(grid.children)
     if (!items.length) return
 
+    var lastFocus = null
+
     var lb = document.createElement('div')
     lb.id = 'lightbox'
+    lb.setAttribute('role', 'dialog')
+    lb.setAttribute('aria-modal', 'true')
     lb.innerHTML =
       '<button id="lb-close" aria-label="Zamknij"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg></button>' +
       '<button id="lb-prev" aria-label="Poprzednie"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg></button>' +
@@ -22,6 +26,7 @@
     var current = -1
 
     function open(idx) {
+      lastFocus = document.activeElement
       current = idx
       var img = items[current].querySelector('img')
       lbImg.removeAttribute('src')
@@ -29,11 +34,13 @@
       lb.classList.add('open')
       lbImg.src = img.src
       lbImg.alt = img.alt
+      lb.querySelector('#lb-close').focus()
     }
 
     function close() {
       lb.classList.remove('open')
       current = -1
+      if (lastFocus) lastFocus.focus()
     }
 
     function prev() {
@@ -46,8 +53,35 @@
       open((current + 1) % items.length)
     }
 
+    function trapFocus(e) {
+      if (!lb.classList.contains('open')) return
+      var focusable = lb.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+      if (!focusable.length) return
+      var first = focusable[0]
+      var last = focusable[focusable.length - 1]
+      if (e.key === 'Tab') {
+        if (e.shiftKey) {
+          if (document.activeElement === first) {
+            e.preventDefault()
+            last.focus()
+          }
+        } else {
+          if (document.activeElement === last) {
+            e.preventDefault()
+            first.focus()
+          }
+        }
+      }
+    }
+
     items.forEach(function (item, i) {
       item.addEventListener('click', function () { open(i) })
+      item.addEventListener('keydown', function (e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          open(i)
+        }
+      })
     })
 
     lb.querySelector('#lb-close').addEventListener('click', close)
@@ -61,6 +95,7 @@
     })
 
     document.addEventListener('keydown', function (e) {
+      trapFocus(e)
       if (!lb.classList.contains('open')) return
       if (e.key === 'Escape') { close(); e.preventDefault() }
       if (e.key === 'ArrowLeft') { prev(); e.preventDefault() }