Add template/guidelines for component a11y docs

[thatblindgeye]

Is this a new page or a change to an existing one?
Change to accessibility page for components

Describe the enhancement

Currently the a11y docs for components are inconsistent, and the way to add docs to components is to view another component's docs. Having a template Markdown file would help ensure consistency across the component a11y docs by explaining both what the doc should include and what each section within is meant for.

This may also require some discussion as to what should be included in a component's a11y doc, and what should be included on the React/HTML page for a component. Currently the HTML page for components tend to include an accessibility section within the documentation section, though that seems to mainly be a table to show the a11y attributes and what they are for. This could cause some disparity for a11y documentation at a component level. Some possible solutions could include:

• Include any React or HTML specific props/attributes relating to a11y in their respective page, similar to how it is currently done with the HTML page, and also including brief, example specific notes on examples themselves with a link to the a11y page when needed. The a11y page would then be more general, including how different types of users should be able to understand/operate the component, more detail about specific props/attributes from the React/HTML pages, etc.
  • For the React page, this is a little trickier since it might mean duplicating mentions of props in an a11y section and also in the props section that gets rendered.
• Have all a11y documentation live within the Accessibility page. This would require moving current a11y documentation on the HTML page for components as well as detailed notes for examples (instead a link on examples could be along the lines of "In this example, menuAppendTo="..." is passed in. For more information regarding this prop's use, see the [link to a11y page]").
• Keep things as-is, and simply have a template for the a11y page to show what the layout should look like and what sections should be used for.

Are there visuals for this enhancement? If applicable, please include examples for each state and for varying widths
Include screenshots or links to Marvel or other mockups.

Any other information?