[FHL] Accessibility Provider

change-beta/@azure-communication-react-074222fb-3865-4aff-b20b-6bfd18447191.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "Accessibility",
+  "comment": "Introduce Accessibility provider to the UI library to use with components and composites",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-074222fb-3865-4aff-b20b-6bfd18447191.json

@@ -0,0 +1,9 @@
+{
+  "type": "minor",
+  "area": "improvement",
+  "workstream": "Accessibility",
+  "comment": "Introduce Accessibility provider to the UI library to use with components and composites",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -52,6 +52,7 @@ import { DominantSpeakersInfo } from '@azure/communication-calling';
 import { DtmfTone as DtmfTone_2 } from '@azure/communication-calling';
 import { EnvironmentInfo } from '@azure/communication-calling';
 import { GroupCallLocator } from '@azure/communication-calling';
+import { IButton } from '@fluentui/react';
 import { IButtonProps } from '@fluentui/react';
 import { IButtonStyles } from '@fluentui/react';
 import { IContextualMenuItem } from '@fluentui/react';
@@ -96,6 +97,7 @@ import { PropertyChangedEvent } from '@azure/communication-calling';
 import { default as React_2 } from 'react';
 import { Reaction as Reaction_2 } from '@azure/communication-calling';
 import { ReactionMessage } from '@azure/communication-calling';
+import { ReactNode } from 'react';
 import { RealTimeTextInfo as RealTimeTextInfo_2 } from '@azure/communication-calling';
 import { RealTimeTextResultType } from '@azure/communication-calling';
 import { RecordingInfo } from '@azure/communication-calling';
@@ -129,6 +131,23 @@ export interface AcceptedTransfer {
     timestamp: Date;
 }
 
+// @public
+export type AccessibilityComponentRef = IButton | HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;
+
+// @public
+export interface AccessibilityContextType {
+    componentRef: AccessibilityComponentRef;
+    setComponentRef: (ref: AccessibilityComponentRef) => void;
+}
+
+// @public
+export const AccessibilityProvider: (props: AccessibilityProviderProps) => JSX.Element;
+
+// @public
+export type AccessibilityProviderProps = {
+    children: ReactNode;
+};
+
 // @public
 export interface ActiveErrorMessage {
     timestamp?: Date;
@@ -5489,6 +5508,9 @@ export type UploadChatImageResult = {
     name?: string;
 };
 
+// @public
+export const useAccessibility: () => AccessibilityContextType | null;
+
 // @public
 export const useAzureCommunicationCallAdapter: (args: Partial<AzureCommunicationCallAdapterArgs | AzureCommunicationOutboundCallAdapterArgs>, afterCreate?: (adapter: CallAdapter) => Promise<CallAdapter>, beforeDispose?: (adapter: CallAdapter) => Promise<void>) => CallAdapter | undefined;
 

packages/communication-react/review/stable/communication-react.api.md

@@ -48,6 +48,7 @@ import { DominantSpeakersInfo } from '@azure/communication-calling';
 import { DtmfTone as DtmfTone_2 } from '@azure/communication-calling';
 import { EnvironmentInfo } from '@azure/communication-calling';
 import { GroupCallLocator } from '@azure/communication-calling';
+import { IButton } from '@fluentui/react';
 import { IButtonProps } from '@fluentui/react';
 import { IButtonStyles } from '@fluentui/react';
 import { IContextualMenuItem } from '@fluentui/react';
@@ -87,6 +88,7 @@ import { PropertyChangedEvent } from '@azure/communication-calling';
 import { default as React_2 } from 'react';
 import { Reaction as Reaction_2 } from '@azure/communication-calling';
 import { ReactionMessage } from '@azure/communication-calling';
+import { ReactNode } from 'react';
 import type { RemoteParticipant } from '@azure/communication-calling';
 import { RemoteParticipantState as RemoteParticipantState_2 } from '@azure/communication-calling';
 import { RoomCallLocator } from '@azure/communication-calling';
@@ -116,6 +118,23 @@ export interface AcceptedTransfer {
     timestamp: Date;
 }
 
+// @public
+export type AccessibilityComponentRef = IButton | HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;
+
+// @public
+export interface AccessibilityContextType {
+    componentRef: AccessibilityComponentRef;
+    setComponentRef: (ref: AccessibilityComponentRef) => void;
+}
+
+// @public
+export const AccessibilityProvider: (props: AccessibilityProviderProps) => JSX.Element;
+
+// @public
+export type AccessibilityProviderProps = {
+    children: ReactNode;
+};
+
 // @public
 export interface ActiveErrorMessage {
     timestamp?: Date;
@@ -4654,6 +4673,9 @@ export interface TypingIndicatorStylesProps extends BaseCustomStyles {
 // @public
 export type UpdateMessageCallback = (messageId: string, content: string) => Promise<void>;
 
+// @public
+export const useAccessibility: () => AccessibilityContextType | null;
+
 // @public
 export const useAzureCommunicationCallAdapter: (args: Partial<AzureCommunicationCallAdapterArgs | AzureCommunicationOutboundCallAdapterArgs>, afterCreate?: (adapter: CallAdapter) => Promise<CallAdapter>, beforeDispose?: (adapter: CallAdapter) => Promise<void>) => CallAdapter | undefined;
 

packages/communication-react/src/index.ts

@@ -368,6 +368,13 @@ export type {
 } from '../../react-components/src';
 export type { AttachmentMetadata } from '../../acs-ui-common/src';
 
+export { AccessibilityProvider, useAccessibility } from '../../react-components/src';
+export type {
+  AccessibilityProviderProps,
+  AccessibilityComponentRef,
+  AccessibilityContextType
+} from '../../react-components/src';
+
 /* @conditional-compile-remove(file-sharing-acs) */
 export type { AttachmentMetadataInProgress, AttachmentProgressError } from '../../acs-ui-common/src';
 

packages/react-components/src/Accessibility/AccessibilityProvider.tsx

@@ -0,0 +1,67 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import { IButton } from '@fluentui/react';
+import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
+import { useEffect } from 'react';
+
+/**
+ * Type for reference to the last component used
+ * @public
+ */
+export type AccessibilityComponentRef = IButton | HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;
+
+/**
+ * Type for the context that holds the reference to the last used control
+ * @public
+ */
+export interface AccessibilityContextType {
+  /** function to set the reference to the last used control */
+  setComponentRef: (ref: AccessibilityComponentRef) => void;
+  /** reference to the last used control */
+  componentRef: AccessibilityComponentRef;
+}
+
+// Create the context with a default value
+const AccessibilityContext = createContext<AccessibilityContextType | null>(null);
+
+/**
+ * Hook to access the A11yContext content
+ * @returns The A11yContext
+ * @public
+ */
+export const useAccessibility = (): AccessibilityContextType | null => useContext(AccessibilityContext);
+
+/**
+ * Props for the AccessibilityProvider
+ * @public
+ */
+export type AccessibilityProviderProps = {
+  children: ReactNode;
+};
+
+/**
+ * Provider to access the A11yContext
+ * @public
+ */
+export const AccessibilityProvider = (props: AccessibilityProviderProps): JSX.Element => {
+  console.log('AccessibilityProvider');
+  const [componentRef, setComponentRef] = useState<AccessibilityComponentRef>(null);
+
+  const handleSetComponentRef = useCallback(
+    (ref: AccessibilityComponentRef) => {
+      console.log(ref);
+      setComponentRef(ref);
+    },
+    [setComponentRef]
+  );
+
+  useEffect(() => {
+    console.log('componentRef', componentRef);
+  }, [componentRef]);
+
+  return (
+    <AccessibilityContext.Provider value={{ setComponentRef: handleSetComponentRef, componentRef }}>
+      {props.children}
+    </AccessibilityContext.Provider>
+  );
+};

packages/react-components/src/Accessibility/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+export * from './AccessibilityProvider';

packages/react-components/src/components/CameraButton.tsx

@@ -1,14 +1,15 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import React, { useCallback, useState, useMemo } from 'react';
+import React, { useCallback, useState, useMemo, useRef } from 'react';
 import { useLocale } from '../localization';
 import { VideoStreamOptions } from '../types';
 import { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 
 import {
   ContextualMenuItemType,
+  IButton,
   IButtonProps,
   IContextualMenuItem,
   IContextualMenuItemStyles,
@@ -17,6 +18,7 @@ import {
 import { ControlBarButtonStyles } from './ControlBarButton';
 import { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';
 import { Announcer } from './Announcer';
+import { useAccessibility } from '../Accessibility';
 
 const defaultLocalVideoViewOptions = {
   scalingMode: 'Crop',
@@ -177,6 +179,8 @@ export const CameraButton = (props: CameraButtonProps): JSX.Element => {
   const strings = { ...localeStrings, ...props.strings };
   const [announcerString, setAnnouncerString] = useState<string | undefined>(undefined);
   const [announcerPresent, setAnnouncerPresent] = useState<boolean>(false);
+  const accessibility = useAccessibility();
+  const cameraButtonRef = useRef<IButton | null>(null);
 
   const disabled = props.disabled || waitForCamera;
 
@@ -322,6 +326,8 @@ export const CameraButton = (props: CameraButtonProps): JSX.Element => {
         aria-description={strings.cameraButtonAriaDescription}
         aria-roledescription={props.enableDeviceSelectionMenu ? strings.cameraButtonSplitRoleDescription : undefined}
         ariaLabel={ariaLabel}
+        onMenuClick={() => accessibility?.setComponentRef(cameraButtonRef.current)}
+        componentRef={cameraButtonRef}
         splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}
         splitButtonMenuProps={splitButtonMenuProps}
         onFocus={() => setAnnouncerPresent(true)}

packages/react-components/src/components/ControlBarButton.tsx

@@ -141,7 +141,6 @@ export const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {
         : props?.strings?.tooltipOffContent);
 
   const tooltipId = props.tooltipId ?? props.labelKey ? props.labelKey + '-tooltip' : undefined;
-
   return (
     <ControlButtonTooltip hidden={props.disableTooltip} content={tooltipContent} id={tooltipId}>
       <DefaultButton
@@ -154,6 +153,8 @@ export const ControlBarButton = (props: ControlBarButtonProps): JSX.Element => {
         aria-describedby={tooltipId}
         menuTriggerKeyCode={KeyCodes.down} // explicitly sets the keypress to activiate the split button drop down.
         text={undefined} // this is handled as a child of the button, without this the `showLabel` prop may be ignored.
+        onFocus={props.onFocus}
+        onBlur={props.onBlur}
       >
         {props.showLabel ? labelText : <></>}
       </DefaultButton>

packages/react-components/src/components/MicrophoneButton.tsx

@@ -15,11 +15,14 @@ import {
   Stack,
   IStyleFunctionOrObject,
   IToggleStyleProps,
-  IToggleStyles
+  IToggleStyles,
+  IButton
 } from '@fluentui/react';
 import { ControlBarButtonStyles } from './ControlBarButton';
 import { OptionsDevice, generateDefaultDeviceMenuProps } from './DevicesButton';
 import { Announcer } from './Announcer';
+import { useAccessibility } from '../Accessibility';
+import { useRef } from 'react';
 
 /**
  * Strings of {@link MicrophoneButton} that can be overridden.
@@ -221,6 +224,10 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
   const onRenderMicOffIcon = (): JSX.Element => {
     return <_HighContrastAwareIcon disabled={disabled} iconName="ControlButtonMicOff" />;
   };
+  // activate the context
+  const accessibility = useAccessibility();
+  // create a ref for the local component - this only works when it is not a split button.
+  const micButtonRef = useRef<IButton | null>(null);
 
   const isMicOn = props.checked;
 
@@ -313,7 +320,7 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
   };
 
   return (
-    <>
+    <div>
       {announcerPresent && <Announcer announcementString={announcerString} ariaLive={'polite'} />}
       <ControlBarButton
         {...props}
@@ -341,9 +348,15 @@ export const MicrophoneButton = (props: MicrophoneButtonProps): JSX.Element => {
         splitButtonAriaLabel={props.enableDeviceSelectionMenu ? splitButtonAriaString : undefined}
         disabled={disabled}
         primaryDisabled={primaryDisabled}
-        onFocus={() => setAnnouncerPresent(true)}
-        onBlur={() => setAnnouncerPresent(false)}
+        onFocus={() => {
+          setAnnouncerPresent(true);
+        }}
+        onBlur={() => {
+          accessibility?.setComponentRef(micButtonRef.current);
+          setAnnouncerPresent(false);
+        }}
+        componentRef={micButtonRef}
       />
-    </>
+    </div>
   );
 };

packages/react-components/src/components/ParticipantsButton.tsx

@@ -7,11 +7,12 @@ import {
   IContextualMenuProps,
   IContextualMenuStyles,
   IContextualMenuItemStyles,
-  merge
+  merge,
+  IButton
 } from '@fluentui/react';
 import { _formatString } from '@internal/acs-ui-common';
 import copy from 'copy-to-clipboard';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState, useRef } from 'react';
 import {
   ParticipantList,
   ParticipantListProps,
@@ -28,6 +29,7 @@ import { ParticipantListParticipant } from '../types';
 import { _HighContrastAwareIcon } from './HighContrastAwareIcon';
 import { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';
 import { Announcer } from './Announcer';
+import { useAccessibility } from '../Accessibility';
 
 /**
  * Styles for the {@link ParticipantsButton} menu.
@@ -183,6 +185,9 @@ export const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element
     showParticipantOverflowTooltip
   } = props;
 
+  const accessibility = useAccessibility();
+  const participantsButtonRef = useRef<IButton | null>(null);
+
   const disabled = props.disabled;
 
   const [copyInviteLinkAnnouncerStrings, setCopyInviteLinkAnnouncerStrings] = useState<string>('');
@@ -372,6 +377,10 @@ export const ParticipantsButton = (props: ParticipantsButtonProps): JSX.Element
         strings={strings}
         aria-label={strings.ariaLabel}
         labelKey={props.labelKey ?? 'participantsButtonLabel'}
+        componentRef={participantsButtonRef}
+        onBlur={() => {
+          accessibility?.setComponentRef(participantsButtonRef.current);
+        }}
       />
     </>
   );

packages/react-components/src/index.ts

@@ -32,6 +32,7 @@ export { COMPONENT_LOCALE_ZH_TW } from './localization/locales/zh-TW/ComponentLo
 export type { ComponentStrings, ComponentLocale, LocalizationProviderProps } from './localization';
 export * from './theming';
 export * from './theming/generateTheme';
+export * from './Accessibility';
 
 export type {
   BaseCustomStyles,