Add requested accessibility updates for hovercards (#50927)

data/ui.yml

@@ -260,7 +260,7 @@ learning_track_nav:
 scroll_button:
   scroll_to_top: Scroll to top
 popovers:
-  role_description: hover card
+  role_description: hovercard link
   keyboard_shortcut_description: Press alt+up to activate
 alerts:
   NOTE: Note

src/fixtures/fixtures/data/ui.yml

@@ -260,7 +260,7 @@ learning_track_nav:
 scroll_button:
   scroll_to_top: Scroll to top
 popovers:
-  role_description: hover card
+  role_description: hovercard link
   keyboard_shortcut_description: Press alt+up to activate
 alerts:
   NOTE: Note

src/fixtures/tests/playwright-rendering.spec.ts

@@ -289,7 +289,7 @@ test.describe('hover cards', () => {
   test('internal links get a aria-roledescription and aria-describedby', async ({ page }) => {
     await page.goto('/pages/quickstart')
     const link = page.locator('#article-contents').getByRole('link', { name: 'Start your journey' })
-    await expect(link).toHaveAttribute('aria-roledescription', 'hover card')
+    await expect(link).toHaveAttribute('aria-roledescription', 'hovercard link')
 
     // The link gets a `aria-describedby="...ID..."` attribute that points to
     // another element in the DOM that has the description text.

src/links/components/LinkPreviewPopover.tsx

@@ -72,6 +72,7 @@ function getOrCreatePopoverGlobal() {
     // focus trapped
     wrapper.setAttribute('role', 'dialog')
     wrapper.setAttribute('aria-modal', 'true')
+    wrapper.setAttribute('aria-label', 'user hovercard')
     wrapper.setAttribute('aria-labelledby', TITLE_ID)
 
     // this extra element and its event listener are used to help us direct