Merge branch 'main' into revert-4464-revert-3582

.changeset/curvy-shrimps-agree.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Prevents inactive indicator icon/tooltip from appearing in ActionMenu items

.changeset/wild-actors-jam.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+StateLabel: Differentiate issue and pull request labels for screen readers

packages/react/src/ActionList/Item.tsx

@@ -345,7 +345,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
           <ItemWrapper {...wrapperProps}>
             <Selection selected={selected} />
             <VisualOrIndicator
-              inactiveText={inactiveText}
+              inactiveText={showInactiveIndicator ? inactiveText : undefined}
               itemHasLeadingVisual={Boolean(slots.leadingVisual)}
               labelId={labelId}
               loading={loading}
@@ -386,7 +386,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                   {slots.inlineDescription}
                 </ConditionalWrapper>
                 <VisualOrIndicator
-                  inactiveText={inactiveText}
+                  inactiveText={showInactiveIndicator ? inactiveText : undefined}
                   itemHasLeadingVisual={Boolean(slots.leadingVisual)}
                   labelId={labelId}
                   loading={loading}

packages/react/src/Avatar/Avatar.features.stories.tsx

@@ -7,36 +7,76 @@ export default {
   component: Avatar,
 } as Meta<typeof Avatar>
 
-export const Square = () => <Avatar square src="https://github.com/avatars/primer" />
+export const Square = () => <Avatar square alt="primer" src="https://github.com/avatars/primer" />
 
 export const Size = () => (
   <div>
-    <Avatar size={4} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={8} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={12} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={16} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={20} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={24} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={28} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={32} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={40} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={48} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={56} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={64} src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={4} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={8} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={12} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={16} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={20} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={24} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={28} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={32} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={40} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={48} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={56} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar size={64} alt="mona" src="https://github.com/avatars/u/92997159?v=4" />
   </div>
 )
 
 export const SizeResponsive = () => (
   <div>
-    <Avatar size={{narrow: 4, regular: 8, wide: 12}} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={{narrow: 8, regular: 12, wide: 16}} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={{narrow: 12, regular: 16, wide: 20}} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={{narrow: 16, regular: 20, wide: 24}} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={{narrow: 20, regular: 24, wide: 28}} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={{narrow: 24, regular: 28, wide: 32}} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={{narrow: 28, regular: 32, wide: 40}} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={{narrow: 32, regular: 40, wide: 48}} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={{narrow: 40, regular: 48, wide: 56}} src="https://github.com/avatars/u/92997159?v=4" />
-    <Avatar size={{narrow: 48, regular: 56, wide: 64}} src="https://github.com/avatars/u/92997159?v=4" />
+    <Avatar
+      size={{narrow: 4, regular: 8, wide: 12}}
+      alt="mona"
+      src="https://github.com/avatars/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 8, regular: 12, wide: 16}}
+      alt="mona"
+      src="https://github.com/avatars/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 12, regular: 16, wide: 20}}
+      alt="mona"
+      src="https://github.com/avatars/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 16, regular: 20, wide: 24}}
+      alt="mona"
+      src="https://github.com/avatars/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 20, regular: 24, wide: 28}}
+      alt="mona"
+      src="https://github.com/avatars/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 24, regular: 28, wide: 32}}
+      alt="mona"
+      src="https://github.com/avatars/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 28, regular: 32, wide: 40}}
+      alt="mona"
+      src="https://github.com/avatars/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 32, regular: 40, wide: 48}}
+      alt="mona"
+      src="https://github.com/avatars/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 40, regular: 48, wide: 56}}
+      alt="mona"
+      src="https://github.com/avatars/u/92997159?v=4"
+    />
+    <Avatar
+      size={{narrow: 48, regular: 56, wide: 64}}
+      alt="mona"
+      src="https://github.com/avatars/u/92997159?v=4"
+    />
   </div>
 )

packages/react/src/Avatar/Avatar.stories.tsx

@@ -24,6 +24,7 @@ export const Playground: StoryFn<Args> = args => {
       size={parseSizeFromArgs(args)}
       square={args.square}
       src="https://github.com/avatars/u/92997159?v=4"
+      alt="mona"
     />
   )
 }

packages/react/src/StateLabel/StateLabel.tsx

@@ -33,6 +33,19 @@ const octiconMap = {
   unavailable: AlertIcon,
 }
 
+const labelMap: Record<keyof typeof octiconMap, 'Issue' | 'Issue, not planned' | 'Pull request' | ''> = {
+  issueOpened: 'Issue',
+  pullOpened: 'Pull request',
+  issueClosed: 'Issue',
+  issueClosedNotPlanned: 'Issue, not planned',
+  pullClosed: 'Pull request',
+  pullMerged: 'Pull request',
+  draft: 'Pull request',
+  issueDraft: 'Issue',
+  pullQueued: 'Pull request',
+  unavailable: '',
+}
+
 const colorVariants = variant({
   prop: 'status',
   variants: {
@@ -120,7 +133,15 @@ function StateLabel({children, status, variant: variantProp = 'normal', ...rest}
   return (
     <StateLabelBase {...rest} variant={variantProp} status={status}>
       {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
-      {status && <Octicon {...octiconProps} icon={octiconMap[status] || QuestionIcon} sx={{mr: 1}} />}
+      {status && (
+        <Octicon
+          {...octiconProps}
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          icon={octiconMap[status] || QuestionIcon}
+          aria-label={labelMap[status]}
+          sx={{mr: 1}}
+        />
+      )}
       {children}
     </StateLabelBase>
   )

packages/react/src/StateLabel/__tests__/StateLabel.test.tsx

@@ -43,4 +43,14 @@ describe('StateLabel', () => {
   it('renders children', () => {
     expect(render(<StateLabel status="issueOpened">hi</StateLabel>)).toMatchSnapshot()
   })
+
+  it('adds label to icon', () => {
+    const screen1 = HTMLRender(<StateLabel status="issueOpened">Open</StateLabel>)
+    expect(screen1.getByLabelText('Issue')).toBeInTheDocument() // svg
+    expect(screen1.getByText('Open')).toBeInTheDocument() // text
+
+    const screen2 = HTMLRender(<StateLabel status="pullMerged">Merged</StateLabel>)
+    expect(screen2.getByLabelText('Pull request')).toBeInTheDocument() // svg
+    expect(screen2.getByText('Merged')).toBeInTheDocument() // text
+  })
 })

packages/react/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap

@@ -32,11 +32,12 @@ exports[`StateLabel renders children 1`] = `
   className="c0"
 >
   <svg
-    aria-hidden="true"
+    aria-label="Issue"
     className="c1"
     fill="currentColor"
     focusable="false"
     height={16}
+    role="img"
     style={
       {
         "display": "inline-block",
@@ -91,11 +92,12 @@ exports[`StateLabel respects the status prop 1`] = `
   className="c0"
 >
   <svg
-    aria-hidden="true"
+    aria-label="Issue"
     className="c1"
     fill="currentColor"
     focusable="false"
     height={16}
+    role="img"
     style={
       {
         "display": "inline-block",
@@ -149,11 +151,12 @@ exports[`StateLabel respects the status prop 2`] = `
   className="c0"
 >
   <svg
-    aria-hidden="true"
+    aria-label="Issue"
     className="c1"
     fill="currentColor"
     focusable="false"
     height={16}
+    role="img"
     style={
       {
         "display": "inline-block",
@@ -207,11 +210,12 @@ exports[`StateLabel respects the status prop 3`] = `
   className="c0"
 >
   <svg
-    aria-hidden="true"
+    aria-label="Issue, not planned"
     className="c1"
     fill="currentColor"
     focusable="false"
     height={16}
+    role="img"
     style={
       {
         "display": "inline-block",
@@ -262,11 +266,12 @@ exports[`StateLabel respects the status prop 4`] = `
   className="c0"
 >
   <svg
-    aria-hidden="true"
+    aria-label="Pull request"
     className="c1"
     fill="currentColor"
     focusable="false"
     height={16}
+    role="img"
     style={
       {
         "display": "inline-block",
@@ -317,11 +322,12 @@ exports[`StateLabel respects the status prop 5`] = `
   className="c0"
 >
   <svg
-    aria-hidden="true"
+    aria-label="Pull request"
     className="c1"
     fill="currentColor"
     focusable="false"
     height={16}
+    role="img"
     style={
       {
         "display": "inline-block",
@@ -372,11 +378,12 @@ exports[`StateLabel respects the variant prop 1`] = `
   className="c0"
 >
   <svg
-    aria-hidden="true"
+    aria-label="Issue"
     className="c1"
     fill="currentColor"
     focusable="false"
     height={16}
+    role="img"
     style={
       {
         "display": "inline-block",
@@ -430,11 +437,12 @@ exports[`StateLabel respects the variant prop 2`] = `
   className="c0"
 >
   <svg
-    aria-hidden="true"
+    aria-label="Issue"
     className="c1"
     fill="currentColor"
     focusable="false"
     height={16}
+    role="img"
     style={
       {
         "display": "inline-block",