Add “expandable region” pattern

[adampage]

Resolves #3215.

---

WAI Preview Link (Last built on Wed, 19 Mar 2025 20:26:56 GMT).

[adampage]

Heya @mcking65, here’s an initial PR for the expandable region pattern.

There are a number of linting errors I’ll need to resolve, but I may not have time to do that before I head out early next week. @howard-e, could you let me know if the preview build failure is being caused by those linting errors? If so, I’ll do my best to get those fixed before I leave.

In the meantime, please feel free to review and share feedback for this standalone Codepen.

[howard-e]

@howard-e, could you let me know if the preview build failure is being caused by those linting errors? If so, I’ll do my best to get those fixed before I leave.

@adampage nope, the linting isn't the culprit here.

The preview generation builder expects files and folders to be in a very specific structure, seemingly to avoid any conflicts or invalid data-to-template attachments. One of those is having a defined *-pattern.html in the immediate sub-directory of the /patterns directory. So the expectation would be to have a /content/patterns/expandable-region/expandable-region-pattern.html (along with the references to it).

This is obviously a pain point to newer contributors (apologies) so there is an existing issue I'm hoping to get to shortly to document these particularities (or to revise altogether).

But that restriction can be ignored, which I have in w3c/wai-aria-practices#395 to allow this to successfully build. In this approach however, it won’t include the "WAI" wrapper around it, just the html, so I’ve already prepared a PR to remove it when this rename is done.

[adampage]

I’m suspicious of these HTML linting errors. 🤔

1. Element “p” not allowed as child of element “hgroup” in this context

   I think the validator might be out of date with the HTML spec on this? But also, this expandable region pattern certainly doesn’t require an hgroup to be present 😅 , I was just incorporating some semantics to fit the IRL scenario.

2. Bad value “image” for attribute “role” on element “svg”

   Ditto, but with the ARIA 1.3 spec, which introduced image as a synonym for img. If it’s not possible to update our validator here, I’ll be happy to update the pattern to use img instead.

3. Attribute “inert” not allowed on element “div” at this point

   I can’t find anything in HTML’s inert spec that should prohibit it here? 🤔

cc: @howard-e / @mcking65