ActionBar: Add a few fixes and tests (#4536)

* Add a few fixes and a test plan

* Add test for overflow

* Add overflow e2e test to actionbar

* Add tests

* Create mean-terms-bathe.md

* test(vrt): update snapshots

---------

Co-authored-by: pksjce <[email protected]>

Author: pksjce

.changeset/mean-terms-bathe.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ActionBar: Add a few fixes and relevant tests

.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-colorblind-linux.png

@@ -0,0 +1,54 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../../test-helpers/storybook'
+import {themes} from '../../test-helpers/themes'
+import {viewports} from '../../test-helpers/viewports'
+
+test.describe('ActionBar', () => {
+  test.describe('Default state', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-actionbar--comment-box',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          expect(await page.screenshot()).toMatchSnapshot(`drafts.ActionBar.CommentBox.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-actionbar--comment-box',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('ActionBar Interactions', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('Overflow interaction @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-actionbar--comment-box',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          const toolbarButtonSelector = `button[data-component="IconButton"]`
+          await expect(page.locator(toolbarButtonSelector)).toHaveCount(10)
+          await page.setViewportSize({width: viewports['primer.breakpoint.xs'], height: 768})
+          await expect(page.locator(toolbarButtonSelector)).toHaveCount(6)
+          const moreButtonSelector = `button[aria-label="More Comment box toolbar items"]`
+          await page.locator(moreButtonSelector).click()
+          await expect(page.locator('ul[role="menu"]>li')).toHaveCount(5)
+        })
+      })
+    }
+  })
+})

.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-dimmed-linux.png

@@ -68,7 +68,7 @@ export const CommentBox = (props: CommentBoxProps) => {
   const [value, setValue] = React.useState('')
   const [isOpen, setIsOpen] = React.useState(false)
   const buttonRef = React.useRef(null)
-  const toolBarLabel = `${ariaLabel} toolbar`
+  const toolBarLabel = `${ariaLabel ? ariaLabel : 'Comment box'} toolbar`
   return (
     <Box
       sx={{

.playwright/snapshots/components/drafts/ActionBar.test.ts-snapshots/drafts-ActionBar-CommentBox-dark-high-contrast-linux.png

@@ -299,7 +299,7 @@ export const ActionBarIconButton = forwardRef((props: ActionBarIconButtonProps,
     const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
     setChildrenWidth({text, width: domRect.width})
   }, [ref, setChildrenWidth])
-  return <IconButton ref={ref} size={size} {...props} variant="invisible" />
+  return <IconButton ref={ref} size={size} {...props} variant="invisible" unsafeDisableTooltip={false} />
 })
 
 const sizeToHeight = {