Bring inline description to be part of label (#1599)

primer · Nov 15, 2021 · a2e195b · a2e195b
1 parent 1b2f08d
commit a2e195b
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/.changeset/action-list-description-a11y.md b/.changeset/action-list-description-a11y.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+ActionList: Better labels and description for accessible ActionList.Item
diff --git a/src/ActionList2/Item.tsx b/src/ActionList2/Item.tsx
@@ -180,13 +180,8 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
             aria-selected={selected}
             aria-disabled={disabled ? true : undefined}
             tabIndex={disabled ? undefined : -1}
-            aria-labelledby={labelId}
-            aria-describedby={[
-              slots.InlineDescription && inlineDescriptionId,
-              slots.BlockDescription && blockDescriptionId
-            ]
-              .filter(Boolean)
-              .join(' ')}
+            aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`}
+            aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined}
             {...props}
           >
             <_PrivateItemWrapper>

diff --git a/src/stories/ActionList2.stories.tsx b/src/stories/ActionList2.stories.tsx
@@ -161,13 +161,17 @@ export function WithAvatar(): JSX.Element {
 }
 WithAvatar.storyName = 'With Avatar'
 
-const projects = [
-  {name: 'Primer Backlog', scope: 'GitHub'},
-  {name: 'Accessibility', scope: 'GitHub'},
-  {name: 'Octicons', scope: 'github/primer'},
-  {name: 'Primer React', scope: 'github/primer'}
+const labels = [
+  {name: 'blocked', color: '#86181d', description: 'Someone or something is preventing this from moving forward'},
+  {name: 'dependencies', color: '#0366d6', description: 'Pull requests that update a dependency file'},
+  {name: 'duplicate', color: '#cfd3d7', description: 'This issue or pull request already exists'},
+  {name: 'good first issue', color: '#7057ff', description: 'Good for newcomers'}
 ]
 
+const LabelColor: React.FC<{color: string}> = ({color}) => (
+  <Box sx={{backgroundColor: color, width: '14px', height: '14px', borderRadius: 3}} />
+)
+
 export function WithDescription(): JSX.Element {
   return (
     <>
@@ -184,13 +188,13 @@ export function WithDescription(): JSX.Element {
             </ActionList.Item>
           ))}
           <ActionList.Divider />
-          {projects.map((project, index) => (
+          {labels.map((label, index) => (
             <ActionList.Item key={index}>
               <ActionList.LeadingVisual>
-                <TableIcon />
+                <LabelColor color={label.color} />
               </ActionList.LeadingVisual>
-              {project.name}
-              <ActionList.Description variant="block">{project.scope}</ActionList.Description>
+              {label.name}
+              <ActionList.Description variant="block">{label.description}</ActionList.Description>
             </ActionList.Item>
           ))}
         </ActionList>
@@ -200,6 +204,13 @@ export function WithDescription(): JSX.Element {
 }
 WithDescription.storyName = 'With Description & Dividers'
 
+const projects = [
+  {name: 'Primer Backlog', scope: 'GitHub'},
+  {name: 'Accessibility', scope: 'GitHub'},
+  {name: 'Octicons', scope: 'github/primer'},
+  {name: 'Primer React', scope: 'github/primer'}
+]
+
 export function SingleSelectListStory(): JSX.Element {
   const [selectedIndex, setSelectedIndex] = React.useState(1)