updated landmark design pattern

[jongund]

• Moved information from landmark example pages into the landmark patterns page
• Changed tabs used for code examples from Bootstrap to ARIA practice tabs
• Screenshot Images are now responsive and use figure/figcaption element
• Updated source code examples to use the same markup as other ARIA examples
• Updated AT to include skipTo.js example
• Updated Resources section
• Updated search landmark

Preview new Landmarks Pattern Page

Preview updated landmark practices page (mostly updated links into patterns page)

---

WAI Preview Link (Last built on Thu, 27 Mar 2025 13:06:14 GMT).

[jongund]

@howard-e @mcking65
Hi Howard,
What do I need to do to get a preview of this pull request?
Thanks,
Jon

[jongund]

@howard-e

Hi Howard, I updated the URLs for landmark information in the index and coverage scripts.
How do I run them in this pull request to see if they generate the correct URLs?

[howard-e]

@howard-e

Hi Howard, I updated the URLs for landmark information in the index and coverage scripts. How do I run them in this pull request to see if they generate the correct URLs?

Hey @jongund, the generated link failed to build because of an unexpected structure, with the following message: "Error: Expected pattern landmarks to have an Example(s) section".

This comes from wai-aria-practices' transformPattern.js builder logic which expects that there is a section element which contains an h2, with Example (or Examples) as the text, to then apply a style, examples-section. This is the current structure for all the patterns and their example sections on the WAI-APG website. But they have their own individual pages.

We could probably replicate that structure with these landmark patterns but I assume this proposed change here is intentional in how it's structured. So I've submitted wai-aria-practices#382 to relax this constraint instead.

[howard-e]

... I updated the URLs for landmark information in the index and coverage scripts. How do I run them in this pull request to see if they generate the correct URLs?

The coverage report build step result matches exactly except for a newline being added at the end of the coverage-and-quality-report.html document. Perhaps your code editor is automatically doing this if you have the file open? Removing the new line at the end or just re-running npm run coverage-report without the file being open should do the trick.

[howard-e]

... I've submitted wai-aria-practices#382 to relax this constraint instead.

@jongund w3c/wai-aria-practices#382 has been merged now so the Landmarks page renders in the generated preview now.

Just the coverage report build step issue exists. #3216 (comment) should still resolve this

[jongund]

@mcking65
In the navigation region examples we show links in unordered lists, is that still the best practice or should we remove the unordered list makeup?

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 3216 - Landmark pattern changes.

The full IRC log of that discussion

<jugglinmike> Topic: PR 3216 - Landmark pattern changes
<jugglinmike> github: https://github.com//pull/3216
<jugglinmike> Matt_King: I think we'll skip this for now because jongunderson isn't here today

[jongund]

@mcking65
Updated pull request to include search element as a way to define a search landmark region