Fix map loading and tab navigation v0.4.1

app/static/app.js

@@ -63,6 +63,7 @@ const elements = {
   addressSearchButton: $('#address-search-button'),
   addressResults: $('#address-results'),
   locationMap: $('#location-map'),
+  mapStatus: $('#map-status'),
   latitude: $('#latitude-input'),
   longitude: $('#longitude-input'),
   locationName: $('#location-name-input'),
@@ -609,7 +610,13 @@ function activeTabIndex() {
   return $$('.tab').findIndex((tab) => tab.classList.contains('active'));
 }
 
-function activateTab(tabName, focusTab = false) {
+function focusFirstControl(tabName) {
+  const panel = document.querySelector(`.tab-panel[data-panel="${tabName}"]`);
+  const first = panel?.querySelector('input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])');
+  first?.focus();
+}
+
+function activateTab(tabName, focusMode = 'none') {
   const tabs = $$('.tab');
   const target = tabs.find((tab) => tab.dataset.tab === tabName);
   if (!target) return;
@@ -620,22 +627,28 @@ function activateTab(tabName, focusTab = false) {
     item.tabIndex = active ? 0 : -1;
   });
   $$('.tab-panel').forEach((panel) => panel.classList.toggle('active', panel.dataset.panel === tabName));
-  if (focusTab) target.focus();
+
   if (tabName === 'location') {
     initialiseMap();
     window.setTimeout(() => {
       state.map?.invalidateSize();
       syncMapFromFields(false);
+      if (focusMode === 'field') focusFirstControl(tabName);
+      else if (focusMode === 'tab') target.focus();
     }, 0);
+  } else if (focusMode === 'field') {
+    window.setTimeout(() => focusFirstControl(tabName), 0);
+  } else if (focusMode === 'tab') {
+    target.focus();
   }
 }
 
-function cycleTabs(delta) {
+function cycleTabs(delta, focusMode = 'field') {
   const tabs = $$('.tab');
   if (!tabs.length) return;
   const current = Math.max(0, activeTabIndex());
   const next = (current + delta + tabs.length) % tabs.length;
-  activateTab(tabs[next].dataset.tab, true);
+  activateTab(tabs[next].dataset.tab, focusMode);
 }
 
 function markLocationDirty() {
@@ -643,21 +656,39 @@ function markLocationDirty() {
   captureCurrentValues();
 }
 
+function setMapStatus(message, isError = false) {
+  if (!elements.mapStatus) return;
+  elements.mapStatus.textContent = message;
+  elements.mapStatus.classList.toggle('error', isError);
+}
+
 function initialiseMap() {
-  if (state.map || typeof window.L === 'undefined' || !elements.locationMap) return;
+  if (state.map || !elements.locationMap) return;
+  if (typeof window.L === 'undefined') {
+    setMapStatus('Map library failed to load. Rebuild the container and hard-refresh the page.', true);
+    return;
+  }
   const config = state.mapConfig || {};
-  state.map = L.map(elements.locationMap, { zoomControl: true }).setView(
-    [Number(config.defaultMapLat ?? 64.5), Number(config.defaultMapLon ?? 11.0)],
-    Number(config.defaultMapZoom ?? 5),
-  );
-  L.tileLayer(config.mapTileUrl || 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    maxZoom: 19,
-    attribution: config.mapAttribution || '© OpenStreetMap contributors',
-  }).addTo(state.map);
-  state.map.on('click', (event) => {
-    setLocation(event.latlng.lat, event.latlng.lng, '', true, false);
-  });
-  syncMapFromFields(false);
+  try {
+    state.map = L.map(elements.locationMap, { zoomControl: true }).setView(
+      [Number(config.defaultMapLat ?? 64.5), Number(config.defaultMapLon ?? 11.0)],
+      Number(config.defaultMapZoom ?? 5),
+    );
+    const layer = L.tileLayer(config.mapTileUrl || '/api/map/tiles/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: config.mapAttribution || '© OpenStreetMap contributors',
+    }).addTo(state.map);
+    layer.on('loading', () => setMapStatus('Loading map…'));
+    layer.on('load', () => setMapStatus('Click the map to place a pin.'));
+    layer.on('tileerror', () => setMapStatus('Map tiles could not be loaded. Address search and manual coordinates still work.', true));
+    state.map.on('click', (event) => {
+      setLocation(event.latlng.lat, event.latlng.lng, '', true, false);
+    });
+    syncMapFromFields(false);
+  } catch (error) {
+    state.map = null;
+    setMapStatus(error.message || 'The map could not be initialized.', true);
+  }
 }
 
 function setMarker(latitude, longitude, center = false) {
@@ -786,12 +817,6 @@ for (const radio of $$('input[name="precision"]')) radio.addEventListener('chang
 
 for (const tab of $$('.tab')) {
   tab.addEventListener('click', () => activateTab(tab.dataset.tab));
-  tab.addEventListener('keydown', (event) => {
-    if (event.key === 'ArrowLeft') { event.preventDefault(); cycleTabs(-1); }
-    if (event.key === 'ArrowRight') { event.preventDefault(); cycleTabs(1); }
-    if (event.key === 'Home') { event.preventDefault(); activateTab($$('.tab')[0].dataset.tab, true); }
-    if (event.key === 'End') { const tabs = $$('.tab'); event.preventDefault(); activateTab(tabs[tabs.length - 1].dataset.tab, true); }
-  });
 }
 activateTab('date');
 
@@ -804,7 +829,7 @@ window.addEventListener('keydown', (event) => {
   const typing = ['INPUT', 'TEXTAREA', 'SELECT'].includes(tag);
 
   if (event.key === 'Tab' && event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey && document.activeElement?.closest('.right-panel')) {
-    event.preventDefault(); cycleTabs(-1); return;
+    event.preventDefault(); event.stopPropagation(); cycleTabs(-1, 'field'); return;
   }
   if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
     event.preventDefault(); savePhoto(false); return;

app/static/index.html

@@ -124,14 +124,14 @@
 
       <aside class="sidebar right-panel">
         <div class="tabs" role="tablist">
-          <button class="tab active" data-tab="date" role="tab">Date &amp; time</button>
-          <button class="tab" data-tab="details" role="tab">Details</button>
-          <button class="tab" data-tab="keywords" role="tab">Keywords</button>
-          <button class="tab" data-tab="location" role="tab">Location</button>
+          <button id="tab-date" class="tab active" data-tab="date" role="tab" aria-selected="true" aria-controls="panel-date">Date &amp; time</button>
+          <button id="tab-details" class="tab" data-tab="details" role="tab" aria-selected="false" aria-controls="panel-details" tabindex="-1">Details</button>
+          <button id="tab-keywords" class="tab" data-tab="keywords" role="tab" aria-selected="false" aria-controls="panel-keywords" tabindex="-1">Keywords</button>
+          <button id="tab-location" class="tab" data-tab="location" role="tab" aria-selected="false" aria-controls="panel-location" tabindex="-1">Location</button>
         </div>
 
         <form id="metadata-form" autocomplete="off">
-          <section class="tab-panel active" data-panel="date">
+          <section id="panel-date" class="tab-panel active" data-panel="date" role="tabpanel" aria-labelledby="tab-date">
             <fieldset>
               <legend>Date precision</legend>
               <label class="radio-row"><input type="radio" name="precision" value="exact" checked> <span>Exact date</span></label>
@@ -180,7 +180,7 @@
             </div>
           </section>
 
-          <section class="tab-panel" data-panel="details">
+          <section id="panel-details" class="tab-panel" data-panel="details" role="tabpanel" aria-labelledby="tab-details">
             <label class="field">
               <span>Description</span>
               <textarea id="description-input" class="input textarea" rows="7" maxlength="2000" placeholder="Who, where, occasion, or other context…"></textarea>
@@ -188,7 +188,7 @@
             <div class="helper-row"><span>Written to EXIF, XMP and IPTC</span><span id="description-count">0 / 2000</span></div>
           </section>
 
-          <section class="tab-panel" data-panel="keywords">
+          <section id="panel-keywords" class="tab-panel" data-panel="keywords" role="tabpanel" aria-labelledby="tab-keywords">
             <label class="field">
               <span>People and keywords</span>
               <textarea id="keywords-input" class="input textarea" rows="7" placeholder="Daniel, family, birthday, Bergen"></textarea>
@@ -196,7 +196,7 @@
             <p class="field-help">Separate entries with commas or new lines. Written as XMP Subject and IPTC Keywords.</p>
           </section>
 
-          <section class="tab-panel" data-panel="location">
+          <section id="panel-location" class="tab-panel" data-panel="location" role="tabpanel" aria-labelledby="tab-location">
             <div class="location-search">
               <label class="field location-search-field">
                 <span>Search for a place or address</span>
@@ -208,6 +208,7 @@
             <div id="address-results" class="address-results" aria-live="polite"></div>
 
             <div id="location-map" class="location-map" aria-label="Map for selecting photo location"></div>
+            <p id="map-status" class="field-help map-status" role="status">Open this tab to load the map.</p>
             <p class="field-help map-help">Click the map to place a pin, or drag the pin to fine-tune the position.</p>
 
             <div class="field-grid coordinate-grid">
@@ -255,7 +256,7 @@
       <div><dt>← / →</dt><dd>Previous or next photo</dd></div>
       <div><dt>S</dt><dd>Mark skipped and open next photo</dd></div>
       <div><dt>C</dt><dd>Copy previous photo's values</dd></div>
-      <div><dt>Shift+Tab</dt><dd>Switch to the previous right-side tab</dd></div>
+      <div><dt>Shift+Tab</dt><dd>Open the previous metadata tab and focus its first field</dd></div>
     </dl>
   </dialog>
 

app/static/service-worker.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'photo-date-editor-v4';
+const CACHE_NAME = 'photo-date-editor-v4-1';
 const SHELL = ['/', '/styles.css', '/app.js', '/manifest.webmanifest', '/vendor/leaflet/leaflet.css', '/vendor/leaflet/leaflet.js'];
 
 self.addEventListener('install', (event) => {

app/static/styles.css

@@ -137,3 +137,5 @@ fieldset { border: 0; padding: 0; margin: 0 0 22px; } legend { font-weight: 650;
   .tab { font-size: 12px; padding-inline: 5px; }
 }
 .search-privacy { margin: 7px 0 0; }
+.map-status { margin-top: 8px; min-height: 1.2em; }
+.map-status.error { color: var(--danger); }