Replace aria-practices.html with a new content tree and move examples into the patterns branch of the tree

[mcking65]

Resolves #2418. The plan for this PR is described in #2418.

Commit Description for Final Squash and Merge

• Moves the HTML source for each pattern from a section in /aria-practices.html into its own file in a directory for the pattern, e.g., patterns/button/button-pattern.html.
• moves all example files from the /examples directory into an examples subdirectory under its associated pattern, e.g., patterns/button/examples/button.html.
• Moves the HTML source for each practice from a section in /aria-practices.html into its own file in a directory for the practice, e.g., practices/grid-and-table-properties/grid-and-table-properties-practice.html
• Moves the HTML source for each section of the about page from a section in /aria-practices.html into about/about.html.
• Renames HTML files that were named "index.html" to a more appropriate name, except for the page that serves as the index.
• For consistency, removes a superfluous directory from the path for two of the tree view examples.
• Makes link text more consistent, e.g., links to patterns no longer contain the word "design".
• Makes styling for warnings, advisories, and notes more consistent.
• Removes dependencies on respec for resolution of links to external resources, such as the ARIA specification.
• Revises GitHub workflows and supporting scripts to support the new content structure.

Review Instructions and Plan

This PR restructures all content but does not change design, function, or content. So, the objective of review is to ensure that pages look the same in preview as they do in the current production site.

Note: There are a few very minor editorial consistency changes to content. For instance, the word "design" was removed from the text of links to patterns.

We want all 90-some pages of the APG looked at briefly by 2 reviewers. With 6 reviewers, each person need look at only 30 pages, spending 2 to 3 minutes per page. If issues are not found, it should go quickly. If issues are found, please comment in this PR. You do not need to comment on the specific line in the specific file. If your assigned pages look good, please submit an approving review from the files tab.

Instructions

When reviewing:

• Visually scan a page in preview, scan the same page in production, and look for any presentation differences.
• On example pages, using a mouse, perform a sniff test of the example's pointer functionality.
• Randomly test a few links; if possible, test links to different types of targets, e.g., other APG pages, ARIA spec references.

That's it. It's a sanity check. We have run automated testing of links and the regression tests on all examples.

Reviewer page assignments

Bucket 1: (@jongund and @curtbellew )

• Patterns and examples: Accordion through dialog-modal
• Practices:
  • Read This First
  • Landmark Regions (including landmark example pages)
• Home page

Bucket 2: (@helen-libit and @a11ydoer)

• Patterns and examples: Disclosure through Radio
• Practices:
  • Providing Accessible Names and Descriptions
  • Developing a Keyboard Interface
  • Grid and Table Properties
• Index page

Bucket 3: (@jongund and @shirsha)

• Patterns and examples: Slider through Window Splitter
• Practices:
  • Communicating Value and Limits for Range Widgets
  • Structural Roles
  • Hiding Semantics
• About page

[alflennik]

@mcking65 I can echo the excitement at potentially releasing this in a few days! The practices order has been updated: https://deploy-preview-173--aria-practices.netlify.app/aria/apg/practices/

[mcking65]

@alflennik order in practices is good now, thank you!!

[a11ydoer]

@alflennik Do you think all the issues were resolved except the editorial ones or do we need to discuss this at APG meeting?

[helen-libit]

Checked again - looks good to me!

[helen-libit]

Double checked the "Practices => Developing a Keyboard Interface" page, below is what I see:

There are two links on the Preview version:

• Link 1: HTML tabindex - it goes to an "HTML Living Standard" page on the WHATWG site.
• Link 2: SVG2 tabindex - it goes to the W3C's SVG2 specification.

There are four links on the Production site:

• Link 1: HTML - it goes to the HTML reference on the About page in the ARIA APG's website.
• Link 2: tabindex - it goes to an "HTML Living Standard" page on the WHATWG site.
• Link 3: SVG2 - it goes to the SVG2 reference on the About page in the ARIA APG's website.
• Link 4: tabindex - it goes to the W3C's SVG specification.

[mcking65]

Thank you @helen-libit!

Double checked the "Practices => Developing a Keyboard Interface" page, below is what I see:

There are two links on the Preview version:

• Link 1: HTML tabindex - it goes to an "HTML Living Standard" page on the WHATWG site.
• Link 2: SVG2 tabindex - it goes to the W3C's SVG2 specification.

There are four links on the Production site:

• Link 1: HTML - it goes to the HTML reference on the About page in the ARIA APG's website.
• Link 2: tabindex - it goes to an "HTML Living Standard" page on the WHATWG site.
• Link 3: SVG2 - it goes to the SVG2 reference on the About page in the ARIA APG's website.
• Link 4: tabindex - it goes to the W3C's SVG specification.

I think it is fine to keep it the way we have it in the preview. The link to the "references" section is a hold over from the TR doc and doesn't serve any real purpose. In the new about section, the "references" is going to become a "related specifications" page or something of that ilc.

[mcking65]

@a11ydoer @jongund, the only thing left to double check is that bugs reported by @jongund are resolved (just the ones that are directly related to the restructure).

I'd like to merge tomorrow morning.

[mcking65]

@alflennik thank you for the rename of index.html in landmark examples!

[a11ydoer]

@mcking65 @alflennik

Regarding @jongund feedback - 1)Carousel images are now shown. 2) Editable Combobox without Autocomplete example does not have calendar dialog. However, when I checked the example which has calendar diaglog, the calendar styling looks good.

Attention: Editable Combobox with Grid Popup Example is missing one colunm. "The grid that presents suggested values has two columns. Each row of the grid represents one suggestion; column one contains the name of the fruit or vegetable and column two identifies whether it is a fruit or vegetable."

Currently it has only one columns is shown in deploy preview page. Pleaes help to confirm this, @mcking65 @jongund and @helen-libit

https://deploy-preview-173--aria-practices.netlify.app/aria/apg/patterns/combobox/examples/grid-combo/

In the code, the second column has class hidden. <div aria-labelledby="ex1-label" role="grid" id="ex1-grid" class="grid hidden"></div>

[a11ydoer]

@mcking65 @jongund
I realized that Editable Combobox with Grid Popup Example was changed from previous two distinctive two colunm design. There ARE two columns in one row in the code.

Tomato

Fruit

I see the second grid cell, showing Tomato being Fruit , is hidden till the value is typed or chosen. I am having a hard time to think of the use case of this example because when the input value is chosen, either fruit or vegetable information is disappeared in the second column.

As far as this is the intention of the pattern example, we can review this design later via another issue filing.

[alflennik]

@a11ydoer For what it's worth I took a look at the example on production and the example preview and what I'm seeing in the example appears to be identical, including with a screen reader. In both grid popups there seem to be two columns. But it's definitely possible I'm missing something. @mcking65 do you see the issue?

[mcking65]

I will check at 11:00 pacific

[mcking65]

1. I loaded Preview version of of Editable Combobox with Grid Popup Example | APG | WAI | W3C
2. Typed 'a' in the combobox.
3. pressed down arrow to 'apple'
   pressed right arrow and the second column 'fruit' is read. Inspecting with the JAWS cursor, it also appears to be visible on screen, but that is difficult for me to verify.

I repeated the above in the production version of Editable Combobox with Grid Popup Example | APG | WAI | W3C, and I don't note any differences.

@a11ydoer, if there is an issue with this example not related to the restructure, please raise a separate issue and let's discuss. We do have a few open issues related to this example in the combobox project, so please review those..

[mcking65]

Thank you for all for the work on this!! I am moving forward with the squash and merge using the commit description I put in the top comment. After merge, we have a few more hours to review in the preview of the main branch and then we will also have a preview of the publication branch in the other repository.