From aad82632d32a44b5715ca81df20fe67f42815e10 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Mon, 15 Apr 2024 14:35:07 +1000
Subject: [PATCH 1/6] Make aria-label mandatory

---
 packages/react/src/drafts/ActionBar/ActionBar.stories.tsx | 8 ++++----
 packages/react/src/drafts/ActionBar/ActionBar.test.tsx    | 2 +-
 packages/react/src/drafts/ActionBar/ActionBar.tsx         | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
index 350085304af..c9fa12edd13 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
@@ -30,7 +30,7 @@ export default {
 } as Meta<typeof ActionBar>
 
 export const Default = () => (
-  <ActionBar>
+  <ActionBar aria-label="Toolbar">
     <ActionBar.IconButton icon={BoldIcon} aria-label="Default"></ActionBar.IconButton>
     <ActionBar.IconButton icon={ItalicIcon} aria-label="Default"></ActionBar.IconButton>
     <ActionBar.IconButton icon={CodeIcon} aria-label="Default"></ActionBar.IconButton>
@@ -48,7 +48,7 @@ export const Default = () => (
 )
 
 export const SmallActionBar = () => (
-  <ActionBar size="small">
+  <ActionBar size="small" aria-label="Toolbar">
     <ActionBar.IconButton icon={BoldIcon} aria-label="Default"></ActionBar.IconButton>
     <ActionBar.IconButton icon={ItalicIcon} aria-label="Default"></ActionBar.IconButton>
     <ActionBar.IconButton icon={CodeIcon} aria-label="Default"></ActionBar.IconButton>
@@ -103,7 +103,7 @@ export const CommentBox = () => {
           />
         </Box>
         <Box sx={{width: '50%'}}>
-          <ActionBar>
+          <ActionBar aria-label="Toolbar">
             <ActionBar.IconButton icon={HeadingIcon} aria-label="Heading"></ActionBar.IconButton>
             <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
             <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
@@ -152,7 +152,7 @@ export const ActionBarWithMenuTrigger = () => {
 
   return (
     <Box>
-      <ActionBar>
+      <ActionBar aria-label="Toolbar">
         <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
         <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
         <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
diff --git a/packages/react/src/drafts/ActionBar/ActionBar.test.tsx b/packages/react/src/drafts/ActionBar/ActionBar.test.tsx
index 340a8d0238c..0b8195dd230 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.test.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.test.tsx
@@ -7,7 +7,7 @@ import ActionBar from './'
 import {BoldIcon, CodeIcon, ItalicIcon, LinkIcon} from '@primer/octicons-react'
 
 const SimpleActionBar = () => (
-  <ActionBar>
+  <ActionBar aria-label="Toolbar">
     <ActionBar.IconButton icon={BoldIcon} aria-label="Default"></ActionBar.IconButton>
     <ActionBar.IconButton icon={ItalicIcon} aria-label="Default"></ActionBar.IconButton>
     <ActionBar.Divider />
diff --git a/packages/react/src/drafts/ActionBar/ActionBar.tsx b/packages/react/src/drafts/ActionBar/ActionBar.tsx
index 0844183319a..cd6b8aed37b 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.tsx
@@ -38,7 +38,7 @@ type Size = 'small' | 'medium' | 'large'
 
 export type ActionBarProps = {
   size?: Size
-  'aria-label'?: React.AriaAttributes['aria-label']
+  'aria-label': React.AriaAttributes['aria-label']
   children: React.ReactNode
 }
 

From f450e02dc106306af6cbe015f8773c97abe4d859 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 16 Apr 2024 11:22:43 +1000
Subject: [PATCH 2/6] Add dev run time check for aria-label for additional
 guard

---
 .../src/drafts/ActionBar/ActionBar.stories.tsx     | 14 +++++++++-----
 packages/react/src/drafts/ActionBar/ActionBar.tsx  | 10 +++++++++-
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
index c9fa12edd13..56e268b4bfc 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
@@ -59,7 +59,10 @@ export const SmallActionBar = () => (
   </ActionBar>
 )
 
-export const CommentBox = () => {
+type CommentBoxProps = {'aria-label': string}
+
+export const CommentBox = (props: CommentBoxProps) => {
+  const {'aria-label': ariaLabel} = props
   const [view, setView] = React.useState<MarkdownViewMode>('edit')
   const loadPreview = React.useCallback(() => {
     //console.log('loadPreview')
@@ -67,6 +70,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 (
     <Box
       sx={{
@@ -103,7 +107,7 @@ export const CommentBox = () => {
           />
         </Box>
         <Box sx={{width: '50%'}}>
-          <ActionBar aria-label="Toolbar">
+          <ActionBar aria-label={toolBarLabel}>
             <ActionBar.IconButton icon={HeadingIcon} aria-label="Heading"></ActionBar.IconButton>
             <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
             <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
@@ -242,7 +246,7 @@ export const ActionbarToggle = () => {
       <Box sx={bottomSectionStyles}>
         {showEditView ? (
           <Box>
-            <CommentBox />
+            <CommentBox aria-label="Comment box" />
             <Box sx={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', p: 2, gap: 2}}>
               <Button
                 variant="primary"
@@ -273,7 +277,7 @@ export const MultipleActionBars = () => {
       <Box sx={{p: 3}}>
         {showFirstCommentBox ? (
           <Box>
-            <CommentBox key={1} />
+            <CommentBox aria-label="First Comment Box" />
             <Box sx={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', p: 2, gap: 2}}>
               <Button
                 variant="primary"
@@ -295,7 +299,7 @@ export const MultipleActionBars = () => {
       <Box sx={{p: 3}}>
         {showSecondCommentBox ? (
           <Box>
-            <CommentBox key={2} />
+            <CommentBox aria-label="Second Comment Box" />
             <Box sx={{display: 'flex', flexDirection: 'row', justifyContent: 'flex-end', p: 2, gap: 2}}>
               <Button
                 variant="primary"
diff --git a/packages/react/src/drafts/ActionBar/ActionBar.tsx b/packages/react/src/drafts/ActionBar/ActionBar.tsx
index cd6b8aed37b..9e6e69598b6 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.tsx
@@ -1,5 +1,5 @@
 import type {RefObject, MutableRefObject} from 'react'
-import React, {useState, useCallback, useRef, forwardRef} from 'react'
+import React, {useState, useEffect, useCallback, useRef, forwardRef} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
 import {ActionList} from '../../ActionList'
 import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
@@ -15,6 +15,7 @@ import {IconButton} from '../../Button'
 import Box from '../../Box'
 import {ActionMenu} from '../../ActionMenu'
 import {useFocusZone, FocusKeys} from '../../hooks/useFocusZone'
+import {invariant} from '../../utils/invariant'
 
 type ChildSize = {
   text: string
@@ -231,6 +232,13 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     focusOutBehavior: 'wrap',
   })
 
+  if (__DEV__) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      invariant(ariaLabel, 'Use the `aria-label` prop to provide an accessible label for assistive technology')
+    })
+  }
+
   return (
     <ActionBarContext.Provider value={{size, setChildrenWidth}}>
       <Box ref={navRef} sx={navStyles}>

From 5de32244d997624a512ddf7a5321c686519790ec Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 16 Apr 2024 15:13:31 +1000
Subject: [PATCH 3/6] Add aria-labelledby or aria-label to be present. Removed
 the runtime check for now

---
 packages/react/src/drafts/ActionBar/ActionBar.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/drafts/ActionBar/ActionBar.tsx b/packages/react/src/drafts/ActionBar/ActionBar.tsx
index 9e6e69598b6..32a971203c0 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.tsx
@@ -37,11 +37,14 @@ small (28px), medium (32px), large (40px)
 */
 type Size = 'small' | 'medium' | 'large'
 
+type A11yProps =
+  | {'aria-label': React.AriaAttributes['aria-label']; 'aria-labelledby'?: undefined}
+  | {'aria-label'?: undefined; 'aria-labelledby': React.AriaAttributes['aria-labelledby']}
+
 export type ActionBarProps = {
   size?: Size
-  'aria-label': React.AriaAttributes['aria-label']
   children: React.ReactNode
-}
+} & A11yProps
 
 export type ActionBarIconButtonProps = IconButtonProps
 
@@ -232,13 +235,6 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
     focusOutBehavior: 'wrap',
   })
 
-  if (__DEV__) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-      invariant(ariaLabel, 'Use the `aria-label` prop to provide an accessible label for assistive technology')
-    })
-  }
-
   return (
     <ActionBarContext.Provider value={{size, setChildrenWidth}}>
       <Box ref={navRef} sx={navStyles}>

From 1b0dc579489ed86080da9c2e4a7862bd87fb8857 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Wed, 17 Apr 2024 13:08:10 +1000
Subject: [PATCH 4/6] Add proper aria-label in default story

---
 .../drafts/ActionBar/ActionBar.stories.tsx    | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
index 56e268b4bfc..27d5ce0173e 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
@@ -31,31 +31,29 @@ export default {
 
 export const Default = () => (
   <ActionBar aria-label="Toolbar">
-    <ActionBar.IconButton icon={BoldIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={ItalicIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={CodeIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={LinkIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
     <ActionBar.Divider />
-    <ActionBar.IconButton icon={FileAddedIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={FileAddedIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={FileAddedIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={FileAddedIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={QuoteIcon} aria-label="Insert Quote"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
   </ActionBar>
 )
 
 export const SmallActionBar = () => (
   <ActionBar size="small" aria-label="Toolbar">
-    <ActionBar.IconButton icon={BoldIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={ItalicIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={CodeIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={LinkIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
     <ActionBar.Divider />
-    <ActionBar.IconButton icon={FileAddedIcon} aria-label="Default"></ActionBar.IconButton>
-    <ActionBar.IconButton icon={SearchIcon} aria-label="Default"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
+    <ActionBar.IconButton icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
   </ActionBar>
 )
 

From e42acd2d4974533c95be2f3c5c5a139807d459ab Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 18 Apr 2024 11:41:24 +1000
Subject: [PATCH 5/6] Fix lint issues

---
 packages/react/src/drafts/ActionBar/ActionBar.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/src/drafts/ActionBar/ActionBar.tsx b/packages/react/src/drafts/ActionBar/ActionBar.tsx
index 32a971203c0..8b4bdbd155a 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.tsx
@@ -1,5 +1,5 @@
 import type {RefObject, MutableRefObject} from 'react'
-import React, {useState, useEffect, useCallback, useRef, forwardRef} from 'react'
+import React, {useState, useCallback, useRef, forwardRef} from 'react'
 import {KebabHorizontalIcon} from '@primer/octicons-react'
 import {ActionList} from '../../ActionList'
 import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect'
@@ -15,7 +15,6 @@ import {IconButton} from '../../Button'
 import Box from '../../Box'
 import {ActionMenu} from '../../ActionMenu'
 import {useFocusZone, FocusKeys} from '../../hooks/useFocusZone'
-import {invariant} from '../../utils/invariant'
 
 type ChildSize = {
   text: string

From c3ea83ae28d9d3d1f88a2603dcc0fdd1f6733c0c Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Thu, 18 Apr 2024 11:42:04 +1000
Subject: [PATCH 6/6] Create lucky-zebras-stare.md

---
 .changeset/lucky-zebras-stare.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/lucky-zebras-stare.md

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