fix: Change how _localizeMarker() is called; updated README (#4) (#1)

Author: nfreear

Leaflet.a11y.js

@@ -21,6 +21,9 @@
   let mapElem;
   let _initialized = false;
 
+  // Dummy/placeholder "translation" function.
+  L._ = L._ || ((str) => str);
+
   function onLoad (ev) {
     console.assert(ev && ev.type && ev.target && ev.target.on);
     let layer = 0;
@@ -51,12 +54,6 @@
     _fixMapContainer();
     _managePopupFocus(MAP);
 
-    setTimeout(() => {
-      // After all layers created, translate.
-      _localizeMarkers(MAP);
-      // _fixMarkers(MAP);
-    }, 500);
-
     console.debug('a11y.initialize:', mapElem, [mapElem], MAP.getPanes(), MAP);
   }
 
@@ -74,17 +71,17 @@
 
   /** Only translate the default marker ALT text, for now.
    */
-  function _localizeMarkers (MAP) {
-    const MARKER_PANE = MAP.getPane('markerPane'); // Was: MAP_EL.querySelector('.leaflet-marker-pane');
+  function _localizeMarker (PIN_EL) {
+    // const MARKER_PANE = MAP.getPane('markerPane'); // Was: MAP_EL.querySelector('.leaflet-marker-pane');
 
-    [...MARKER_PANE.children].forEach(PIN_EL => {
-      if (PIN_EL.alt === 'Marker') {
-        PIN_EL.alt = L._('Marker');
-        PIN_EL.title = L._('Marker');
-      }
-    });
+    // [...MARKER_PANE.children].forEach(PIN_EL => {
+    if (PIN_EL.alt === 'Marker') {
+      PIN_EL.alt = L._('Marker');
+      PIN_EL.title = L._('Marker');
+    }
+    // });
 
-    console.debug('localizeMarkers:', MARKER_PANE.children);
+    // console.debug('localizeMarkers:', MARKER_PANE.children);
   }
 
   function _localizePopups (MAP) {
@@ -123,6 +120,9 @@
         markerEl.role = '';
         markerEl.classList.add('x-static-marker');
       }
+      if (markerEl) {
+        _localizeMarker(markerEl);
+      }
       console.debug('a11y.layeradd', layerIdx, isInteractive, markerEl, ev);
       layerIdx++;
     });

README.md

@@ -8,11 +8,12 @@ Uses the [Leaflet.i18n][] internationalisation plugin.
 
 This plugin does _NOT_ replace [accessibility][] efforts in [core Leaflet][bugs]. It is a means to provide interim fixes, and test potential fixes.
 
-The plugin currently does 3 things:
+The plugin currently does the following:
 
-1. Sets a `role` and `aria-label` on the Leaflet map container element (see [L-7193][]).
-2. Manages keyboard focus when popups are opened and closed (see [L-8115][]).
-3. Translates map controls (Zoom in, Zoom out, Close popup, ...) into a language that has been set with `setLocale` ([Leaflet.i18n][]). Mostly relevant for accessibility, as most text is hidden from visual users.
+1. Set a `role` and `aria-label` on the Leaflet map container element (see [L-7193][]).
+2. Manage keyboard focus when popups are opened and closed (see [L-8115][]).
+3. Fix so non-interactive markers are correctly identified ([L-8116][])
+4. Translate map controls (Zoom in, Zoom out, Close popup, ...) into a language that has been set with `setLocale` ([Leaflet.i18n][]). Mostly relevant for accessibility, as most text is hidden from visual users.
 
 More to follow!
 
@@ -28,7 +29,7 @@ Include or `import` core Leaflet and the plugins:
 <script src="path/to/Leaflet.a11y.js"></script>
 ```
 
-Then, call initialize the accessibility plugin with `L.a11y.onLoad` before calling `setView`:
+Then, initialize the accessibility plugin with `L.a11y.onLoad` before calling `setView`:
 
 ```js
 const MAP = L.map('map')
@@ -55,5 +56,7 @@ License: [MIT][].
   "Make the leaflet-container a programmatically determinable element"
 [L-8115]: https://github.com/Leaflet/Leaflet/issues/8115
   "Focus management between markers and popups"
+[L-8116]: https://github.com/Leaflet/Leaflet/issues/8116
+  "Discern interactive markers from non-interactive markers"
 [Maps WCAG eval]: https://github.com/Malvoz/web-maps-wcag-evaluation
   "Web map tools WCAG 2.1 evaluation - A manual accessibility evaluation of popular web map tools."

example/app.js

@@ -49,8 +49,7 @@ async function importAndSetLocale (location, L) {
   const FILE = MATCH ? MATCH[1] : null;
 
   if (FILE) {
-    const { LOCALE } = await import(`./locale/${FILE}.js`);
-    const CODE = FILE.replace(/-TEST/, '');
+    const { LOCALE, CODE } = await import(`./locale/${FILE}.js`);
 
     L.registerLocale(CODE, LOCALE);
     L.setLocale(CODE);

locale/en-TEST.js

@@ -3,9 +3,8 @@
  * @summary Test English locale - Add [Z] to the end of each string, for demo/debugging.
  */
 
+export const CODE = 'en';
 export const LOCALE = {
-  // The actual language code.
-  // _locale: 'en',
   // Attribution - Leaflet, OpenStreetMap, ...
   'A JavaScript library for interactive maps': 'A JavaScript library for interactive maps [Z]',
   '© OpenStreetMap': '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> [Z]',

locale/fr.js

@@ -4,6 +4,7 @@
  * @see https://translate.google.com/?sl=auto&tl=fr&text=A%20JavaScript%20library%20for%20interactive%20maps%0AClose%0Amap%0AMarker%0AMap%20marker%0AZoom%20in%0AZoom%20out%0AHello%20world!%0AHello!%20I%E2%80%99m%20a%20translation%20test.&op=translate
  */
 
+export const CODE = 'fr';
 export const LOCALE = {
   // Attribution - Leaflet, OpenStreetMap, ...
   'A JavaScript library for interactive maps': 'Une bibliothèque JavaScript pour cartes interactives',