Merge pull request #67 from Stassi/feature/decorative-accessibility-t…

…utorial-test

feature/decorative-accessibility-tutorial-test

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stassi/leaf",
-  "version": "0.0.66",
+  "version": "0.0.67",
   "description": "Leaflet adapter.",
   "keywords": [
     "cartography",
@@ -88,10 +88,10 @@
     "eslint-plugin-jsonc": "^2.16.0",
     "eslint-plugin-no-unsanitized": "^4.1.2",
     "eslint-plugin-prettier": "^5.2.1",
-    "expect-puppeteer": "^10.1.3",
+    "expect-puppeteer": "^10.1.4",
     "jest": "^29.7.0",
-    "jest-environment-puppeteer": "^10.1.3",
-    "jest-puppeteer": "^10.1.3",
+    "jest-environment-puppeteer": "^10.1.4",
+    "jest-puppeteer": "^10.1.4",
     "prettier": "3.3.3",
     "puppeteer": "^23.6.0",
     "rollup": "^4.24.0",

src/tutorial/accessibility/decorative.test.ts

@@ -0,0 +1,35 @@
+describe('decorative accessibility tutorial', (): void => {
+  beforeAll(async (): Promise<void> => {
+    await page.goto('http://localhost:3001/tutorial/accessibility/decorative')
+  })
+
+  describe('map', (): void => {
+    describe('marker', (): void => {
+      describe('when repeatedly pressing Tab', (): void => {
+        it('should not obtain focus', async (): Promise<void> => {
+          const tabPressesMaximum = 20
+          let markerFocused = false,
+            tabPresses = 0
+
+          while (tabPresses < tabPressesMaximum) {
+            await page.keyboard.press('Tab')
+            tabPresses++
+
+            if (
+              (
+                await page.evaluate(
+                  (): string => document.activeElement?.className ?? '',
+                )
+              ).includes('leaflet-marker-icon')
+            ) {
+              markerFocused = true
+              break
+            }
+          }
+
+          expect(markerFocused).toBe(false)
+        })
+      })
+    })
+  })
+})

src/tutorial/open-street-map-tiles.test.ts

@@ -1,6 +1,7 @@
 // eslint-disable-next-line jest/prefer-lowercase-title -- official case
 describe('OpenStreetMap tiles', (): void => {
   describe.each([
+    'accessibility/decorative',
     'accessibility/interactive',
     'dist/custom-icons',
     'dist/mobile',