feature/generated-interactive-accessibility-tutorial

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stassi/leaf",
-  "version": "0.0.71",
+  "version": "0.0.72",
   "description": "Leaflet adapter.",
   "keywords": [
     "cartography",
@@ -93,7 +93,7 @@
     "jest-environment-puppeteer": "^10.1.4",
     "jest-puppeteer": "^10.1.4",
     "prettier": "3.3.3",
-    "puppeteer": "^23.6.0",
+    "puppeteer": "^23.6.1",
     "rollup": "^4.24.2",
     "rollup-plugin-modify": "^3.0.0",
     "rollup-plugin-styles": "^4.0.0",

public/index.html

@@ -27,7 +27,7 @@ <h1>Leaflet</h1>
     (<a href="https://leafletjs.com/examples/accessibility/" target="_blank">tutorial</a>)
     <ol type="a">
       <li>
-        <a href="tutorial/accessibility/interactive.html">Interactive</a>
+        <a href="tutorial/dist/accessibility-interactive.html">Interactive</a>
       </li>
       <li>
         <a href="tutorial/accessibility/decorative.html">Decorative</a>

rollup.config.ts

@@ -88,6 +88,11 @@ const aliasOptions: RollupAliasOptions = {
         input: 'src/tutorial/custom-icons/custom-icons.ts',
         title: 'Markers With Custom Icons',
       },
+      {
+        fileName: 'accessibility-interactive.html',
+        input: 'src/tutorial/accessibility/interactive.ts',
+        title: 'Accessible maps: Interactive',
+      },
     ].map(
       ({
         fileName,

src/tutorial/accessibility/interactive.test.ts

@@ -1,50 +1,72 @@
 import {
   activeElementClassName,
+  expectImagesLoaded,
   expectOpenStreetMapTilesLoaded,
   pressEnter,
   pressTab,
+  setBrowserConfiguration,
 } from 'test-utilities'
 
 describe('interactive accessibility tutorial', (): void => {
-  beforeAll(async (): Promise<void> => {
-    await page.goto('http://localhost:3001/tutorial/accessibility/interactive')
-  })
-
-  describe('map', (): void => {
-    // eslint-disable-next-line jest/prefer-lowercase-title -- official case
-    describe('OpenStreetMap tiles', (): void => {
-      /* eslint-disable-next-line jest/expect-expect --
+  describe.each([1, 2])(
+    'device scale factor: %d',
+    (deviceScaleFactor: number): void => {
+      beforeAll(
+        setBrowserConfiguration({
+          deviceScaleFactor,
+          url: 'http://localhost:3001/tutorial/dist/accessibility-interactive',
+        }),
+      )
+
+      describe('map', (): void => {
+        // eslint-disable-next-line jest/prefer-lowercase-title -- official case
+        describe('OpenStreetMap tiles', (): void => {
+          /* eslint-disable-next-line jest/expect-expect --
          `expectOpenStreetMapTilesLoaded` returns assertions */
-      it('should load', expectOpenStreetMapTilesLoaded())
-    })
-
-    describe('marker', (): void => {
-      describe('on focus', (): void => {
-        describe('on `Enter`-press', (): void => {
-          it('should display popup text "Kyiv, Ukraine is the birthplace of Leaflet!"', async (): Promise<void> => {
-            let markerFocused = false
-
-            while (!markerFocused) {
-              await pressTab()
-
-              if (
-                (await activeElementClassName()).includes('leaflet-marker-icon')
-              ) {
-                markerFocused = true
-              }
-            }
-
-            await pressEnter()
-
-            expect(
-              await page.$eval(
-                '.leaflet-popup-content',
-                ({ textContent }: Element): string | null => textContent,
-              ),
-            ).toBe('Kyiv, Ukraine is the birthplace of Leaflet!')
+          it('should load', expectOpenStreetMapTilesLoaded())
+        })
+
+        describe('marker', (): void => {
+          describe('images', (): void => {
+            describe.each([
+              `../../../leaflet/images/marker-icon${deviceScaleFactor === 2 ? '-2x' : ''}.png`,
+              '../../../leaflet/images/marker-shadow.png',
+            ])('src="%s"', (src: string): void => {
+              /* eslint-disable-next-line jest/expect-expect --
+                 `expectImagesLoaded` returns assertions */
+              it('should load', expectImagesLoaded(src))
+            })
+          })
+
+          describe('on focus', (): void => {
+            describe('on `Enter`-press', (): void => {
+              it('should display popup text "Kyiv, Ukraine is the birthplace of Leaflet!"', async (): Promise<void> => {
+                let markerFocused = false
+
+                while (!markerFocused) {
+                  await pressTab()
+
+                  if (
+                    (await activeElementClassName()).includes(
+                      'leaflet-marker-icon',
+                    )
+                  )
+                    markerFocused = true
+                }
+
+                await pressEnter()
+
+                expect(
+                  await page.$eval(
+                    '.leaflet-popup-content',
+                    ({ textContent }: Element): string | null => textContent,
+                  ),
+                ).toBe('Kyiv, Ukraine is the birthplace of Leaflet!')
+              })
+            })
           })
         })
       })
-    })
-  })
+    },
+  )
 })

src/tutorial/accessibility/interactive.ts

@@ -0,0 +1,35 @@
+import 'leaflet/dist/leaflet.css'
+import '../style/theme.css'
+import '../style/medium.css'
+
+import { type Map } from '@stassi/leaf'
+
+const altText = 'Kyiv',
+  map: Map = await (
+    await import('../../leaf/map/map.js')
+  ).map({
+    center: [50.4501, 30.5234],
+    id: 'map',
+    zoom: 4,
+  })
+
+await (
+  await import('../../leaf/marker.js')
+).marker({
+  altText,
+  iconOptions: {
+    iconUrl: '../../../leaflet/images/marker-icon.png',
+    iconUrlRetina: '../../../leaflet/images/marker-icon-2x.png',
+    shadowUrl: '../../../leaflet/images/marker-shadow.png',
+  },
+  latitudeLongitude: [50.4501, 30.5234],
+  map,
+  popupContent: `${altText}, Ukraine is the birthplace of Leaflet!`,
+})
+
+await (
+  await import('../../leaf/tile-layer/tile-layer-osm.js')
+).tileLayerOsm({
+  map,
+  zoomMax: 19,
+})