From bb3f8d310a777e4715efedcaa5dd0455be3cac92 Mon Sep 17 00:00:00 2001 From: mgamis-msft Date: Thu, 11 Dec 2025 23:00:28 -0800 Subject: [PATCH 1/8] Fix focus moving out of ReactionButton flyout when navigating with Tab key --- .../src/components/ReactionButton.tsx | 20 +++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/react-components/src/components/ReactionButton.tsx b/packages/react-components/src/components/ReactionButton.tsx index 1cdea82fde4..b6a2113da53 100644 --- a/packages/react-components/src/components/ReactionButton.tsx +++ b/packages/react-components/src/components/ReactionButton.tsx @@ -5,7 +5,7 @@ import { Callout, concatStyleSets, DefaultButton, - FocusZone, + FocusTrapZone, IButton, ICalloutContentStyles, mergeStyles, @@ -27,7 +27,6 @@ import { import { isDarkThemed } from '../theming/themeUtils'; import { ReactionResources } from '..'; import { getEmojiFrameCount } from './VideoGallery/utils/videoGalleryLayoutUtils'; -import { _preventDismissOnEvent } from '@internal/acs-ui-common'; /** * Reactions types for the Reaction button @@ -138,7 +137,20 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { setCalloutIsVisible(false); }} > - + { + if (e.key === 'Escape') { + e.preventDefault(); + e.stopPropagation(); + reactionButtonRef.current?.focus(); + setCalloutIsVisible(false); + } + }} + style={{ height: '100%' }} + > {emojis.map((emoji, index) => { const resourceUrl = emojiResource.get(emoji); @@ -172,7 +184,7 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { ); })} - + )}
From 24ff5700423a173ca304469958968ae803d8fdac Mon Sep 17 00:00:00 2001 From: mgamis-msft Date: Tue, 16 Dec 2025 14:55:16 -0800 Subject: [PATCH 2/8] Change files --- ...ation-react-6e1bc4ff-739c-4151-820d-566d6a32d76e.json | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 change/@azure-communication-react-6e1bc4ff-739c-4151-820d-566d6a32d76e.json diff --git a/change/@azure-communication-react-6e1bc4ff-739c-4151-820d-566d6a32d76e.json b/change/@azure-communication-react-6e1bc4ff-739c-4151-820d-566d6a32d76e.json new file mode 100644 index 00000000000..828a2d2067b --- /dev/null +++ b/change/@azure-communication-react-6e1bc4ff-739c-4151-820d-566d6a32d76e.json @@ -0,0 +1,9 @@ +{ + "type": "patch", + "area": "fix", + "workstream": "A11y", + "comment": "Fix focus moving out of ReactionButton flyout when navigating with Tab key", + "packageName": "@azure/communication-react", + "email": "miguelgamis@microsoft.com", + "dependentChangeType": "patch" +} From a047adb95418289e6fa23b41574520f1036ba4e7 Mon Sep 17 00:00:00 2001 From: mgamis-msft Date: Tue, 16 Dec 2025 14:44:58 -0800 Subject: [PATCH 3/8] Enhance ReactionButton accessibility by focusing the first emoji button on callout positioning --- .../src/components/ReactionButton.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/react-components/src/components/ReactionButton.tsx b/packages/react-components/src/components/ReactionButton.tsx index b6a2113da53..40caa0b3372 100644 --- a/packages/react-components/src/components/ReactionButton.tsx +++ b/packages/react-components/src/components/ReactionButton.tsx @@ -13,7 +13,7 @@ import { TooltipHost, useTheme } from '@fluentui/react'; -import React, { useRef, useState } from 'react'; +import React, { useRef, useState, useCallback } from 'react'; import { ControlBarButton, ControlBarButtonProps } from './ControlBarButton'; import { _HighContrastAwareIcon } from './HighContrastAwareIcon'; import { useLocale } from '../localization'; @@ -121,9 +121,15 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { const reactionButtonCalloutRef = useRef(null); const reactionButtonRef = useRef(null); + const firstEmojiButtonRef = useRef(null); const [calloutIsVisible, setCalloutIsVisible] = useState(false); + // Focus the first emoji button when callout finishes positioning + const handleCalloutPositioned = useCallback(() => { + firstEmojiButtonRef.current?.focus(); + }, []); + return ( {calloutIsVisible && ( @@ -132,6 +138,7 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { isBeakVisible={false} styles={reactionButtonCalloutStyles} target={reactionButtonCalloutRef.current} + onPositioned={handleCalloutPositioned} onDismiss={() => { reactionButtonRef.current?.focus(); setCalloutIsVisible(false); @@ -139,6 +146,7 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { > { @@ -169,6 +177,7 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { > { props.onReactionClick(emoji); reactionButtonRef.current?.focus(); From 73a271caa3ff7479638d8ef7feec12159e0ac42d Mon Sep 17 00:00:00 2001 From: mgamis-msft Date: Tue, 16 Dec 2025 14:55:54 -0800 Subject: [PATCH 4/8] Change files --- ...ation-react-1b3e2e66-0eab-4b8d-9ed9-552515179eb3.json | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 change/@azure-communication-react-1b3e2e66-0eab-4b8d-9ed9-552515179eb3.json diff --git a/change/@azure-communication-react-1b3e2e66-0eab-4b8d-9ed9-552515179eb3.json b/change/@azure-communication-react-1b3e2e66-0eab-4b8d-9ed9-552515179eb3.json new file mode 100644 index 00000000000..67d07e87196 --- /dev/null +++ b/change/@azure-communication-react-1b3e2e66-0eab-4b8d-9ed9-552515179eb3.json @@ -0,0 +1,9 @@ +{ + "type": "patch", + "area": "fix", + "workstream": "A11y", + "comment": "Enhance ReactionButton accessibility by focusing the first emoji button on callout positioning", + "packageName": "@azure/communication-react", + "email": "miguelgamis@microsoft.com", + "dependentChangeType": "patch" +} From e20aa195d075d459a40e64f6f17218ecef1e1b19 Mon Sep 17 00:00:00 2001 From: mgamis-msft Date: Thu, 11 Dec 2025 23:09:57 -0800 Subject: [PATCH 5/8] Screen reader announcing position information for the emoji buttons --- .../react-components/src/components/ReactionButton.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/react-components/src/components/ReactionButton.tsx b/packages/react-components/src/components/ReactionButton.tsx index 40caa0b3372..6d0fd6b89bd 100644 --- a/packages/react-components/src/components/ReactionButton.tsx +++ b/packages/react-components/src/components/ReactionButton.tsx @@ -159,7 +159,7 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { }} style={{ height: '100%' }} > - + {emojis.map((emoji, index) => { const resourceUrl = emojiResource.get(emoji); const frameCount: number = @@ -173,7 +173,6 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { content={emojiButtonTooltip.get(emoji)} styles={reactionToolTipHostStyle()} calloutProps={{ ...calloutProps }} - role="listitem" > { }} className={classname} styles={reactionItemButtonStyles} - aria-label={emojiButtonTooltip.get(emoji)} - aria-setsize={emojis.length} - aria-posinset={index + 1} + aria-label={`${emojiButtonTooltip.get(emoji)}, ${index + 1} of ${emojis.length}`} > ); From eac79233185df97efe48a159266609124146c027 Mon Sep 17 00:00:00 2001 From: mgamis-msft Date: Tue, 16 Dec 2025 14:56:31 -0800 Subject: [PATCH 6/8] Change files --- ...ation-react-f5a8e707-2efe-49a9-bbea-2d08346fc9f8.json | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 change/@azure-communication-react-f5a8e707-2efe-49a9-bbea-2d08346fc9f8.json diff --git a/change/@azure-communication-react-f5a8e707-2efe-49a9-bbea-2d08346fc9f8.json b/change/@azure-communication-react-f5a8e707-2efe-49a9-bbea-2d08346fc9f8.json new file mode 100644 index 00000000000..d30974a5774 --- /dev/null +++ b/change/@azure-communication-react-f5a8e707-2efe-49a9-bbea-2d08346fc9f8.json @@ -0,0 +1,9 @@ +{ + "type": "patch", + "area": "fix", + "workstream": "A11y", + "comment": "Screen reader announcing position information for the emoji buttons", + "packageName": "@azure/communication-react", + "email": "miguelgamis@microsoft.com", + "dependentChangeType": "patch" +} From 5e54cb4ebdefc97abd57ac81b9a6fc9d9f1ce2b2 Mon Sep 17 00:00:00 2001 From: mgamis-msft Date: Tue, 6 Jan 2026 11:02:37 -0800 Subject: [PATCH 7/8] Revert "Enhance ReactionButton accessibility by focusing the first emoji button on callout positioning" This reverts commit a047adb95418289e6fa23b41574520f1036ba4e7. --- .../src/components/ReactionButton.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/react-components/src/components/ReactionButton.tsx b/packages/react-components/src/components/ReactionButton.tsx index 6d0fd6b89bd..d5b488160d3 100644 --- a/packages/react-components/src/components/ReactionButton.tsx +++ b/packages/react-components/src/components/ReactionButton.tsx @@ -13,7 +13,7 @@ import { TooltipHost, useTheme } from '@fluentui/react'; -import React, { useRef, useState, useCallback } from 'react'; +import React, { useRef, useState } from 'react'; import { ControlBarButton, ControlBarButtonProps } from './ControlBarButton'; import { _HighContrastAwareIcon } from './HighContrastAwareIcon'; import { useLocale } from '../localization'; @@ -121,15 +121,9 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { const reactionButtonCalloutRef = useRef(null); const reactionButtonRef = useRef(null); - const firstEmojiButtonRef = useRef(null); const [calloutIsVisible, setCalloutIsVisible] = useState(false); - // Focus the first emoji button when callout finishes positioning - const handleCalloutPositioned = useCallback(() => { - firstEmojiButtonRef.current?.focus(); - }, []); - return ( {calloutIsVisible && ( @@ -138,7 +132,6 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { isBeakVisible={false} styles={reactionButtonCalloutStyles} target={reactionButtonCalloutRef.current} - onPositioned={handleCalloutPositioned} onDismiss={() => { reactionButtonRef.current?.focus(); setCalloutIsVisible(false); @@ -146,7 +139,6 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { > { @@ -176,7 +168,6 @@ export const ReactionButton = (props: ReactionButtonProps): JSX.Element => { > { props.onReactionClick(emoji); reactionButtonRef.current?.focus(); From 6e55d28648563a8fbedb11ad6f17d292547ff819 Mon Sep 17 00:00:00 2001 From: mgamis-msft Date: Tue, 6 Jan 2026 11:02:45 -0800 Subject: [PATCH 8/8] Revert "Change files" This reverts commit 73a271caa3ff7479638d8ef7feec12159e0ac42d. --- ...ation-react-1b3e2e66-0eab-4b8d-9ed9-552515179eb3.json | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 change/@azure-communication-react-1b3e2e66-0eab-4b8d-9ed9-552515179eb3.json diff --git a/change/@azure-communication-react-1b3e2e66-0eab-4b8d-9ed9-552515179eb3.json b/change/@azure-communication-react-1b3e2e66-0eab-4b8d-9ed9-552515179eb3.json deleted file mode 100644 index 67d07e87196..00000000000 --- a/change/@azure-communication-react-1b3e2e66-0eab-4b8d-9ed9-552515179eb3.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "type": "patch", - "area": "fix", - "workstream": "A11y", - "comment": "Enhance ReactionButton accessibility by focusing the first emoji button on callout positioning", - "packageName": "@azure/communication-react", - "email": "miguelgamis@microsoft.com", - "dependentChangeType": "patch" -}