Merge branch 'main' into siddharth/actionlist-keyboard

primer · Nov 15, 2021 · 5500790 · 5500790
2 parents f96d2ab + a2e195b
commit 5500790
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 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/docs/content/getting-started.md b/docs/content/getting-started.md
@@ -105,7 +105,7 @@ If you're rendering React components both server- and client-side, we suggest fo
 
 ## TypeScript
 
-Primer React includes TypeScript support and ships with its own typings. You will need still need to to install type typings for the peer dependencies if you import those in your own application code.
+Primer React includes TypeScript support and ships with its own typings. You will still need to install type definitions for the peer dependencies if you import those in your own application code.
 
 Once installed, you can import components and their prop type interfaces from the `@primer/components` package:
 

diff --git a/src/ActionList2/Item.tsx b/src/ActionList2/Item.tsx
@@ -202,13 +202,8 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
             aria-selected={selected}
             aria-disabled={disabled ? true : undefined}
             tabIndex={disabled || _PrivateItemWrapper ? undefined : 0}
-            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}
           >
             <ItemWrapper>

diff --git a/src/stories/ActionList2.stories.tsx b/src/stories/ActionList2.stories.tsx
@@ -159,13 +159,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 (
     <>
@@ -182,13 +186,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>
@@ -198,6 +202,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)