Add styles and index support for experimental content #2836

Develop support for example pages that include a draft ARIA feature that is still a work in progress. These pages will enable the accessibility community to develop support for the experimental feature but will clearly indicate their content is intended to be used only for that purpose.

Design Objectives

1. Typical users will:
   • not unintentionally discover experimental content.
   • Not mistake experimental content for normal content
2. Anyone who needs to locate experimental content will be able to do so.

Overview of Implementation proposal

There are two types of changes included in this implementation: editorial and infrastructure. Editors are responsible for ensuring the editorial changes are made to any example page that includes experimental content. The infrastructure changes will be baked into the build process.

Together, the infra and editorial changes will satisfy the design objectives by:

1. Providing a different example usage warning that is open by default under "Read This First". Both content and styling could be different.
2. Including the word "Experimental" in the page title and several headings.
3. Excluding the experimental content from the normal index tables and instead listing it separately at the bottom of the index page.
4. Not providing links to experimental example pages from pattern pages or normal example pages.

Editorial changes

1. On any page with experimental content, add the attribute data-content-phase="experimental" to the main element.
2. Use the word "Experimental" in the page title tag and H1 element.
3. Change the heading "About This Example" to "About This Experimental Example".
4. In the about this example section, lead with the objectives of the experimental content and estimated high-level timeline for maturity of the feature, if successful.
5. Change the "Example" heading to "Experimental Example".

Infrastructure changes

1. In the "Read This First" section of example pages, replace the standard example usage warning with one that is open by default and warns users about the nature and purpose of experimental content by making the following changes:
   • Write an experimental-example-usage-warning.html that is similar to content/shared/templates/example-usage-warning.html. In Include the open attribute on the details element.
   • Modify the addExampleUsageWarning function in content/shared/js/app.js to use the experimental-example-usage-warning.html content instead of example-usage-warning.html on pages that have data-content-phase="experimental.
   • Possibly modify CSS to make the warning even more prominent?
2. Modify scripts/reference-tables.js to:
   • Exclude any pages that include data-content-phase="experimental" from the index tables that list examples by role, state, and property.
   • At the bottom of the index page, add a section labeled "Experimental Content" that provides a list of links to the pages that include experimental content.