diff --git a/change/@fluentui-react-infobutton-96687ef7-7451-4853-8a32-6046c1caf576.json b/change/@fluentui-react-infobutton-96687ef7-7451-4853-8a32-6046c1caf576.json new file mode 100644 index 0000000000000..aeeec118286c7 --- /dev/null +++ b/change/@fluentui-react-infobutton-96687ef7-7451-4853-8a32-6046c1caf576.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix: Add aria-owns to InfoLabel.", + "packageName": "@fluentui/react-infobutton", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.test.tsx b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.test.tsx index 95c7ec9676b0e..c47219af13f98 100644 --- a/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.test.tsx +++ b/packages/react-components/react-infobutton/src/components/InfoLabel/InfoLabel.test.tsx @@ -43,4 +43,14 @@ describe('InfoLabel', () => { expect(infoButton.getAttribute('aria-labelledby')).toBe(`${label.id} ${infoButton.id}`); }); + + it("applies InfoButton's info slot id to aria-owns on the InfoLabel's wrapper", () => { + const { container } = render(); + expect(container.getElementsByClassName('info-label-wrapper')[0].getAttribute('aria-owns')).toBe('test-id'); + }); + + it("applies InfoButton's correct id to aria-owns on the InfoLabel's wrapper when id is provided to the infoButton slot", () => { + const { container } = render(); + expect(container.getElementsByClassName('info-label-wrapper')[0].getAttribute('aria-owns')).toBe('test-id'); + }); }); diff --git a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts index 1c771d22c3e80..545442eb6a0e8 100644 --- a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts +++ b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts @@ -19,12 +19,13 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref