From 7e60ac4bb9a39b45fc76792ff82b01044933f291 Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 17 Jan 2023 20:12:34 +0100 Subject: [PATCH 1/3] add id --- .../react-tabster/src/hooks/useModalAttributes.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts b/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts index f3e58dcc14f4f..56097ee95dc54 100644 --- a/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts +++ b/packages/react-components/react-tabster/src/hooks/useModalAttributes.ts @@ -24,6 +24,11 @@ export interface UseModalAttributesOptions { * Always reachabled in Tab order */ alwaysFocusable?: boolean; + + /** + * Id to use for the modalizer. An id will be generated if not provided. + */ + id?: string; } /** @@ -44,7 +49,7 @@ export const useModalAttributes = ( getDeloser(tabster); } - const id = useId('modal-'); + const id = useId('modal-', options.id); const modalAttributes = useTabsterAttributes({ deloser: {}, modalizer: { From e7786aa8c5a3a1f9c6b5d240a061ed883299d9fb Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Tue, 17 Jan 2023 20:13:34 +0100 Subject: [PATCH 2/3] chg --- ...react-tabster-5065c018-0a25-4a76-9359-7f114ddf23e8.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-tabster-5065c018-0a25-4a76-9359-7f114ddf23e8.json diff --git a/change/@fluentui-react-tabster-5065c018-0a25-4a76-9359-7f114ddf23e8.json b/change/@fluentui-react-tabster-5065c018-0a25-4a76-9359-7f114ddf23e8.json new file mode 100644 index 0000000000000..8b927cc436a17 --- /dev/null +++ b/change/@fluentui-react-tabster-5065c018-0a25-4a76-9359-7f114ddf23e8.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add modalizer id to `useModalAttributes` option", + "packageName": "@fluentui/react-tabster", + "email": "yuanboxue@microsoft.com", + "dependentChangeType": "patch" +} From 5c0c9731ad9fab1678ac56c30f7401830e2854ae Mon Sep 17 00:00:00 2001 From: YuanboXue-Amber Date: Wed, 18 Jan 2023 10:12:31 +0100 Subject: [PATCH 3/3] api --- packages/react-components/react-tabster/etc/react-tabster.api.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-components/react-tabster/etc/react-tabster.api.md b/packages/react-components/react-tabster/etc/react-tabster.api.md index a492d34543bc4..a5bb20d7d6d51 100644 --- a/packages/react-components/react-tabster/etc/react-tabster.api.md +++ b/packages/react-components/react-tabster/etc/react-tabster.api.md @@ -90,6 +90,7 @@ export const useModalAttributes: (options?: UseModalAttributesOptions) => { // @public (undocumented) export interface UseModalAttributesOptions { alwaysFocusable?: boolean; + id?: string; legacyTrapFocus?: boolean; trapFocus?: boolean; }