Typography: decorative backticks and quote marks reach the accessibility tree #20474

The typography plugin draws four decorative characters with content:

code::before,
code::after {
  content: "`";
}

blockquote p:first-of-type::before {
  content: open-quote;
}

blockquote p:last-of-type::after {
  content: close-quote;
}

Generated text lands in the accessibility tree. A blockquote paragraph exposes three text nodes where the markup has one: "“", "Hello", "”". Inline code inside a button gives the button the name the `foo` bar. Braille renders that punctuation whatever the speech settings say, and code and blockquote already carry the meaning the marks stand for.

Alt text after a slash keeps the glyph and drops it from the tree. Amended under the current declarations, browsers without support render as they do today:

code::before,
code::after {
  content: "`";
  content: "`" / "";
}

blockquote p:first-of-type::before {
  content: open-quote;
  content: open-quote / "";
}

blockquote p:last-of-type::after {
  content: close-quote;
  content: close-quote / "";
}

In Chrome 152 the rendering is unchanged and the paragraph exposes one text node. Alt text needs Chrome 77, Firefox 128, or Safari 17.4.

The marks are deliberate, per tailwindlabs/tailwindcss-typography#139 and tailwindlabs/tailwindcss-typography#328. This keeps them on screen.