Merge pull request #76 from Stassi/feature/generated-decorative-acces…

…sibility-tutorial

feature/generated-decorative-accessibility-tutorial

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stassi/leaf",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "description": "Leaflet adapter.",
   "keywords": [
     "cartography",

public/index.html

@@ -30,7 +30,7 @@ <h1>Leaflet</h1>
         <a href="tutorial/dist/accessibility-interactive.html">Interactive</a>
       </li>
       <li>
-        <a href="tutorial/accessibility/decorative.html">Decorative</a>
+        <a href="tutorial/dist/accessibility-decorative.html">Decorative</a>
       </li>
       <li>
         <a href="tutorial/accessibility/fullscreen.html">Fullscreen</a>

rollup.config.ts

@@ -93,6 +93,11 @@ const aliasOptions: RollupAliasOptions = {
         input: 'src/tutorial/accessibility/interactive.ts',
         title: 'Accessible maps: Interactive',
       },
+      {
+        fileName: 'accessibility-decorative.html',
+        input: 'src/tutorial/accessibility/decorative.ts',
+        title: 'Accessible maps: Decorative',
+      },
     ].map(
       ({
         fileName,

src/tutorial/accessibility/decorative.test.ts

@@ -1,44 +1,67 @@
 import {
   activeElementClassName,
+  expectImagesLoaded,
   expectOpenStreetMapTilesLoaded,
   pressTab,
+  setBrowserConfiguration,
 } from 'test-utilities'
 
 describe('decorative accessibility tutorial', (): void => {
-  beforeAll(async (): Promise<void> => {
-    await page.goto('http://localhost:3001/tutorial/accessibility/decorative')
-  })
+  describe.each([1, 2])(
+    'device scale factor: %d',
+    (deviceScaleFactor: number): void => {
+      beforeAll(
+        setBrowserConfiguration({
+          deviceScaleFactor,
+          url: 'http://localhost:3001/tutorial/dist/accessibility-decorative',
+        }),
+      )
 
-  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('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())
-    })
+          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('marker', (): void => {
-      describe('on repeated `Tab`-presses', (): void => {
-        it('should not obtain focus', async (): Promise<void> => {
-          const tabPressesMaximum = 20
-          let markerFocused = false,
-            tabPresses = 0
+          describe('on repeated `Tab`-presses', (): void => {
+            it('should not obtain focus', async (): Promise<void> => {
+              const tabPressesMaximum = 20
+              let markerFocused = false,
+                tabPresses = 0
 
-          while (tabPresses < tabPressesMaximum) {
-            await pressTab()
-            tabPresses++
+              while (tabPresses < tabPressesMaximum) {
+                await pressTab()
+                tabPresses++
 
-            if (
-              (await activeElementClassName()).includes('leaflet-marker-icon')
-            ) {
-              markerFocused = true
-              break
-            }
-          }
+                if (
+                  (await activeElementClassName()).includes(
+                    'leaflet-marker-icon',
+                  )
+                ) {
+                  markerFocused = true
+                  break
+                }
+              }
 
-          expect(markerFocused).toBe(false)
+              expect(markerFocused).toBe(false)
+            })
+          })
         })
       })
-    })
-  })
+    },
+  )
 })

src/tutorial/accessibility/decorative.ts

@@ -0,0 +1,33 @@
+import 'leaflet/dist/leaflet.css'
+import '../style/theme.css'
+import '../style/medium.css'
+
+import { type Map } from '@stassi/leaf'
+
+document.getElementById('map')?.setAttribute('inert', '')
+
+const 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({
+  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,
+})
+
+await (
+  await import('../../leaf/tile-layer/tile-layer-osm.js')
+).tileLayerOsm({
+  map,
+})