minor: fix label and title on docs popover button (#2804)

Author: david-crespo

app/components/DocsPopover.tsx

@@ -36,17 +36,21 @@ export const DocsPopoverLink = ({ href, linkText }: DocsPopoverLinkProps) => (
 )
 
 type DocsPopoverProps = {
-  heading: React.ReactNode
+  heading: string
   icon: JSX.Element
   links: Array<DocsPopoverLinkProps>
   summary: string
 }
 
 export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps) => {
+  const title = `Learn about ${heading}`
   return (
     <Popover>
-      <PopoverButton className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}>
-        <Info16Icon aria-label="Links to docs" className="shrink-0" />
+      <PopoverButton
+        className={cn(buttonStyle({ size: 'sm', variant: 'ghost' }), 'w-8')}
+        title={title}
+      >
+        <Info16Icon aria-hidden className="shrink-0" />
       </PopoverButton>
       <PopoverPanel
         // popover-panel needed for enter animation
@@ -56,7 +60,7 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
         <div className="px-4">
           <h2 className="mt-4 flex items-center gap-1 text-sans-md">
             <div className="mr-1 flex items-center text-accent-secondary">{icon}</div>
-            Learn about {heading}
+            {title}
           </h2>
           <p className="mb-3 mt-2 text-sans-md text-default">{summary}</p>
         </div>

test/e2e/docs-popover.e2e.ts

@@ -8,7 +8,7 @@
 import { expect, test } from './utils'
 
 test('Show / hide contextual help docs links', async ({ page }) => {
-  const learnAbout = page.getByText('Learn about disks')
+  const learnAbout = page.getByRole('heading', { name: 'Learn about disks' })
   const managingDisksLink = page.getByRole('link', { name: 'Disks and Snapshots' })
 
   await page.goto('/projects/mock-project/disks')
@@ -17,7 +17,7 @@ test('Show / hide contextual help docs links', async ({ page }) => {
   await expect(managingDisksLink).toBeHidden()
 
   // open the contextual help docs links
-  await page.getByLabel('Links to docs').click()
+  await page.getByRole('button', { name: 'Learn about disks' }).click()
   await expect(learnAbout).toBeVisible()
   await expect(managingDisksLink).toBeVisible()
 

test/e2e/images.e2e.ts

@@ -46,7 +46,7 @@ test('can promote an image from silo', async ({ page }) => {
   await page.getByRole('option', { name: 'mock-project' }).click()
 
   // Select an image in that project
-  const imageListbox = page.locator('role=button[name*="Image"]')
+  const imageListbox = page.getByRole('button', { name: 'Image', exact: true })
   await expect(imageListbox).toBeEnabled()
   await imageListbox.click()
   await page.locator('role=option >> text="image-1"').click()