From 347fcad40d657398feb4a29181f02218cdd2816c Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Thu, 6 Jul 2023 21:57:42 -0700 Subject: [PATCH 1/5] fix(react-infobutton): Make InfoLabel only add aria-owns when the popover is open. --- .../src/components/InfoLabel/InfoLabel.test.tsx | 12 ++++++++++-- .../src/components/InfoLabel/useInfoLabel.ts | 16 ++++++++++++++-- 2 files changed, 24 insertions(+), 4 deletions(-) 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 c47219af13f98..15b0bd31454d9 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 @@ -1,6 +1,6 @@ import * as React from 'react'; -import { render } from '@testing-library/react'; +import { fireEvent, render } from '@testing-library/react'; import { isConformant } from '../../testing/isConformant'; import { InfoLabel } from './InfoLabel'; @@ -44,13 +44,21 @@ 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", () => { + it("applies InfoButton's info slot id to aria-owns on the InfoLabel's wrapper when open", () => { const { container } = render(); + expect(container.getElementsByClassName('info-label-wrapper')[0].getAttribute('aria-owns')).toBeNull(); + + fireEvent.click(container.getElementsByTagName('button')[0]); + 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')).toBeNull(); + + fireEvent.click(container.getElementsByTagName('button')[0]); + 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 545442eb6a0e8..7d6357f19285f 100644 --- a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts +++ b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { Label } from '@fluentui/react-label'; -import { resolveShorthand, useId } from '@fluentui/react-utilities'; +import { mergeCallbacks, resolveShorthand, useEventCallback, useId } from '@fluentui/react-utilities'; import { InfoButton } from '../InfoButton/InfoButton'; import type { InfoLabelProps, InfoLabelState } from './InfoLabel.types'; @@ -26,6 +26,7 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref { + setOpen(data.open); + }), + ); + if (infoButton) { + infoButton.popover = infoButtonPopover; infoButton.info = resolveShorthand(infoButton?.info, { defaultProps: { id: baseId + '__info', @@ -62,7 +71,10 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref Date: Thu, 6 Jul 2023 21:58:38 -0700 Subject: [PATCH 2/5] change file --- ...ct-infobutton-1b09e7d8-69ff-4983-9b7c-420f583f8d73.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-infobutton-1b09e7d8-69ff-4983-9b7c-420f583f8d73.json diff --git a/change/@fluentui-react-infobutton-1b09e7d8-69ff-4983-9b7c-420f583f8d73.json b/change/@fluentui-react-infobutton-1b09e7d8-69ff-4983-9b7c-420f583f8d73.json new file mode 100644 index 0000000000000..cc13b45fad2a4 --- /dev/null +++ b/change/@fluentui-react-infobutton-1b09e7d8-69ff-4983-9b7c-420f583f8d73.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix(react-infobutton): Make InfoLabel only add aria-owns when the popover is open.", + "packageName": "@fluentui/react-infobutton", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} From 2b13a8215d3d514762ca7ecb70046575bc7e0e91 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 7 Jul 2023 11:50:55 -0700 Subject: [PATCH 3/5] cleaning up infobutton stories --- .../InfoButton/InfoButtonDefault.stories.tsx | 15 +++++---------- .../InfoButton/InfoButtonSize.stories.tsx | 17 +++-------------- 2 files changed, 8 insertions(+), 24 deletions(-) diff --git a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDefault.stories.tsx b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDefault.stories.tsx index b9d6fa6e96500..5f19c38a001f1 100644 --- a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDefault.stories.tsx +++ b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonDefault.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { InfoButton } from '@fluentui/react-infobutton'; -import { Label, Link, makeStyles, useId } from '@fluentui/react-components'; +import { Label, makeStyles, useId } from '@fluentui/react-components'; import type { InfoButtonProps } from '@fluentui/react-infobutton'; import type { PopoverProps } from '@fluentui/react-components'; @@ -15,16 +15,11 @@ export const Default = (props: Partial) => { const labelId = useId('label'); const infobuttonId = useId('infobutton'); const infobuttonInfoId = infobuttonId + '__info'; - const [open, setOpen] = React.useState(false); - const info = ( - <> - This is example information for an InfoButton. Learn more - - ); - - const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => setOpen(data.open); + const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => { + setOpen(data.open); + }; return (
@@ -35,7 +30,7 @@ export const Default = (props: Partial) => { className={styles.infoButton} info={{ id: infobuttonInfoId, - children: info, + children: 'This is example information for an InfoButton.', }} popover={{ onOpenChange, diff --git a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx index 7404b280b2dc8..dac45fd8451cb 100644 --- a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx +++ b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx @@ -19,28 +19,17 @@ const useStyles = makeStyles({ const InfoButtonSize: React.FC<{ size: InfoButtonProps['size'] }> = ({ size }) => { const styles = useStyles(); - const labelId = useId('label'); - const infobuttonId = useId('infobutton'); - const infobuttonInfoId = infobuttonId + '__info'; - + const infobuttonInfoId = useId('infobuton__info'); const [open, setOpen] = React.useState(false); - - const info = ( - <> - This is example information for an InfoButton. Learn more - - ); + const info = 'This is example information for an InfoButton.'; const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => setOpen(data.open); return (
- + Date: Fri, 7 Jul 2023 11:56:37 -0700 Subject: [PATCH 4/5] update example --- .../stories/InfoButton/InfoButtonSize.stories.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx index dac45fd8451cb..0ab30bf4f1422 100644 --- a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx +++ b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx @@ -23,7 +23,9 @@ const InfoButtonSize: React.FC<{ size: InfoButtonProps['size'] }> = ({ size }) = const [open, setOpen] = React.useState(false); const info = 'This is example information for an InfoButton.'; - const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => setOpen(data.open); + const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => { + setOpen(data.open); + }; return (
From 5c1f74f1892ddcbba3873883ec066b4adfba9b2f Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 7 Jul 2023 14:34:44 -0700 Subject: [PATCH 5/5] fixing lint --- .../stories/InfoButton/InfoButtonSize.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx index 0ab30bf4f1422..0805e5dac432d 100644 --- a/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx +++ b/packages/react-components/react-infobutton/stories/InfoButton/InfoButtonSize.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { InfoButton } from '@fluentui/react-infobutton'; -import { Label, Link, makeStyles, shorthands, useId } from '@fluentui/react-components'; +import { Label, makeStyles, shorthands, useId } from '@fluentui/react-components'; import type { InfoButtonProps } from '@fluentui/react-infobutton'; import type { PopoverProps } from '@fluentui/react-components';