Pass aria-label prop to ActionBar toolbar (#6877)

Author: mperrotti

.changeset/flat-ears-wink.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+In `ActionBar`, `aria-label` now gets added to the `role="toolbar"` element.

packages/react/src/ActionBar/ActionBar.stories.tsx

@@ -21,8 +21,8 @@ export default meta
 type Story = StoryObj<typeof ActionBar>
 
 export const Playground: Story = {
-  render: args => (
-    <ActionBar {...args}>
+  render: ({'aria-labelledby': _, ...args}) => (
+    <ActionBar {...args} aria-label="Toolbar">
       <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
       <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
       <ActionBar.Divider />

packages/react/src/ActionBar/ActionBar.tsx

@@ -151,7 +151,14 @@ const getMenuItems = (
 }
 
 export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = props => {
-  const {size = 'medium', children, 'aria-label': ariaLabel, flush = false, className} = props
+  const {
+    size = 'medium',
+    children,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
+    flush = false,
+    className,
+  } = props
 
   const [childRegistry, setChildRegistry] = useState<ChildRegistry>(() => new Map())
 
@@ -225,6 +232,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
           className={styles.List}
           style={{gap: `${ACTIONBAR_ITEM_GAP}px`}}
           aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
         >
           {children}
           {menuItemIds.size > 0 && (