fix(AnchoredOverlay): Omit aria-label and aria-labelledby from renderAnchor props (#6973)

Author: jonrohan

.changeset/poor-ducks-attack.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(AnchoredOverlay): Omit aria-label and aria-labelledby from renderAnchor props

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -20,7 +20,9 @@ interface AnchoredOverlayPropsWithAnchor {
    * A custom function component used to render the anchor element.
    * Will receive the selected text as `children` prop when an item is activated.
    */
-  renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element
+  renderAnchor: <T extends Omit<React.HTMLAttributes<HTMLElement>, 'aria-label' | 'aria-labelledby'>>(
+    props: T,
+  ) => JSX.Element
 
   /**
    * An override to the internal ref that will be spread on to the renderAnchor

packages/react/src/AnchoredOverlay/AnchoredOverlay.types.test.tsx

@@ -0,0 +1,10 @@
+import {InfoIcon} from '@primer/octicons-react'
+import {AnchoredOverlay, IconButton} from '..'
+
+export function itemWithIconElements() {
+  return (
+    <AnchoredOverlay open={true} renderAnchor={props => <IconButton {...props} icon={InfoIcon} aria-label="Info" />}>
+      <p>GitHub</p>
+    </AnchoredOverlay>
+  )
+}

packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx

@@ -140,8 +140,8 @@ export const HeightInitialWithUnderflowingItemsAfterFetch = () => {
     <FormControl>
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+        renderAnchor={({children, ...anchorProps}) => (
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children}
           </Button>
         )}
@@ -172,8 +172,8 @@ export const AboveTallBody = () => {
     <FormControl>
       <FormControl.Label>Labels</FormControl.Label>
       <SelectPanel
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+        renderAnchor={({children, ...anchorProps}) => (
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children}
           </Button>
         )}

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

@@ -582,13 +582,8 @@ export const AsyncFetch: StoryObj<SelectPanelProps> = {
       <SelectPanel
         title="Select labels"
         subtitle="Use labels to organize issues and pull requests"
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button
-            trailingAction={TriangleDownIcon}
-            aria-labelledby={` ${ariaLabelledBy}`}
-            {...anchorProps}
-            aria-haspopup="dialog"
-          >
+        renderAnchor={({children, ...anchorProps}) => (
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -656,8 +651,8 @@ export const CustomisedNoInitialItems = () => {
       <ToggleSwitch onClick={onClick} checked={isError} aria-labelledby="toggle" />
       <SelectPanel
         title="Set projects"
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button trailingAction={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+        renderAnchor={({children, ...anchorProps}) => (
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
             {children ?? 'Select Labels'}
           </Button>
         )}
@@ -709,13 +704,8 @@ export const CustomisedNoResults: StoryObj<typeof SelectPanel> = {
       <SelectPanel
         title="Select labels"
         subtitle="Use labels to organize issues and pull requests"
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-          <Button
-            trailingAction={TriangleDownIcon}
-            aria-labelledby={` ${ariaLabelledBy}`}
-            {...anchorProps}
-            aria-haspopup="dialog"
-          >
+        renderAnchor={({children, ...anchorProps}) => (
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
             {children ?? 'Select Labels'}
           </Button>
         )}