diff --git a/.changeset/lucky-zebras-stare.md b/.changeset/lucky-zebras-stare.md new file mode 100644 index 00000000000..3b9b144ba03 --- /dev/null +++ b/.changeset/lucky-zebras-stare.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +ActionBar: Make it such that either aria-label or aria-labelledby is present diff --git a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx index 350085304af..27d5ce0173e 100644 --- a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx +++ b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx @@ -30,36 +30,37 @@ export default { } as Meta export const Default = () => ( - - - - - + + + + + - - - - - - - - + + + + + + ) export const SmallActionBar = () => ( - - - - - + + + + + - - + + ) -export const CommentBox = () => { +type CommentBoxProps = {'aria-label': string} + +export const CommentBox = (props: CommentBoxProps) => { + const {'aria-label': ariaLabel} = props const [view, setView] = React.useState('edit') const loadPreview = React.useCallback(() => { //console.log('loadPreview') @@ -67,6 +68,7 @@ export const CommentBox = () => { const [value, setValue] = React.useState('') const [isOpen, setIsOpen] = React.useState(false) const buttonRef = React.useRef(null) + const toolBarLabel = `${ariaLabel} toolbar` return ( { /> - + @@ -152,7 +154,7 @@ export const ActionBarWithMenuTrigger = () => { return ( - + @@ -242,7 +244,7 @@ export const ActionbarToggle = () => { {showEditView ? ( - +