diff --git a/.changeset/calm-clouds-impress.md b/.changeset/calm-clouds-impress.md new file mode 100644 index 00000000000..60c598bde5c --- /dev/null +++ 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 index b30a969a71b..c8dbccbe3ac 100644 --- 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 index b90bad313a8..a2ee1e296a2 100644 --- 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 index 6468b0de750..d367f7b8040 100644 --- 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() { Component - Status + Status + Accessibility Description {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} - + + + {a11yReviewed ? ( + + ) : ( + Review pending + )} + {description} )