diff --git a/.changeset/flat-ears-wink.md b/.changeset/flat-ears-wink.md new file mode 100644 index 00000000000..783149846be --- /dev/null +++ b/.changeset/flat-ears-wink.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +In `ActionBar`, `aria-label` now gets added to the `role="toolbar"` element. diff --git a/packages/react/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx index 91c24455431..53a7d6bc956 100644 --- a/packages/react/src/ActionBar/ActionBar.stories.tsx +++ b/packages/react/src/ActionBar/ActionBar.stories.tsx @@ -21,8 +21,8 @@ export default meta type Story = StoryObj export const Playground: Story = { - render: args => ( - + render: ({'aria-labelledby': _, ...args}) => ( + diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx index ed9f3045913..6dcc34d81b7 100644 --- a/packages/react/src/ActionBar/ActionBar.tsx +++ b/packages/react/src/ActionBar/ActionBar.tsx @@ -151,7 +151,14 @@ const getMenuItems = ( } export const ActionBar: React.FC> = 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(() => new Map()) @@ -225,6 +232,7 @@ export const ActionBar: React.FC> = prop className={styles.List} style={{gap: `${ACTIONBAR_ITEM_GAP}px`}} aria-label={ariaLabel} + aria-labelledby={ariaLabelledBy} > {children} {menuItemIds.size > 0 && (