Add accessible column in component statuses (#2258)

* Accessible variable to the Select and ActionMenu frontmatter * Accessible column in Component status
primer · Sep 27, 2022 · 270157a · 270157a
1 parent 8f86727
commit 270157a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 4 deletions.
diff --git a/.changeset/calm-clouds-impress.md b/.changeset/calm-clouds-impress.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Add new accessible frontmatter variable
diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx
@@ -2,6 +2,7 @@
 componentId: action_menu
 title: ActionMenu
 status: Beta
+a11yReviewed: true
 source: https://github.com/primer/react/tree/main/src/ActionMenu.tsx
 storybook: '/react/storybook?path=/story/composite-components-actionmenu'
 description: An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.

diff --git a/docs/content/Select.mdx b/docs/content/Select.mdx
@@ -3,6 +3,7 @@ componentId: select
 title: Select
 description: Use a select input when a user needs to select one option from a long list
 status: Alpha
+a11yReviewed: true
 source: https://github.com/primer/react/blob/main/src/Select.tsx
 storybook: '/react/storybook?path=/story/forms-form-controls-select--default'
 ---

diff --git a/docs/src/component-statuses.js b/docs/src/component-statuses.js
@@ -1,5 +1,5 @@
 import componentMetadata from '@primer/component-metadata'
-import {Link} from '@primer/react'
+import {Link, Label, Text} from '@primer/react'
 import StatusLabel from '@primer/gatsby-theme-doctocat/src/components/status-label'
 import Table from '@primer/gatsby-theme-doctocat/src/components/table'
 import {graphql, Link as GatsbyLink, useStaticQuery} from 'gatsby'
@@ -16,6 +16,7 @@ export function ComponentStatuses() {
               title
               status
               description
+              a11yReviewed
               componentId
             }
           }
@@ -36,14 +37,15 @@ export function ComponentStatuses() {
         <thead>
           <tr>
             <th align="left">Component</th>
-            <th align="left">Status</th>
+            <th align="center">Status</th>
+            <th align="center">Accessibility</th>
             <th align="left">Description</th>
           </tr>
         </thead>
         <tbody>
           {pages.map(page => {
             // eslint-disable-next-line prefer-const
-            let {title, status, description, componentId} = page.context.frontmatter
+            let {title, status, description, componentId, a11yReviewed} = page.context.frontmatter
 
             const component = componentMetadata.components[componentId]
 
@@ -60,9 +62,16 @@ export function ComponentStatuses() {
                     {title}
                   </Link>
                 </td>
-                <td valign="top">
+                <td align="center" valign="top" style={{whiteSpace: 'nowrap'}}>
                   <StatusLabel status={status} />
                 </td>
+                <td align="center" valign="top" style={{whiteSpace: 'nowrap'}}>
+                  {a11yReviewed ? (
+                    <Label variant="primary">Reviewed</Label>
+                  ) : (
+                    <Text sx={{color: 'fg.subtle'}}>Review pending</Text>
+                  )}
+                </td>
                 <td>{description}</td>
               </tr>
             )