minor: fix label and title on docs popover button

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

@@ -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.getByLabel('Learn about disks').click()
   await expect(learnAbout).toBeVisible()
   await expect(managingDisksLink).toBeVisible()