Skip to content

fix(web-components): remove tooltip id from target’s aria-describedby attribute when the t…#36241

Open
marchbox wants to merge 2 commits into
microsoft:masterfrom
marchbox:users/machi/tooltip-disconnect
Open

fix(web-components): remove tooltip id from target’s aria-describedby attribute when the t…#36241
marchbox wants to merge 2 commits into
microsoft:masterfrom
marchbox:users/machi/tooltip-disconnect

Conversation

@marchbox
Copy link
Copy Markdown
Contributor

Previous Behavior

When a <fluent-tooltip> is removed from the DOM, its ID remains in the aria-describedby attribute on the target element.

New Behavior

The IDREF is removed from target element’s aria-describedby attribute.

Related Issue(s)

Fixes #35470

@github-actions
Copy link
Copy Markdown

📊 Bundle size report

✅ No changes found

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,7 @@
{
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-web-components/Badge 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Badge. - Dark Mode.normal.chromium.png 443 Changed
vr-tests-web-components/MenuList 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - RTL.2nd selected.chromium.png 17 Changed
vr-tests-web-components/MenuList. - RTL.normal.chromium_1.png 39083 Changed
vr-tests-web-components/TextInput 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/TextInput. - Dark Mode.normal.chromium_1.png 288 Changed

Comment on lines +74 to +96
test('should remove the tooltip id from `aria-describedby` attribute when tooltip is removed', async ({
fastPage,
}) => {
const { element, page } = fastPage;
const button = page.locator('button');

await fastPage.setTemplate(/* html */ `
<div style="position: absolute; inset: 200px">
<button id="target">Target</button>
<${tagName} anchor="target">This is a tooltip</${tagName}>
<${tagName} anchor="target">This is another tooltip</${tagName}>
</div>
`);

const id2 = await element.nth(1).evaluate((node: Tooltip) => node.id);

await element.nth(0).evaluate(node => {
node.remove();
});

await expect(button).toHaveAttribute('aria-describedby', id2);
});

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need more tests here to test all possible states?

  • assert both id1 and id2 are applied to button aria-describedby?
  • assert id2 exists after id1 is removed (in this PR)
  • assert id1 does not exist in button aria-describedby?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

[Bug]: Tooltip causes Narrator to announce multiple times

2 participants