Control aria-hidden attribute properly in bespoke template

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Slides with code block always verbalized by screen-reader ([#236](https://github.com/marp-team/marp-cli/issues/236), [#238](https://github.com/marp-team/marp-cli/pull/238))
+
 ### Changed
 
 - Upgrade Node and dependent packages to the latest version ([#237](https://github.com/marp-team/marp-cli/pull/237))

src/templates/bespoke/classes.ts

@@ -2,22 +2,26 @@
 
 export default function bespokeClasses(deck) {
   deck.parent.classList.add('bespoke-marp-parent')
-  deck.slides.map((element) => element.classList.add('bespoke-marp-slide'))
+  deck.slides.forEach((el: HTMLElement) =>
+    el.classList.add('bespoke-marp-slide')
+  )
 
   deck.on('activate', (e) => {
-    const shouldResetAnimation = !e.slide.classList.contains(
-      'bespoke-marp-active'
-    )
+    const slide: HTMLElement = e.slide
+    const shouldResetAnim = !slide.classList.contains('bespoke-marp-active')
 
-    deck.slides.map((element) => {
-      element.classList.remove('bespoke-marp-active')
+    deck.slides.forEach((el: HTMLElement) => {
+      el.classList.remove('bespoke-marp-active')
+      el.setAttribute('aria-hidden', 'true')
     })
-    e.slide.classList.add('bespoke-marp-active')
 
-    if (shouldResetAnimation) {
-      e.slide.classList.add('bespoke-marp-active-ready')
+    slide.classList.add('bespoke-marp-active')
+    slide.removeAttribute('aria-hidden')
+
+    if (shouldResetAnim) {
+      slide.classList.add('bespoke-marp-active-ready')
       void document.body.clientHeight
-      e.slide.classList.remove('bespoke-marp-active-ready')
+      slide.classList.remove('bespoke-marp-active-ready')
     }
   })
 }

src/templates/bespoke/inactive.ts

@@ -7,9 +7,13 @@ export default function bespokeInactive(timeout = 2000) {
 
       activeTimer = setTimeout(() => {
         deck.parent.classList.add('bespoke-marp-inactive')
+        deck.fire('marp-inactive')
       }, timeout)
 
-      deck.parent.classList.remove('bespoke-marp-inactive')
+      if (deck.parent.classList.contains('bespoke-marp-inactive')) {
+        deck.parent.classList.remove('bespoke-marp-inactive')
+        deck.fire('marp-active')
+      }
     }
 
     document.addEventListener('mousedown', activate)

src/templates/bespoke/osc.ts

@@ -74,6 +74,9 @@ export default function bespokeOSC(selector: string = '.bespoke-marp-osc') {
       )
     })
 
+    deck.on('marp-active', () => osc.removeAttribute('aria-hidden'))
+    deck.on('marp-inactive', () => osc.setAttribute('aria-hidden', 'true'))
+
     if (screenfull.isEnabled) {
       screenfull.onchange(() =>
         oscElements('fullscreen', (fs) =>

test/templates/bespoke.ts

@@ -74,10 +74,17 @@ describe("Bespoke template's browser context", () => {
       expect(slides).toHaveLength(3)
       expect(slides[0].classList.contains('bespoke-marp-active')).toBe(true)
 
+      // a11y
+      expect(slides[0].hasAttribute('aria-hidden')).toBe(false)
+      expect(slides[1].getAttribute('aria-hidden')).toBe('true')
+      expect(slides[2].getAttribute('aria-hidden')).toBe('true')
+
       // Navigate slide
       deck.next()
       expect(slides[0].classList.contains('bespoke-marp-active')).toBe(false)
       expect(slides[1].classList.contains('bespoke-marp-active')).toBe(true)
+      expect(slides[0].getAttribute('aria-hidden')).toBe('true')
+      expect(slides[1].hasAttribute('aria-hidden')).toBe(false)
     })
   })
 
@@ -248,16 +255,25 @@ describe("Bespoke template's browser context", () => {
       expect(parent.className).toContain('bespoke-marp-inactive')
     })
 
+    it('fires marp-inactive event when the slide got inactive', () => {
+      render()
+      const deck = bespoke()
+      const marpInactive = jest.fn()
+      deck.on('marp-inactive', marpInactive)
+
+      expect(marpInactive).not.toBeCalled()
+      jest.advanceTimersByTime(2000)
+      expect(marpInactive).toBeCalled()
+    })
+
     it('resets timer when mouse is activated', () => {
       const parent = render()
       bespoke()
 
       jest.advanceTimersByTime(1000)
 
       // Trigger mousedown
-      const mousedown = document.createEvent('MouseEvents')
-      mousedown.initEvent('mousedown', true, true)
-      document.dispatchEvent(mousedown)
+      document.dispatchEvent(new MouseEvent('mousedown'))
 
       jest.advanceTimersByTime(1999)
       expect(parent.className).not.toContain('bespoke-marp-inactive')
@@ -266,10 +282,7 @@ describe("Bespoke template's browser context", () => {
       expect(parent.className).toContain('bespoke-marp-inactive')
 
       // Trigger mousemove
-      const mousemove = document.createEvent('MouseEvents')
-      mousemove.initEvent('mousemove', true, true)
-      document.dispatchEvent(mousemove)
-
+      document.dispatchEvent(new MouseEvent('mousemove'))
       expect(parent.className).not.toContain('bespoke-marp-inactive')
 
       jest.advanceTimersByTime(1999)
@@ -278,6 +291,29 @@ describe("Bespoke template's browser context", () => {
       jest.advanceTimersByTime(1)
       expect(parent.className).toContain('bespoke-marp-inactive')
     })
+
+    it('fires marp-active event when the slide got active', () => {
+      render()
+      const deck = bespoke()
+      const marpActive = jest.fn()
+      deck.on('marp-active', marpActive)
+
+      jest.runAllTimers()
+      expect(marpActive).not.toBeCalled()
+
+      // Trigger mousemove
+      document.dispatchEvent(new MouseEvent('mousemove'))
+      expect(marpActive).toBeCalled()
+
+      // It won't fire too even if mouse is activated while the state of slide is active
+      marpActive.mockClear()
+      document.dispatchEvent(new MouseEvent('mousemove'))
+      expect(marpActive).not.toBeCalled()
+
+      jest.advanceTimersByTime(2000)
+      document.dispatchEvent(new MouseEvent('mousemove'))
+      expect(marpActive).toBeCalled()
+    })
   })
 
   describe('Interactive', () => {
@@ -496,6 +532,16 @@ describe("Bespoke template's browser context", () => {
           expect(osc.parentElement).toBe(deck.parent)
         })
 
+        it('toggles aria-hidden attribute by events emitted by "inactive" plugin', () => {
+          const deck = bespoke()
+
+          deck.fire('marp-inactive')
+          expect(osc.getAttribute('aria-hidden')).toBe('true')
+
+          deck.fire('marp-active')
+          expect(osc.hasAttribute('aria-hidden')).toBe(false)
+        })
+
         it('updates page number by navigation', () => {
           const deck = bespoke()
           const page = osc.querySelector('[data-bespoke-marp-osc="page"]')!