Skip to content

Improve wrapper handling for how-to links #330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 20, 2025

Conversation

kfranqueiro
Copy link
Contributor

This refactors the handling for how-to links to resolve multiple issues:

  • It expected to find at least one leading paragraph or list element, which would throw an error if e.g. a Note comes first
  • It would wrap multiple consecutive elements within the body-wrapper element, which would produce the wrong layout
  • The processing occurs at the time the guideline/requirement's content is resolved, meaning the link would also end up inserted into informative docs in the future without additional work to pry it out
  • The identified elements would be split into a separate frontmatter property, requiring cobbling the two together to output the full text, which I thought might be useful down the road but maybe isn't

This PR moves the processing from within a remark plugin, to specifically within the EntryText component, using Cheerio which is probably more likely to be readable to more people (since it effectively follows jQuery's API). This does not add any new dependency; Cheerio was already used for an environment variable that makes upgrades easier to diff. (And Cheerio is what's used extensively for the WCAG 2 build system)

In the case of a Note/etc. occurring first, the link is currently moved below the note. Using a contrived, locally-edited example:

A requirement containing a note before any other prose, with the how-to link box appearing to the right of the prose after the note

This PR also restructures a bit of CSS so that we don't need a remark plugin solely for the purpose of adding a class to a bunch of child elements to increase their font size.

Note that this PR leaves a couple of functions unused in lib/markdown/guidelines.ts; I expect those to be useful again later (a further-future PR may move them).

FWIW, the diff of EntryText.astro might be slightly quieter with whitespace ignored (?w=1).

@kfranqueiro kfranqueiro requested a review from iadawn June 18, 2025 17:35
Copy link

netlify bot commented Jun 18, 2025

Deploy Preview for wcag3-howtos canceled.

Name Link
🔨 Latest commit 54b3a32
🔍 Latest deploy log https://app.netlify.com/projects/wcag3-howtos/deploys/6852f8ec7f47dd0009319326

Copy link

netlify bot commented Jun 18, 2025

Deploy Preview for wcag3 ready!

Name Link
🔨 Latest commit 54b3a32
🔍 Latest deploy log https://app.netlify.com/projects/wcag3/deploys/6852f8ec988c04000815eec4
😎 Deploy Preview https://deploy-preview-330--wcag3.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@kfranqueiro kfranqueiro merged commit 638eec7 into w3c:main Jun 20, 2025
9 checks passed
@kfranqueiro kfranqueiro deleted the kgf-remark-fixes branch June 20, 2025 11:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants