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

Preview new Landmarks Pattern Page

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

---

WAI Preview Link failed to build on 'Update site files' step. (Last tried on Thu, 30 Jan 2025 17:43:52 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?