jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-19 18:10:59 -05:00
Code Issues Projects Releases Wiki Activity

Add requested accessibility updates for hovercards (#50927)

Browse Source
This commit is contained in:
Grace Park
2024-05-31 10:51:59 -07:00
committed by GitHub
parent f6d0c8886f
commit 5d652c39cb
4 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
data/ui.yml
View File

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

2
src/fixtures/fixtures/data/ui.yml
View File

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

2
src/fixtures/tests/playwright-rendering.spec.ts
View File

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

1
src/links/components/LinkPreviewPopover.tsx
View File

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