docs: updated accessibility section

projects/documentation/content/_includes/component.njk

@@ -19,6 +19,9 @@ layout: layout.njk
       {% endfor %}
       </sp-tabs>
     </main>
+    {% if isComponentTemplate %}
+    {% include "partials/accessibility.njk" %}
+    {% endif %}
     {% include "partials/sidenav.njk" %}
 </docs-page>
 <script type="module" src="../../src/index.js"></script>

projects/documentation/content/_includes/partials/accessibility.njk

@@ -0,0 +1,81 @@
+ <div class="headerContainer">
+    <h2 id="accessibility" tabindex="-1" class="spectrum-Heading spectrum-Heading--sizeM">Accessibility testing status&nbsp;<sp-link class="header-anchor" href="#accessibility" aria-label="Accessibility" dir="ltr" focusable="">#</sp-link></h2>      
+    <sp-divider size="l" dir="ltr" role="separator"></sp-divider>
+</div>
+    <sp-table quiet>
+    <sp-table-head>
+        <sp-table-head-cell>Component</sp-table-head-cell>
+        <sp-table-head-cell>Accessibility test</sp-table-head-cell>
+        <sp-table-head-cell>Accessibility Contract</sp-table-head-cell>
+        <sp-table-head-cell>Status</sp-table-head-cell>
+    </sp-table-head>
+    <sp-table-body>
+        <sp-table-row value="row1">
+            <sp-table-cell><sp-link href="https://opensource.adobe.com/spectrum-web-components/components/{{componentName}}/#usage">{{componentName}}</sp-link></sp-table-cell>
+            <sp-table-cell>
+                Default state
+            </sp-table-cell>
+            <sp-table-cell>Test(s) that ensure the initial render state of a component is accessible.</sp-table-cell>
+            <sp-table-cell>
+                <sp-badge variant="positive" id="trigger-1">
+                    Tested
+                </sp-badge>
+                <sp-overlay trigger="trigger-1@hover" placement="bottom">
+                    <sp-tooltip>
+                        Passes all automated tests with no reported accessibility violations.
+                    </sp-tooltip>
+                </sp-overlay>
+            </sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row2">
+            <sp-table-cell></sp-table-cell>
+            <sp-table-cell>
+                Advanced states
+            </sp-table-cell>
+            <sp-table-cell>
+                    Tests that ensure additional states of the component are accessible. 
+                    This could be interactive states of a component or its multiple variants.
+            </sp-table-cell>
+            <sp-table-cell><sp-badge variant="positive" id="trigger-2">Tested</sp-badge>
+            <sp-overlay trigger="trigger-2@hover" placement="bottom">
+                <sp-tooltip>
+                    Passes all automated tests with no reported accessibility violations.
+                </sp-tooltip>
+            </sp-overlay>
+            </sp-table-cell>
+        </sp-table-row>
+         <sp-table-row value="row2">
+            <sp-table-cell></sp-table-cell>
+            <sp-table-cell>
+            Keyboard navigation
+            </sp-table-cell>
+            <sp-table-cell>
+                    Tests that ensure focus is properly managed, and all interactive functions of a component have a proper keyboard-accessible equivalent.
+            </sp-table-cell>
+            <sp-table-cell><sp-badge variant="positive" id="trigger-3">Tested</sp-badge>
+            <sp-overlay trigger="trigger-3@hover" placement="bottom">
+                <sp-tooltip>
+                    Passes all automated tests with no reported accessibility violations.
+                </sp-tooltip>
+            </sp-overlay>
+            </sp-table-cell>
+        </sp-table-row>
+        <sp-table-row value="row3">
+            <sp-table-cell></sp-table-cell>
+            <sp-table-cell>
+            Screen reader
+            </sp-table-cell>
+            <sp-table-cell>
+                    This manual testing ensures that the visual information on the screen 
+                    is properly conveyed and read correctly by screen readers such as JAWS, VoiceOver, and NVDA.</sp-table-cell>
+            <sp-table-cell>
+            <sp-badge variant="indigo" id="trigger-4">Manually tested</sp-badge>
+            <sp-overlay trigger="trigger-4@hover" placement="bottom">
+                <sp-tooltip>
+                    A human has manually tested this component, e.g. screen reader testing.
+                </sp-tooltip>
+            </sp-overlay>
+            </sp-table-cell>
+        </sp-table-row>
+    </sp-table-body>
+</sp-table>

projects/documentation/scripts/copy-component-docs.js

@@ -210,6 +210,7 @@ export async function processREADME(mdPath) {
     }export default {
     hasDemoControls: ${hasArgs},
     hasDemoTemplate: ${hasTemplate},
+    isComponentTemplate: ${isComponent},
     deprecationNotice: ${JSON.stringify(deprecationNotice)},
     ${hasArgs ? 'demoControls: Object.values(argTypes),' : ''}
 };