Merge pull request #373 from marp-team/advanced-bg-a11y-reject-keywords

Advanced background: Exclude Marpit reserved image keywords from `<figcaption>` correctly
marp-team · Sep 11, 2023 · b2afbf9 · b2afbf9
2 parents 16aaa4f + a27d688
commit b2afbf9
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Advanced background: Exclude Marpit reserved image keywords from `<figcaption>` correctly ([#373](https://github.com/marp-team/marpit/pull/373))
+
 ## v2.5.2 - 2023-09-11
 
 ### Fixed

diff --git a/src/markdown/background_image/advanced.js b/src/markdown/background_image/advanced.js
@@ -101,9 +101,7 @@ function _advancedBackground(md) {
                             style: style.toString(),
                             open: {
                               meta: {
-                                // For getting better alt text, we should store
-                                // the reference of the original image token.
-                                marpitBackgroundSource: img.source,
+                                marpitBackgroundAlt: img.alt,
                               },
                             },
                           },
@@ -168,27 +166,16 @@ function _advancedBackground(md) {
     tokens,
     idx,
     options,
-    env,
+    _env,
     self,
   ) => {
     const token = tokens[idx]
     const open = self.renderToken(tokens, idx, options)
 
-    if (token.meta && token.meta.marpitBackgroundSource) {
-      // Try to render figcaption for background image
-      // (Image token after parsed has text children without Marpit keywords)
-      const figcaption = self
-        .renderInlineAsText(
-          token.meta.marpitBackgroundSource.children,
-          options,
-          env,
-        )
-        .trim()
-
-      if (figcaption)
-        return `${open}<figcaption>${md.utils.escapeHtml(
-          figcaption,
-        )}</figcaption>`
+    if (token.meta?.marpitBackgroundAlt) {
+      return `${open}<figcaption>${md.utils.escapeHtml(
+        token.meta.marpitBackgroundAlt,
+      )}</figcaption>`
     }
 
     return open

diff --git a/src/markdown/background_image/apply.js b/src/markdown/background_image/apply.js
@@ -74,6 +74,7 @@ function _backgroundImageApply(md) {
                 size,
                 url,
                 width,
+                options,
               } = t.meta.marpitImage
 
               if (background && !url.match(/^\s*$/)) {
@@ -85,6 +86,11 @@ function _backgroundImageApply(md) {
                   }
                 } else {
                   // Background image
+                  let altText = ''
+
+                  for (const opt of options)
+                    if (!opt.consumed) altText += opt.leading + opt.content
+
                   current.images = [
                     ...(current.images || []),
                     {
@@ -100,7 +106,7 @@ function _backgroundImageApply(md) {
                       })(),
                       url,
                       width,
-                      source: t,
+                      alt: altText.trimStart(),
                     },
                   ]
                 }

diff --git a/src/markdown/image/parse.js b/src/markdown/image/parse.js
@@ -124,7 +124,7 @@ function _parseImage(md) {
 
       if (hasConsumed) {
         let newTokens = []
-        md.inline.parse(updatedAlt.trimLeft(), state.md, state.env, newTokens)
+        md.inline.parse(updatedAlt.trimStart(), state.md, state.env, newTokens)
 
         token.children = newTokens
       }

diff --git a/test/markdown/directives/apply.js b/test/markdown/directives/apply.js
@@ -284,7 +284,6 @@ describe('Marpit directives apply plugin', () => {
               `
 
               const $ = load(mdWithSVG().render(paginateDirs))
-              console.log($.html())
               const sections = $('section')
 
               expect(sections.eq(0).data('marpit-pagination')).toBeUndefined()

diff --git a/test/marpit.js b/test/marpit.js
@@ -336,6 +336,27 @@ describe('Marpit', () => {
             }),
           )
       })
+
+      describe('Advanced background image powered by inline SVG mode', () => {
+        it('has figure element with background-image in the isolated layer', async () => {
+          const $ = load(
+            new Marpit({ inlineSVG: true }).render(
+              '![bg  Advanced background](test)',
+            ).html,
+          )
+
+          const figure = $('figure')
+          const ret = await postcssInstance.process(figure.attr('style'), {
+            from: undefined,
+          })
+
+          ret.root.walkDecls('background-image', (decl) => {
+            expect(decl.value).toBe('url("test")')
+          })
+
+          expect(figure.find('figcaption').html()).toBe('Advanced background')
+        })
+      })
     })
 
     describe('CSS Filters', () => {