From d838c50342564c8737076421ad26381dbcb288d2 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 12 May 2023 08:21:51 -0700 Subject: [PATCH 1/8] fix: Add aria-owns to infobutton. --- .../components/InfoButton/useInfoButton.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx index 4acba3a4f1aa44..53e0fb3e6ce45e 100644 --- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx +++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons'; -import { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities'; +import { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities'; import { Popover, PopoverSurface } from '@fluentui/react-popover'; import { useControllableState } from '@fluentui/react-utilities'; import type { InfoButtonProps, InfoButtonState } from './InfoButton.types'; @@ -30,6 +30,16 @@ const popoverSizeMap = { export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref): InfoButtonState => { const { size = 'medium' } = props; + const infoId = useId('infoButton-'); + const infoShorthand = resolveShorthand(props.info, { + required: true, + defaultProps: { + id: infoId, + role: 'note', + tabIndex: -1, + }, + }); + const state: InfoButtonState = { size, @@ -43,6 +53,7 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref Date: Fri, 12 May 2023 08:22:32 -0700 Subject: [PATCH 2/8] change fileS --- ...ct-infobutton-96687ef7-7451-4853-8a32-6046c1caf576.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-infobutton-96687ef7-7451-4853-8a32-6046c1caf576.json 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 00000000000000..44c2828f14ee67 --- /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 infobutton.", + "packageName": "@fluentui/react-infobutton", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} From 0cb8622c091f169da399f930b344e801a0ec3950 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Fri, 12 May 2023 13:12:18 -0700 Subject: [PATCH 3/8] updating aria owns to be added in the infolabel instead --- ...-96687ef7-7451-4853-8a32-6046c1caf576.json | 2 +- .../components/InfoButton/useInfoButton.tsx | 21 +++++++------------ .../src/components/InfoLabel/useInfoLabel.ts | 2 ++ .../Infobutton/InfoButtonBestPractices.md | 1 + 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/change/@fluentui-react-infobutton-96687ef7-7451-4853-8a32-6046c1caf576.json b/change/@fluentui-react-infobutton-96687ef7-7451-4853-8a32-6046c1caf576.json index 44c2828f14ee67..aeeec118286c77 100644 --- a/change/@fluentui-react-infobutton-96687ef7-7451-4853-8a32-6046c1caf576.json +++ b/change/@fluentui-react-infobutton-96687ef7-7451-4853-8a32-6046c1caf576.json @@ -1,6 +1,6 @@ { "type": "prerelease", - "comment": "fix: Add aria-owns to infobutton.", + "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/InfoButton/useInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx index 53e0fb3e6ce45e..4acba3a4f1aa44 100644 --- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx +++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons'; -import { getNativeElementProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities'; +import { getNativeElementProps, mergeCallbacks, resolveShorthand } from '@fluentui/react-utilities'; import { Popover, PopoverSurface } from '@fluentui/react-popover'; import { useControllableState } from '@fluentui/react-utilities'; import type { InfoButtonProps, InfoButtonState } from './InfoButton.types'; @@ -30,16 +30,6 @@ const popoverSizeMap = { export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref): InfoButtonState => { const { size = 'medium' } = props; - const infoId = useId('infoButton-'); - const infoShorthand = resolveShorthand(props.info, { - required: true, - defaultProps: { - id: infoId, - role: 'note', - tabIndex: -1, - }, - }); - const state: InfoButtonState = { size, @@ -53,7 +43,6 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref Date: Tue, 16 May 2023 13:20:10 -0700 Subject: [PATCH 4/8] add tests and update implementation --- .../src/components/InfoLabel/InfoLabel.test.tsx | 10 ++++++++++ .../src/components/InfoLabel/useInfoLabel.ts | 8 +++++++- .../Infobutton/InfoButtonAriaOwns.stories.tsx | 16 ++++++++++++++++ .../Infobutton/InfoButtonBestPractices.md | 2 +- .../stories/Infobutton/index.stories.tsx | 1 + 5 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 packages/react-components/react-infobutton/stories/Infobutton/InfoButtonAriaOwns.stories.tsx 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 95c7ec9676b0e3..c47219af13f98a 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 3cd13cd3eeb7f8..098019ff737064 100644 --- a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts +++ b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts @@ -20,8 +20,8 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref { + const labelId = useId('label-'); + const infoButtonId = useId('infobutton-'); + const infoButtonContentId = useId('infobuttonContent-'); + + return ( +
+ + +
+ ); +}; diff --git a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonBestPractices.md b/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonBestPractices.md index 78622df11d0c91..33b8e50ed5a788 100644 --- a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonBestPractices.md +++ b/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonBestPractices.md @@ -7,7 +7,7 @@ Best Practices - Prefer using an `InfoLabel` if the `InfoButton` is intended to be associated with a label. - Set `aria-label` to an appropriate value if the `InfoButton` is not associated with a label. -- Add `aria-owns` to the trigger's parent element using the id of the `info` slot. +- Add `aria-owns` to the trigger's parent element using the id of the `info` slot. This is done automatically by `InfoLabel`. ### Don't diff --git a/packages/react-components/react-infobutton/stories/Infobutton/index.stories.tsx b/packages/react-components/react-infobutton/stories/Infobutton/index.stories.tsx index 65c5f3afaae1d5..f162ba9fc179ac 100644 --- a/packages/react-components/react-infobutton/stories/Infobutton/index.stories.tsx +++ b/packages/react-components/react-infobutton/stories/Infobutton/index.stories.tsx @@ -5,6 +5,7 @@ import bestPracticesMd from './InfoButtonBestPractices.md'; export { Default } from './InfoButtonDefault.stories'; export { Size } from './InfoButtonSize.stories'; +export { AriaOwns } from './InfoButtonAriaOwns.stories'; export default { title: 'Preview Components/InfoButton', From 9c6c37abefebff13d4034c8c22b01a2da5d0fc93 Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Tue, 16 May 2023 13:31:18 -0700 Subject: [PATCH 5/8] changing implementation --- .../src/components/InfoLabel/useInfoLabel.ts | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) 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 098019ff737064..e142f991d25d0e 100644 --- a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts +++ b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts @@ -20,7 +20,7 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref Date: Tue, 16 May 2023 13:32:12 -0700 Subject: [PATCH 6/8] removing cast --- .../react-infobutton/src/components/InfoLabel/useInfoLabel.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) 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 e142f991d25d0e..23fa196973aa74 100644 --- a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts +++ b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts @@ -3,7 +3,6 @@ import * as React from 'react'; import { Label } from '@fluentui/react-label'; import { resolveShorthand, useId } from '@fluentui/react-utilities'; import { InfoButton } from '../InfoButton/InfoButton'; -import type { InfoButtonProps } from '../InfoButton/InfoButton.types'; import type { InfoLabelProps, InfoLabelState } from './InfoLabel.types'; /** @@ -65,7 +64,7 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref Date: Tue, 16 May 2023 13:33:44 -0700 Subject: [PATCH 7/8] removing example --- .../Infobutton/InfoButtonAriaOwns.stories.tsx | 16 ---------------- .../stories/Infobutton/index.stories.tsx | 1 - 2 files changed, 17 deletions(-) delete mode 100644 packages/react-components/react-infobutton/stories/Infobutton/InfoButtonAriaOwns.stories.tsx diff --git a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonAriaOwns.stories.tsx b/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonAriaOwns.stories.tsx deleted file mode 100644 index 473faf83983e03..00000000000000 --- a/packages/react-components/react-infobutton/stories/Infobutton/InfoButtonAriaOwns.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react'; -import { InfoButton } from '@fluentui/react-infobutton'; -import { useId } from '@fluentui/react-components'; - -export const AriaOwns = () => { - const labelId = useId('label-'); - const infoButtonId = useId('infobutton-'); - const infoButtonContentId = useId('infobuttonContent-'); - - return ( -
- - -
- ); -}; diff --git a/packages/react-components/react-infobutton/stories/Infobutton/index.stories.tsx b/packages/react-components/react-infobutton/stories/Infobutton/index.stories.tsx index f162ba9fc179ac..65c5f3afaae1d5 100644 --- a/packages/react-components/react-infobutton/stories/Infobutton/index.stories.tsx +++ b/packages/react-components/react-infobutton/stories/Infobutton/index.stories.tsx @@ -5,7 +5,6 @@ import bestPracticesMd from './InfoButtonBestPractices.md'; export { Default } from './InfoButtonDefault.stories'; export { Size } from './InfoButtonSize.stories'; -export { AriaOwns } from './InfoButtonAriaOwns.stories'; export default { title: 'Preview Components/InfoButton', From 7b5023060d29a7101513ef818c360a9b25c4543c Mon Sep 17 00:00:00 2001 From: Esteban Munoz Date: Wed, 17 May 2023 14:28:19 -0700 Subject: [PATCH 8/8] requested changes --- .../src/components/InfoLabel/useInfoLabel.ts | 23 ++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) 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 23fa196973aa74..545442eb6a0e8f 100644 --- a/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts +++ b/packages/react-components/react-infobutton/src/components/InfoLabel/useInfoLabel.ts @@ -25,6 +25,7 @@ export const useInfoLabel_unstable = (props: InfoLabelProps, ref: React.Ref