diff --git a/packages/fluentui/accessibility/src/behaviors/Button/toggleButtonBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Button/toggleButtonBehavior.ts
index 695833003a9863..819c697ab33b99 100644
--- a/packages/fluentui/accessibility/src/behaviors/Button/toggleButtonBehavior.ts
+++ b/packages/fluentui/accessibility/src/behaviors/Button/toggleButtonBehavior.ts
@@ -11,7 +11,7 @@ export const toggleButtonBehavior: Accessibility<ToggleButtonBehaviorProps> = pr
   return behaviorData;
 };
 
-type ToggleButtonBehaviorProps = ButtonBehaviorProps & {
+export type ToggleButtonBehaviorProps = ButtonBehaviorProps & {
   /** Indicates if a button is in pressed state. */
   active: boolean;
 };
diff --git a/packages/fluentui/accessibility/src/behaviors/Menu/menuItemBehavior.ts b/packages/fluentui/accessibility/src/behaviors/Menu/menuItemBehavior.ts
index bf9d7f3c2b320e..8e8ec639488b10 100644
--- a/packages/fluentui/accessibility/src/behaviors/Menu/menuItemBehavior.ts
+++ b/packages/fluentui/accessibility/src/behaviors/Menu/menuItemBehavior.ts
@@ -70,6 +70,8 @@ export const menuItemBehavior: Accessibility<MenuItemBehaviorProps> = props => (
 });
 
 export type MenuItemBehaviorProps = {
+  /** Indicates if tab is selected. */
+  active?: boolean;
   /** Indicated if menu item has submenu. */
   hasMenu?: boolean | object;
   /** Defines if submenu is opened. */
diff --git a/packages/fluentui/react-bindings/src/accessibility/getAccessibility.ts b/packages/fluentui/react-bindings/src/accessibility/getAccessibility.ts
index 6d9154617fad3c..bc1fee19ca8f82 100644
--- a/packages/fluentui/react-bindings/src/accessibility/getAccessibility.ts
+++ b/packages/fluentui/react-bindings/src/accessibility/getAccessibility.ts
@@ -1,20 +1,15 @@
-import {
-  Accessibility,
-  AccessibilityAttributes,
-  AccessibilityAttributesBySlot,
-  AccessibilityDefinition,
-} from '@fluentui/accessibility';
+import type { Accessibility, AccessibilityDefinition } from '@fluentui/accessibility';
 
 import { getKeyDownHandlers } from './getKeyDownHandlers';
-import { AccessibilityActionHandlers, ReactAccessibilityBehavior } from './types';
+import type { AccessibilityActionHandlers, ReactAccessibilityBehavior } from './types';
 
-const emptyBehavior: ReactAccessibilityBehavior = {
+export const emptyBehavior: ReactAccessibilityBehavior = {
   attributes: {},
   keyHandlers: {},
+  rtl: false,
 };
 
 export const getAccessibility = <Props extends Record<string, any>>(
-  displayName: string,
   behavior: Accessibility<Props>,
   behaviorProps: Props,
   isRtlEnabled: boolean,
@@ -38,28 +33,10 @@ export const getAccessibility = <Props extends Record<string, any>>(
     };
   }
 
-  if (process.env.NODE_ENV !== 'production') {
-    // For the non-production builds we enable the runtime accessibility attributes validator.
-    // We're adding the data-aa-class attribute which is being consumed by the validator, the
-    // schema is located in @fluentui/ability-attributes package.
-    if (definition.attributes) {
-      Object.keys(definition.attributes).forEach(slotName => {
-        const validatorName =
-          (definition.attributes as AccessibilityAttributesBySlot)[slotName]['data-aa-class'] ||
-          `${displayName}${slotName === 'root' ? '' : `__${slotName}`}`;
-
-        if (!(definition.attributes as AccessibilityAttributesBySlot)[slotName]) {
-          (definition.attributes as AccessibilityAttributesBySlot)[slotName] = {} as AccessibilityAttributes;
-        }
-
-        (definition.attributes as AccessibilityAttributesBySlot)[slotName]['data-aa-class'] = validatorName;
-      });
-    }
-  }
-
   return {
     ...emptyBehavior,
     ...definition,
     keyHandlers,
+    rtl: isRtlEnabled,
   };
 };
diff --git a/packages/fluentui/react-bindings/src/accessibility/types.ts b/packages/fluentui/react-bindings/src/accessibility/types.ts
index fe009083986f8b..1ee78d74034a2e 100644
--- a/packages/fluentui/react-bindings/src/accessibility/types.ts
+++ b/packages/fluentui/react-bindings/src/accessibility/types.ts
@@ -5,9 +5,10 @@ import * as React from 'react';
  * Accessibility types for React implementation.
  */
 
-export interface ReactAccessibilityBehavior extends AccessibilityDefinition {
+export interface ReactAccessibilityBehavior extends Pick<AccessibilityDefinition, 'focusZone' | 'childBehaviors'> {
   attributes: AccessibilityAttributesBySlot;
   keyHandlers: AccessibilityKeyHandlers;
+  rtl: boolean;
 }
 
 export type AccessibilityKeyHandlers = {
@@ -22,4 +23,4 @@ export type AccessibilityActionHandlers = {
   [actionName: string]: KeyboardEventHandler;
 };
 
-export type KeyboardEventHandler = (event: React.KeyboardEvent) => void;
+export type KeyboardEventHandler = (event: React.KeyboardEvent, ...args: unknown[]) => void;
diff --git a/packages/fluentui/react-bindings/src/hooks/useAccessibility.ts b/packages/fluentui/react-bindings/src/hooks/useAccessibility.ts
index ed1ffa4c0719ac..5402bf322b5bb5 100644
--- a/packages/fluentui/react-bindings/src/hooks/useAccessibility.ts
+++ b/packages/fluentui/react-bindings/src/hooks/useAccessibility.ts
@@ -33,9 +33,8 @@ export const useAccessibility = <Props extends {}>(
   behavior: Accessibility<Props>,
   options: UseAccessibilityOptions<Props> = {},
 ) => {
-  const { actionHandlers, debugName = 'Undefined', mapPropsToBehavior = () => ({}), rtl = false } = options;
-
-  const definition = getAccessibility(debugName, behavior, mapPropsToBehavior(), rtl, actionHandlers);
+  const { actionHandlers, mapPropsToBehavior = () => ({}), rtl = false } = options;
+  const definition = getAccessibility(behavior, mapPropsToBehavior(), rtl, actionHandlers);
 
   const latestDefinition = React.useRef<ReactAccessibilityBehavior>();
   const slotHandlers = React.useRef<Record<string, KeyboardEventHandler>>({});
diff --git a/packages/fluentui/react-bindings/src/hooks/useAccessibilityBehavior.ts b/packages/fluentui/react-bindings/src/hooks/useAccessibilityBehavior.ts
new file mode 100644
index 00000000000000..8038ac15595171
--- /dev/null
+++ b/packages/fluentui/react-bindings/src/hooks/useAccessibilityBehavior.ts
@@ -0,0 +1,22 @@
+import type { Accessibility } from '@fluentui/accessibility';
+
+import { getAccessibility } from '../accessibility/getAccessibility';
+import type { AccessibilityActionHandlers, ReactAccessibilityBehavior } from '../accessibility/types';
+
+type UseAccessibilityOptions<Props> = {
+  actionHandlers?: AccessibilityActionHandlers;
+  behaviorProps?: Props;
+  rtl: boolean;
+};
+
+export const useAccessibilityBehavior = <Props extends {}>(
+  behavior: Accessibility<Props>,
+  options: UseAccessibilityOptions<Props>,
+): ReactAccessibilityBehavior => {
+  const { actionHandlers, behaviorProps, rtl = false } = options;
+
+  // No need to memoize this as behaviors return:
+  // - flat props per slots - references don't matter there
+  // - action handlers - useAccessibilitySlotProps() uses useEventCallback() that does not "care" about callback references
+  return getAccessibility(behavior, behaviorProps ?? {}, rtl, actionHandlers);
+};
diff --git a/packages/fluentui/react-bindings/src/hooks/useAccessibilitySlotProps.ts b/packages/fluentui/react-bindings/src/hooks/useAccessibilitySlotProps.ts
new file mode 100644
index 00000000000000..d14b285f592995
--- /dev/null
+++ b/packages/fluentui/react-bindings/src/hooks/useAccessibilitySlotProps.ts
@@ -0,0 +1,34 @@
+import type { AccessibilityAttributes } from '@fluentui/accessibility';
+import * as React from 'react';
+
+import type { KeyboardEventHandler, ReactAccessibilityBehavior } from '../accessibility/types';
+import { useEventCallback } from './useEventCallback';
+
+type UserProps = {
+  onKeyDown?: KeyboardEventHandler;
+};
+
+type MergedProps<SlotProps extends Record<string, unknown>> = SlotProps & Partial<AccessibilityAttributes> & UserProps;
+
+export const useAccessibilitySlotProps = <SlotProps extends Record<string, unknown> & UserProps>(
+  definition: ReactAccessibilityBehavior,
+  slotName: string,
+  slotProps: SlotProps,
+): MergedProps<SlotProps> => {
+  const accessibilityHandler = definition.keyHandlers[slotName]?.onKeyDown;
+  const childBehavior = definition.childBehaviors ? definition.childBehaviors[slotName] : undefined;
+
+  const handleKeyDown = useEventCallback((e: React.KeyboardEvent, ...args: unknown[]) => {
+    const userHandler = slotProps.onKeyDown;
+
+    if (accessibilityHandler) accessibilityHandler(e);
+    if (userHandler) userHandler(e, ...args);
+  });
+
+  return {
+    ...(childBehavior && { accessibility: childBehavior }),
+    ...definition.attributes[slotName],
+    ...slotProps,
+    ...(!!accessibilityHandler && { onKeyDown: handleKeyDown }),
+  };
+};
diff --git a/packages/fluentui/react-bindings/src/index.ts b/packages/fluentui/react-bindings/src/index.ts
index 2774a198d16dc0..003cdb10514726 100644
--- a/packages/fluentui/react-bindings/src/index.ts
+++ b/packages/fluentui/react-bindings/src/index.ts
@@ -12,6 +12,8 @@ export * from './FocusZone/FocusZone.types';
 export * from './FocusZone/focusUtilities';
 
 export { useAccessibility } from './hooks/useAccessibility';
+export { useAccessibilityBehavior } from './hooks/useAccessibilityBehavior';
+export { useAccessibilitySlotProps } from './hooks/useAccessibilitySlotProps';
 export { useCallbackRef } from './hooks/useCallbackRef';
 export { useControllableState } from './hooks/useControllableState';
 export { useDeepMemo } from './hooks/useDeepMemo';
@@ -36,6 +38,7 @@ export { childrenExist } from './utils/childrenExist';
 export { getElementType } from './utils/getElementType';
 export { getUnhandledProps } from './utils/getUnhandledProps';
 export { mergeVariablesOverrides } from './utils/mergeVariablesOverrides';
+export { wrapWithFocusZone } from './utils/wrapWithFocusZone';
 
 export * from './context';
 
diff --git a/packages/fluentui/react-bindings/src/utils/wrapWithFocusZone.tsx b/packages/fluentui/react-bindings/src/utils/wrapWithFocusZone.tsx
new file mode 100644
index 00000000000000..d84210787f23c7
--- /dev/null
+++ b/packages/fluentui/react-bindings/src/utils/wrapWithFocusZone.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import type { ReactAccessibilityBehavior } from '../accessibility/types';
+import { FocusZone } from '../FocusZone/FocusZone';
+
+export function wrapWithFocusZone(
+  definition: ReactAccessibilityBehavior,
+  element: React.ReactElement & React.RefAttributes<any>,
+): React.ReactElement {
+  if (definition.focusZone) {
+    let child: React.ReactElement & React.RefAttributes<any> = element;
+
+    if (process.env.NODE_ENV !== 'production') {
+      child = React.Children.only(element);
+    }
+
+    return (
+      <FocusZone
+        {...definition.focusZone.props}
+        {...child.props}
+        as={child.type}
+        innerRef={child.ref}
+        isRtl={definition.rtl}
+      />
+    );
+  }
+
+  return element;
+}
diff --git a/packages/fluentui/react-bindings/test/hooks/useAccessibilityBehavior-test.tsx b/packages/fluentui/react-bindings/test/hooks/useAccessibilityBehavior-test.tsx
new file mode 100644
index 00000000000000..7aeff00cc57c5b
--- /dev/null
+++ b/packages/fluentui/react-bindings/test/hooks/useAccessibilityBehavior-test.tsx
@@ -0,0 +1,65 @@
+import { Accessibility, keyboardKey } from '@fluentui/accessibility';
+import { renderHook } from '@testing-library/react';
+import * as React from 'react';
+
+import { useAccessibilityBehavior } from '../../src/hooks/useAccessibilityBehavior';
+
+type TestBehaviorProps = {
+  disabled: boolean;
+};
+
+const testBehavior: Accessibility<TestBehaviorProps> = props => ({
+  attributes: {
+    root: {
+      'aria-disabled': props.disabled,
+      tabIndex: 1,
+    },
+  },
+  keyActions: {
+    root: {
+      click: {
+        keyCombinations: [{ keyCode: keyboardKey.ArrowDown }],
+      },
+    },
+  },
+});
+
+describe('useAccessibilityBehavior', () => {
+  it('sets attributes', () => {
+    const onClick = jest.fn();
+
+    const { result } = renderHook(() =>
+      useAccessibilityBehavior(testBehavior, {
+        behaviorProps: { disabled: true },
+        actionHandlers: {
+          click: ev => {
+            onClick(ev);
+          },
+        },
+        rtl: false,
+      }),
+    );
+
+    expect(result.current.attributes).toEqual({
+      root: {
+        'aria-disabled': true,
+        tabIndex: 1,
+      },
+    });
+    expect(result.current.childBehaviors).toBeUndefined();
+    expect(result.current.focusZone).toBeUndefined();
+    expect(result.current.keyHandlers).toEqual({
+      root: {
+        onKeyDown: expect.any(Function),
+      },
+    });
+
+    // Calls on `onClick`
+    result.current.keyHandlers.root?.onKeyDown?.({ keyCode: keyboardKey.ArrowDown } as unknown as React.KeyboardEvent);
+    // Does nothing
+    result.current.keyHandlers.root?.onKeyDown?.({ keyCode: keyboardKey.ArrowUp } as unknown as React.KeyboardEvent);
+
+    expect(onClick).toHaveBeenCalledWith({ keyCode: keyboardKey.ArrowDown });
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/fluentui/react-bindings/test/hooks/useAccessibilitySlotProps-test.tsx b/packages/fluentui/react-bindings/test/hooks/useAccessibilitySlotProps-test.tsx
new file mode 100644
index 00000000000000..c356aaff265dd1
--- /dev/null
+++ b/packages/fluentui/react-bindings/test/hooks/useAccessibilitySlotProps-test.tsx
@@ -0,0 +1,273 @@
+import { Accessibility, keyboardKey } from '@fluentui/accessibility';
+import { render, renderHook, fireEvent } from '@testing-library/react';
+import * as React from 'react';
+
+import { useAccessibilityBehavior } from '../../src/hooks/useAccessibilityBehavior';
+import { useAccessibilitySlotProps } from '../../src/hooks/useAccessibilitySlotProps';
+import { wrapWithFocusZone } from '../../src/utils/wrapWithFocusZone';
+
+type TestBehaviorProps = {
+  disabled: boolean;
+};
+
+type ChildBehaviorProps = {
+  pressed: boolean;
+};
+
+const testBehavior: Accessibility<TestBehaviorProps> = props => ({
+  attributes: {
+    root: {
+      'aria-disabled': props.disabled,
+      tabIndex: 1,
+    },
+    img: {
+      'aria-label': 'Pixel',
+      role: 'presentation',
+    },
+  },
+  keyActions: {
+    root: {
+      click: {
+        keyCombinations: [{ keyCode: keyboardKey.ArrowDown }],
+      },
+    },
+  },
+});
+
+const conditionalBehavior: Accessibility<{ disabled: boolean }> = props => ({
+  attributes: {
+    root: {
+      'aria-label': 'Noop behavior',
+    },
+  },
+  keyActions: {
+    root: {
+      ...((!props.disabled && {
+        click: {
+          keyCombinations: [{ keyCode: keyboardKey.ArrowDown }],
+        },
+      }) as any),
+    },
+    img: {
+      click: {
+        keyCombinations: [props.disabled ? { keyCode: keyboardKey.ArrowDown } : { keyCode: keyboardKey.ArrowUp }],
+      },
+    },
+  },
+});
+
+const childOverriddenBehavior: Accessibility<ChildBehaviorProps> = props => ({
+  attributes: {
+    root: {
+      'data-behavior': 'overridden',
+      'aria-pressed': props.pressed,
+      'aria-label': 'overridden',
+    },
+  },
+});
+
+const childBehavior: Accessibility<ChildBehaviorProps> = props => ({
+  attributes: {
+    root: {
+      'data-behavior': 'original',
+      'aria-pressed': props.pressed,
+    },
+  },
+});
+
+const overriddenChildBehavior: Accessibility<TestBehaviorProps> = props => ({
+  attributes: {
+    root: {
+      'aria-disabled': props.disabled,
+      tabIndex: 1,
+    },
+    img: {
+      'aria-label': 'Pixel',
+      role: 'presentation',
+    },
+  },
+  keyActions: {
+    root: {
+      click: {
+        keyCombinations: [{ keyCode: keyboardKey.ArrowDown }],
+      },
+    },
+  },
+  childBehaviors: {
+    child: childOverriddenBehavior,
+  },
+});
+
+type TestComponentProps = {
+  accessibility?: Accessibility<TestBehaviorProps>;
+  disabled?: boolean;
+  onClick?: (e: React.KeyboardEvent<HTMLDivElement>, slotName: string) => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+type ChildComponentProps = {
+  accessibility?: Accessibility<ChildBehaviorProps>;
+  pressed?: boolean;
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+};
+
+const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
+  const { accessibility = testBehavior, disabled, onClick, onKeyDown, ...rest } = props;
+
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
+    behaviorProps: { disabled },
+    actionHandlers: {
+      click: (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (onClick) onClick(e, 'root');
+      },
+    },
+    rtl: false,
+  });
+
+  return wrapWithFocusZone(
+    a11yBehavior,
+    <div data-testid="root" {...useAccessibilitySlotProps(a11yBehavior, 'root', { onKeyDown, ...rest })}>
+      <img
+        {...useAccessibilitySlotProps(a11yBehavior, 'img', {
+          'data-testid': 'image',
+          src: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
+        })}
+      />
+      <ChildComponent {...useAccessibilitySlotProps(a11yBehavior, 'child', {})} />
+    </div>,
+  );
+};
+
+const ChildComponent: React.FunctionComponent<ChildComponentProps> = props => {
+  const { accessibility = childBehavior, pressed, onKeyDown, ...rest } = props;
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
+    behaviorProps: { pressed },
+    rtl: false,
+  });
+
+  return <button data-testid="child" {...useAccessibilitySlotProps(a11yBehavior, 'root', { onKeyDown, ...rest })} />;
+};
+
+describe('useAccessibility', () => {
+  it('sets attributes', () => {
+    const { getByTestId } = render(<TestComponent />);
+
+    const rootEl = getByTestId('root');
+    const imageEl = getByTestId('image');
+    const childEl = getByTestId('child');
+
+    expect(rootEl.getAttribute('tabIndex')).toBe('1');
+    expect(imageEl.getAttribute('role')).toBe('presentation');
+    expect(childEl.getAttribute('data-behavior')).toBe('original');
+  });
+
+  it('attributes can be conditional', () => {
+    const { getByTestId, rerender } = render(<TestComponent disabled />);
+    const rootEl = getByTestId('root');
+
+    expect(rootEl.getAttribute('aria-disabled')).toEqual('true');
+
+    // ---
+
+    rerender(<TestComponent disabled={false} />);
+
+    expect(rootEl.getAttribute('aria-disabled')).toEqual('false');
+  });
+
+  it('attributes can be overridden', () => {
+    const { getByTestId } = render(<TestComponent tabIndex={-1} />);
+    const rootEl = getByTestId('root');
+
+    expect(rootEl.getAttribute('tabIndex')).toBe('-1');
+  });
+
+  it('child behaviors can be overridden', () => {
+    const { getByTestId } = render(<TestComponent accessibility={overriddenChildBehavior} />);
+    const childEl = getByTestId('child');
+
+    expect(childEl.getAttribute('data-behavior')).toBe('overridden');
+  });
+
+  describe('event listeners', () => {
+    it('adds event handlers', () => {
+      const onKeyDown = jest.fn();
+      const onClick = jest.fn();
+
+      const { getByTestId } = render(<TestComponent onClick={onClick} onKeyDown={onKeyDown} />);
+      const rootEl = getByTestId('root');
+
+      fireEvent.click(rootEl);
+      fireEvent.keyDown(rootEl, { keyCode: keyboardKey.ArrowDown });
+
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(onKeyDown).toHaveBeenCalledWith(
+        expect.objectContaining({
+          keyCode: keyboardKey.ArrowDown,
+        }),
+      );
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(onClick).toHaveBeenCalledWith(
+        expect.objectContaining({
+          keyCode: keyboardKey.ArrowDown,
+        }),
+        'root',
+      );
+    });
+
+    it("adds user's keydown handler", () => {
+      const onKeyDown = jest.fn();
+      const { getByTestId } = render(<TestComponent accessibility={conditionalBehavior} onKeyDown={onKeyDown} />);
+
+      const rootEl = getByTestId('root');
+      fireEvent.keyDown(rootEl, { keyCode: keyboardKey.ArrowDown });
+
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles conditional key combinations', () => {
+      const onClick = jest.fn();
+      const { getByTestId, rerender } = render(<TestComponent accessibility={conditionalBehavior} onClick={onClick} />);
+
+      const imageEl = getByTestId('image');
+      fireEvent.keyDown(imageEl, { keyCode: keyboardKey.ArrowUp });
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+
+      // ---
+
+      rerender(<TestComponent accessibility={conditionalBehavior} onClick={onClick} disabled />);
+
+      // Noop, will not call handler
+      fireEvent.keyDown(imageEl, { keyCode: keyboardKey.ArrowUp });
+      fireEvent.keyDown(imageEl, { keyCode: keyboardKey.ArrowDown });
+
+      expect(onClick).toHaveBeenCalledTimes(2);
+    });
+
+    it('handlers are referentially stable', () => {
+      const { result, rerender } = renderHook(() => {
+        const actionHandlers = React.useMemo(
+          () => ({
+            click: () => {},
+          }),
+          [],
+        );
+        const a11yBehavior = useAccessibilityBehavior(testBehavior, {
+          actionHandlers,
+          rtl: false,
+        });
+
+        return useAccessibilitySlotProps(a11yBehavior, 'root', {});
+      });
+
+      const keyDownA = result.current.onKeyDown;
+      expect(keyDownA).toBeInstanceOf(Function);
+
+      // ---
+
+      rerender();
+      expect(Object.is(result.current.onKeyDown, keyDownA)).toBe(true);
+    });
+  });
+});
diff --git a/packages/fluentui/react-bindings/test/utils/wrapWithFocusZone-test.tsx b/packages/fluentui/react-bindings/test/utils/wrapWithFocusZone-test.tsx
new file mode 100644
index 00000000000000..2370daf65fb226
--- /dev/null
+++ b/packages/fluentui/react-bindings/test/utils/wrapWithFocusZone-test.tsx
@@ -0,0 +1,93 @@
+import * as React from 'react';
+
+import { emptyBehavior } from '../../src/accessibility/getAccessibility';
+import { FocusZone } from '../../src/FocusZone/FocusZone';
+import { wrapWithFocusZone } from '../../src/utils/wrapWithFocusZone';
+import type { ReactAccessibilityBehavior } from '../../src/accessibility/types';
+
+describe('wrapWithFocusZone', () => {
+  it('do not render FocusZone without the definition in a behavior', () => {
+    const definition: ReactAccessibilityBehavior = {
+      ...emptyBehavior,
+      focusZone: undefined,
+    };
+
+    expect(wrapWithFocusZone(definition, <div />)).toMatchObject({ type: 'div' });
+  });
+
+  it('renders FocusZone with the definition in a behavior', () => {
+    const definition: ReactAccessibilityBehavior = {
+      ...emptyBehavior,
+      focusZone: {
+        props: {
+          disabled: true,
+          shouldFocusOnMount: true,
+        },
+      },
+    };
+
+    expect(wrapWithFocusZone(definition, <div />)).toMatchObject({ type: FocusZone });
+  });
+
+  it('applies props from the behavior to a FocusZone component', () => {
+    const definition: ReactAccessibilityBehavior = {
+      ...emptyBehavior,
+      focusZone: {
+        props: {
+          disabled: true,
+          shouldFocusOnMount: true,
+        },
+      },
+    };
+    const result = wrapWithFocusZone(definition, <div />);
+
+    expect(result).toMatchObject({ type: FocusZone });
+    expect(result.props).toEqual(
+      expect.objectContaining({
+        disabled: true,
+        shouldFocusOnMount: true,
+      }),
+    );
+  });
+
+  it('applies default props for FocusZone', () => {
+    const definition: ReactAccessibilityBehavior = {
+      ...emptyBehavior,
+      focusZone: {
+        props: {
+          disabled: true,
+          shouldFocusOnMount: true,
+        },
+      },
+    };
+    const result = wrapWithFocusZone(definition, <div />);
+
+    expect(result).toMatchObject({ type: FocusZone });
+    expect(result.props).toEqual(
+      expect.objectContaining({
+        preventDefaultWhenHandled: true,
+        shouldRaiseClicks: false,
+      }),
+    );
+  });
+
+  it('passes "rtl" value', () => {
+    const ltrDefinition: ReactAccessibilityBehavior = {
+      ...emptyBehavior,
+      rtl: false,
+      focusZone: {
+        props: {
+          disabled: true,
+          shouldFocusOnMount: true,
+        },
+      },
+    };
+    const rtlDefinition: ReactAccessibilityBehavior = {
+      ...ltrDefinition,
+      rtl: true,
+    };
+
+    expect(wrapWithFocusZone(ltrDefinition, <div />).props).toMatchObject({ isRtl: false });
+    expect(wrapWithFocusZone(rtlDefinition, <div />).props).toMatchObject({ isRtl: true });
+  });
+});
diff --git a/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx b/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx
index 922685acd38c50..2dcf7b0407a358 100644
--- a/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx
+++ b/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx
@@ -24,7 +24,8 @@ import {
 } from '../../types';
 import { ContainerFocusHandler } from '../../utils/accessibility/FocusHandling/FocusContainer';
 import {
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useUnhandledProps,
   getElementType,
@@ -134,28 +135,25 @@ export const Accordion = React.forwardRef<HTMLDListElement, AccordionProps>((pro
     initialState: exclusive ? alwaysActiveIndex : [alwaysActiveIndex],
   });
 
-  const actionHandlers = {
-    moveNext: e => {
-      e.preventDefault();
-      focusHandler.moveNext();
+  const a11yBehavior = useAccessibilityBehavior<AccordionBehaviorProps>(accessibility, {
+    actionHandlers: {
+      moveNext: e => {
+        e.preventDefault();
+        focusHandler.moveNext();
+      },
+      movePrevious: e => {
+        e.preventDefault();
+        focusHandler.movePrevious();
+      },
+      moveFirst: e => {
+        e.preventDefault();
+        focusHandler.moveFirst();
+      },
+      moveLast: e => {
+        e.preventDefault();
+        focusHandler.moveLast();
+      },
     },
-    movePrevious: e => {
-      e.preventDefault();
-      focusHandler.movePrevious();
-    },
-    moveFirst: e => {
-      e.preventDefault();
-      focusHandler.moveFirst();
-    },
-    moveLast: e => {
-      e.preventDefault();
-      focusHandler.moveLast();
-    },
-  };
-
-  const getA11yProps = useAccessibility<AccordionBehaviorProps>(accessibility, {
-    debugName: Accordion.displayName,
-    actionHandlers,
     rtl: context.rtl,
   });
 
@@ -170,10 +168,10 @@ export const Accordion = React.forwardRef<HTMLDListElement, AccordionProps>((pro
     rtl: context.rtl,
   });
 
-  const [focusedIndex, setfocusedIndex] = React.useState<number>();
+  const [focusedIndex, setFocusedIndex] = React.useState<number>();
 
   const handleNavigationFocus = (index: number) => {
-    setfocusedIndex(index);
+    setFocusedIndex(index);
   };
 
   const getNavigationItemsSize = () => props.panels.length;
@@ -218,7 +216,7 @@ export const Accordion = React.forwardRef<HTMLDListElement, AccordionProps>((pro
       const { index } = titleProps;
       const activeIndex = computeNewIndex(index);
       setActiveIndex(activeIndex);
-      setfocusedIndex(index);
+      setFocusedIndex(index);
 
       _.invoke(props, 'onActiveIndexChange', e, { ...props, activeIndex });
       _.invoke(predefinedProps, 'onClick', e, titleProps);
@@ -226,7 +224,7 @@ export const Accordion = React.forwardRef<HTMLDListElement, AccordionProps>((pro
     },
     onFocus: (e: React.SyntheticEvent, titleProps: AccordionTitleProps) => {
       _.invoke(predefinedProps, 'onFocus', e, titleProps);
-      setfocusedIndex(predefinedProps.index);
+      setFocusedIndex(predefinedProps.index);
     },
   });
 
@@ -296,7 +294,7 @@ export const Accordion = React.forwardRef<HTMLDListElement, AccordionProps>((pro
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ...unhandledProps,
         ref,
diff --git a/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx b/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx
index 68257870187380..e7186a4a290c35 100644
--- a/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx
@@ -17,7 +17,8 @@ import { ComponentEventHandler, FluentComponentStaticProps } from '../../types';
 import {
   useFluentContext,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useUnhandledProps,
   useStyles,
   ForwardRefWithAs,
@@ -68,11 +69,8 @@ export const AccordionContent = React.forwardRef<HTMLDListElement, AccordionCont
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(AccordionContent.handledProps, props);
 
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: AccordionContent.displayName,
-    mapPropsToBehavior: () => ({
-      accordionTitleId,
-    }),
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
+    behaviorProps: { accordionTitleId },
     rtl: context.rtl,
   });
   const handleClick = (e: React.SyntheticEvent) => {
@@ -95,7 +93,7 @@ export const AccordionContent = React.forwardRef<HTMLDListElement, AccordionCont
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         onClick: handleClick,
         ref,
diff --git a/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx b/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx
index 7d27953c1711a0..266a982f3a6f2e 100644
--- a/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx
+++ b/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx
@@ -20,7 +20,8 @@ import {
   getElementType,
   useFluentContext,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
@@ -103,7 +104,6 @@ export const AccordionTitle = React.forwardRef<HTMLDListElement, AccordionTitleP
       disabled,
       accessibility = accordionTitleBehavior,
       canBeCollapsed,
-      as,
       active,
       accordionContentId,
       className,
@@ -114,8 +114,7 @@ export const AccordionTitle = React.forwardRef<HTMLDListElement, AccordionTitleP
     const ElementType = getElementType(props);
     const unhandledProps = useUnhandledProps(AccordionTitle.handledProps, props);
 
-    const getA11yProps = useAccessibility<AccordionTitleBehaviorProps>(accessibility, {
-      debugName: AccordionTitle.displayName,
+    const a11yBehavior = useAccessibilityBehavior<AccordionTitleBehaviorProps>(accessibility, {
       actionHandlers: {
         performClick: e => {
           e.preventDefault();
@@ -123,14 +122,13 @@ export const AccordionTitle = React.forwardRef<HTMLDListElement, AccordionTitleP
           handleClick(e);
         },
       },
-      mapPropsToBehavior: () => ({
-        hasContent: !!content,
+      behaviorProps: {
         canBeCollapsed,
-        as: String(as),
+        as: String(ElementType),
         active,
         disabled,
         accordionContentId,
-      }),
+      },
       rtl: context.rtl,
     });
 
@@ -161,34 +159,23 @@ export const AccordionTitle = React.forwardRef<HTMLDListElement, AccordionTitleP
       _.invoke(props, 'onFocus', e, props);
     };
 
-    const handleWrapperOverrides = predefinedProps => ({
-      onFocus: (e: React.FocusEvent) => {
-        handleFocus(e);
-        _.invoke(predefinedProps, 'onFocus', e, props);
-      },
-      onClick: (e: React.MouseEvent) => {
-        handleClick(e);
-        _.invoke(predefinedProps, 'onClick', e, props);
-      },
+    const indicatorElement = Box.create(indicator, {
+      defaultProps: useAccessibilitySlotProps(a11yBehavior, 'indicator', {
+        styles: resolvedStyles.indicator,
+      }),
     });
 
     const contentWrapperElement = (
       <Ref innerRef={contentRef}>
         {Box.create(contentWrapper, {
-          defaultProps: () =>
-            getA11yProps('content', {
-              className: accordionTitleSlotClassNames.contentWrapper,
-              styles: resolvedStyles.contentWrapper,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'content', {
+            className: accordionTitleSlotClassNames.contentWrapper,
+            styles: resolvedStyles.contentWrapper,
+          }),
           overrideProps: predefinedProps => ({
             children: (
               <>
-                {Box.create(indicator, {
-                  defaultProps: () =>
-                    getA11yProps('indicator', {
-                      styles: resolvedStyles.indicator,
-                    }),
-                })}
+                {indicatorElement}
                 {Box.create(content, {
                   defaultProps: () => ({
                     styles: resolvedStyles.content,
@@ -196,7 +183,14 @@ export const AccordionTitle = React.forwardRef<HTMLDListElement, AccordionTitleP
                 })}
               </>
             ),
-            ...handleWrapperOverrides(predefinedProps),
+            onFocus: (e: React.FocusEvent) => {
+              handleFocus(e);
+              _.invoke(predefinedProps, 'onFocus', e, props);
+            },
+            onClick: (e: React.MouseEvent) => {
+              handleClick(e);
+              _.invoke(predefinedProps, 'onClick', e, props);
+            },
           }),
         })}
       </Ref>
@@ -205,7 +199,7 @@ export const AccordionTitle = React.forwardRef<HTMLDListElement, AccordionTitleP
     const element = (
       <ElementType
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           ref,
           ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx b/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx
index 0cf34cac5fe97b..15ad691f13fc8b 100644
--- a/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx
+++ b/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx
@@ -19,7 +19,9 @@ import { Text, TextProps } from '../Text/Text';
 import { ButtonGroup, ButtonGroupProps } from '../Button/ButtonGroup';
 import { AlertDismissAction, AlertDismissActionProps } from './AlertDismissAction';
 import {
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   getElementType,
   useStyles,
   useFluentContext,
@@ -157,14 +159,8 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) =
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(Alert.handledProps, props);
 
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: Alert.displayName,
-    mapPropsToBehavior: () => ({
-      warning,
-      danger,
-      bodyId,
-      visible,
-    }),
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
+    behaviorProps: React.useMemo(() => ({ warning, danger, bodyId, visible }), [warning, danger, bodyId, visible]),
     rtl: context.rtl,
   });
 
@@ -201,80 +197,73 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) =
     _.invoke(props, 'onFocus', e, props);
   };
 
-  const renderContent = () => {
-    const bodyContent = (
-      <>
-        {Text.create(header, {
-          defaultProps: () =>
-            getA11yProps('header', {
-              className: alertSlotClassNames.header,
-              styles: resolvedStyles.header,
-            }),
-        })}
-        {Box.create(content, {
-          defaultProps: () =>
-            getA11yProps('content', {
-              className: alertSlotClassNames.content,
-              styles: resolvedStyles.content,
-            }),
-        })}
-      </>
-    );
-
-    return (
-      <>
-        {Box.create(icon, {
-          defaultProps: () =>
-            getA11yProps('icon', {
-              className: alertSlotClassNames.icon,
-              styles: resolvedStyles.icon,
-            }),
-        })}
-        {Box.create(body, {
-          defaultProps: () =>
-            getA11yProps('body', {
-              className: alertSlotClassNames.body,
-              styles: resolvedStyles.body,
-              id: bodyId,
-            }),
-          overrideProps: {
-            children: bodyContent,
-          },
-        })}
-
-        {ButtonGroup.create(actions, {
-          defaultProps: () =>
-            getA11yProps('actions', {
-              className: alertSlotClassNames.actions,
-              styles: resolvedStyles.actions,
-            }),
-        })}
-        {dismissible &&
-          AlertDismissAction.create(dismissAction, {
-            defaultProps: () =>
-              getA11yProps('dismissAction', {
-                danger,
-                warning,
-                info,
-                success,
-                variables,
-              }),
-            overrideProps: handleDismissOverrides,
-          })}
-      </>
-    );
-  };
+  const bodyContentElement = (
+    <>
+      {Text.create(header, {
+        defaultProps: useAccessibilitySlotProps(a11yBehavior, 'header', {
+          className: alertSlotClassNames.header,
+          styles: resolvedStyles.header,
+        }),
+      })}
+      {Box.create(content, {
+        defaultProps: useAccessibilitySlotProps(a11yBehavior, 'content', {
+          className: alertSlotClassNames.content,
+          styles: resolvedStyles.content,
+        }),
+      })}
+    </>
+  );
+  const dismissActionElement = AlertDismissAction.create(dismissAction, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'dismissAction', {
+      danger,
+      warning,
+      info,
+      success,
+      variables,
+    }),
+    overrideProps: handleDismissOverrides,
+  });
+
+  const contentElement = (
+    <>
+      {Box.create(icon, {
+        defaultProps: useAccessibilitySlotProps(a11yBehavior, 'icon', {
+          className: alertSlotClassNames.icon,
+          styles: resolvedStyles.icon,
+        }),
+      })}
+      {Box.create(body, {
+        defaultProps: useAccessibilitySlotProps(a11yBehavior, 'body', {
+          className: alertSlotClassNames.body,
+          styles: resolvedStyles.body,
+          id: bodyId,
+        }),
+        overrideProps: {
+          children: bodyContentElement,
+        },
+      })}
+
+      {ButtonGroup.create(actions, {
+        defaultProps: useAccessibilitySlotProps(a11yBehavior, 'actions', {
+          className: alertSlotClassNames.actions,
+          styles: resolvedStyles.actions,
+        }),
+      })}
+      {dismissible && dismissActionElement}
+    </>
+  );
 
-  const element = getA11yProps.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         onFocus: handleFocus,
         ref,
         ...unhandledProps,
       })}
     >
-      {childrenExist(children) ? children : renderContent()}
+      {childrenExist(children) ? children : contentElement}
     </ElementType>,
   );
 
diff --git a/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx b/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx
index d8e0762ed0096c..e5e09ca9fd98b2 100644
--- a/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx
+++ b/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx
@@ -17,7 +17,8 @@ import { ComponentEventHandler, FluentComponentStaticProps, ShorthandValue } fro
 import {
   ForwardRefWithAs,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -84,7 +85,6 @@ export const AlertDismissAction = React.forwardRef<
 
   const {
     accessibility = buttonBehavior,
-    as = 'button',
     children,
     className,
     content = {},
@@ -101,12 +101,12 @@ export const AlertDismissAction = React.forwardRef<
   const hasChildren = childrenExist(children);
   const hasContent = !!content && !_.isEmpty(content);
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: AlertDismissAction.displayName,
-    mapPropsToBehavior: () => ({
-      as: String(as),
+  const ElementType = getElementType(props, 'button');
+  const a11yBehavior = useAccessibilityBehavior<ButtonBehaviorProps>(accessibility, {
+    behaviorProps: {
+      as: String(ElementType),
       disabled,
-    }),
+    },
     actionHandlers: {
       performClick: event => {
         event.preventDefault();
@@ -135,7 +135,6 @@ export const AlertDismissAction = React.forwardRef<
   });
 
   const unhandledProps = useUnhandledProps(AlertDismissAction.handledProps, props);
-  const ElementType = getElementType(props);
 
   const handleClick = (e: React.SyntheticEvent) => {
     if (disabled) {
@@ -146,10 +145,18 @@ export const AlertDismissAction = React.forwardRef<
     _.invoke(props, 'onClick', e, props);
   };
 
-  const result = (
+  const contentElement = Box.create(content, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'content', {
+      as: 'span',
+      className: alertDismissActionSlotClassNames.content,
+      styles: resolvedStyles.content,
+    }),
+  });
+
+  return (
     <ElementType
       {...rtlTextContainer.getAttributes({ forElements: [children] })}
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         onClick: handleClick,
         disabled,
         className: classes.root,
@@ -157,20 +164,9 @@ export const AlertDismissAction = React.forwardRef<
         ref,
       })}
     >
-      {hasChildren
-        ? children
-        : Box.create(content, {
-            defaultProps: () =>
-              getA11Props('content', {
-                as: 'span',
-                className: alertDismissActionSlotClassNames.content,
-                styles: resolvedStyles.content,
-              }),
-          })}
+      {hasChildren ? children : contentElement}
     </ElementType>
   );
-
-  return result;
 }) as unknown as ForwardRefWithAs<'button', HTMLButtonElement, AlertDismissActionProps> &
   FluentComponentStaticProps<AlertDismissActionProps>;
 
diff --git a/packages/fluentui/react-northstar/src/components/Attachment/Attachment.tsx b/packages/fluentui/react-northstar/src/components/Attachment/Attachment.tsx
index aba768a66a4360..17b510934b1058 100644
--- a/packages/fluentui/react-northstar/src/components/Attachment/Attachment.tsx
+++ b/packages/fluentui/react-northstar/src/components/Attachment/Attachment.tsx
@@ -1,10 +1,12 @@
-import { Accessibility, attachmentBehavior, AttachmentBehaviorProps } from '@fluentui/accessibility';
+import { Accessibility, attachmentBehavior, type AttachmentBehaviorProps } from '@fluentui/accessibility';
 import {
   ComponentWithAs,
   compose,
   getElementType,
   mergeVariablesOverrides,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useStyles,
   useFluentContext,
   useUnhandledProps,
@@ -94,8 +96,7 @@ export const Attachment = compose<'div', AttachmentProps, AttachmentStylesProps,
       variables,
     } = props;
 
-    const getA11Props = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11Behavior = useAccessibilityBehavior<AttachmentBehaviorProps>(accessibility, {
       actionHandlers: {
         performClick: e => {
           if (e.currentTarget === e.target) {
@@ -104,7 +105,7 @@ export const Attachment = compose<'div', AttachmentProps, AttachmentStylesProps,
           }
         },
       },
-      mapPropsToBehavior: () => ({ actionable }),
+      behaviorProps: { actionable },
       rtl: context.rtl,
     });
 
@@ -139,8 +140,16 @@ export const Attachment = compose<'div', AttachmentProps, AttachmentStylesProps,
       _.invoke(props, 'onClick', e, props);
     };
 
-    const element = getA11Props.unstable_wrapWithFocusZone(
-      <ElementType {...getA11Props('root', { className: classes.root, onClick: handleClick, ref, ...unhandledProps })}>
+    const element = wrapWithFocusZone(
+      a11Behavior,
+      <ElementType
+        {...useAccessibilitySlotProps(a11Behavior, 'root', {
+          className: classes.root,
+          onClick: handleClick,
+          ref,
+          ...unhandledProps,
+        })}
+      >
         {createShorthand(composeOptions.slots.icon, icon, {
           defaultProps: () => slotProps.icon,
           overrideProps: predefinedProps => ({
diff --git a/packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx b/packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx
index 92c351d5d16b48..81e0c9a512d45f 100644
--- a/packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx
+++ b/packages/fluentui/react-northstar/src/components/Avatar/Avatar.tsx
@@ -2,7 +2,8 @@ import { Accessibility } from '@fluentui/accessibility';
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   mergeVariablesOverrides,
@@ -77,8 +78,7 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref)
     variables,
   } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Avatar.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
   const { classes } = useStyles(Avatar.displayName, {
@@ -96,46 +96,44 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref)
   const unhandledProps = useUnhandledProps(Avatar.handledProps, props);
 
   const imageElement = createShorthand(AvatarImage, image, {
-    defaultProps: () =>
-      getA11Props('image', {
-        fluid: true,
-        avatar: !square,
-        title: name,
-        size,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'image', {
+      fluid: true,
+      avatar: !square,
+      title: name,
+      size,
+    }),
   });
 
   const iconElement = createShorthand(AvatarIcon, icon, {
-    defaultProps: () =>
-      getA11Props('icon', {
-        title: name,
-        size,
-        square,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'icon', {
+      title: name,
+      size,
+      square,
+    }),
   });
 
   const labelElement = createShorthand(AvatarLabel, label || {}, {
-    defaultProps: () =>
-      getA11Props('label', {
-        content: getInitials(name),
-        circular: !square,
-        title: name,
-        size,
-        square,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'label', {
+      content: getInitials(name),
+      circular: !square,
+      title: name,
+      size,
+      square,
+    }),
   });
 
   const hasGlyph = !!image || !!icon;
 
   const result = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    >
       {hasGlyph && (imageElement || iconElement)}
       {!hasGlyph && labelElement}
       {createShorthand(AvatarStatus, status as ShorthandValue<AvatarStatusProps & { as: 'span' }>, {
-        defaultProps: () =>
-          getA11Props('status', {
-            size,
-          }),
+        defaultProps: useAccessibilitySlotProps(a11yBehavior, 'status', {
+          size,
+        }),
         overrideProps: (predefinedProps: AvatarStatusProps) => ({
           variables: mergeVariablesOverrides(variables, predefinedProps.variables),
         }),
diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx
index 26b4eabbc10b60..3b4b05a8a9bbbc 100644
--- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx
+++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import {
   useFluentContext,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   getElementType,
   useUnhandledProps,
   ForwardRefWithAs,
@@ -57,8 +58,7 @@ export const AvatarIcon = React.forwardRef<HTMLSpanElement, AvatarIconProps>((pr
     rtl: context.rtl,
   });
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: AvatarIcon.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -66,7 +66,9 @@ export const AvatarIcon = React.forwardRef<HTMLSpanElement, AvatarIconProps>((pr
   const unhandledProps = useUnhandledProps(AvatarIcon.handledProps, props);
 
   const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    >
       {childrenExist(children) ? children : content}
     </ElementType>
   );
diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarImage.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarImage.tsx
index f3c9feff1c1a39..9a4b97a6bb3064 100644
--- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarImage.tsx
+++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarImage.tsx
@@ -2,7 +2,8 @@ import { Accessibility, AccessibilityAttributes, imageBehavior, ImageBehaviorPro
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -63,12 +64,8 @@ export const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
     size,
   } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: AvatarImage.displayName,
-    mapPropsToBehavior: () => ({
-      alt,
-      'aria-label': ariaLabel,
-    }),
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
+    behaviorProps: { alt, 'aria-label': ariaLabel },
     rtl: context.rtl,
   });
   const { classes } = useStyles<AvatarImageStylesProps>(AvatarImage.displayName, {
@@ -91,7 +88,11 @@ export const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(
   const ElementType = getElementType(props, 'img');
   const unhandledProps = useUnhandledProps(AvatarImage.handledProps, props);
 
-  const result = <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })} />;
+  const result = (
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    />
+  );
 
   return result;
 }) as unknown as ForwardRefWithAs<'img', HTMLImageElement, AvatarImageProps> &
diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx
index 83b127d9078ec4..432a9af0f51963 100644
--- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx
+++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx
@@ -2,7 +2,8 @@ import { Accessibility } from '@fluentui/accessibility';
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -51,8 +52,7 @@ export const AvatarLabel = React.forwardRef<HTMLSpanElement, AvatarLabelProps>((
 
   const { accessibility, children, className, content, design, styles, variables, square, size, circular } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: AvatarLabel.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -72,7 +72,7 @@ export const AvatarLabel = React.forwardRef<HTMLSpanElement, AvatarLabelProps>((
 
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatus.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatus.tsx
index 88a01dacd46753..5cb8a93036562c 100644
--- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatus.tsx
+++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatus.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import {
   useFluentContext,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   getElementType,
   useUnhandledProps,
   ForwardRefWithAs,
@@ -75,8 +76,7 @@ export const AvatarStatus = React.forwardRef<HTMLSpanElement, AvatarStatusProps>
     }),
     rtl: context.rtl,
   });
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: AvatarStatus.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
   const ElementType = getElementType(props, 'span');
@@ -90,14 +90,15 @@ export const AvatarStatus = React.forwardRef<HTMLSpanElement, AvatarStatusProps>
   });
 
   const imageElement = createShorthand(AvatarStatusImage, image, {
-    defaultProps: () =>
-      getA11Props('image', {
-        size,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'image', {
+      size,
+    }),
   });
 
   const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    >
       {imageElement || iconElement}
     </ElementType>
   );
diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx
index 773e22b82bd7c1..54c8b5e312beba 100644
--- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx
+++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import {
   useFluentContext,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   getElementType,
   useUnhandledProps,
   ForwardRefWithAs,
@@ -51,8 +52,7 @@ export const AvatarStatusIcon = React.forwardRef<HTMLSpanElement, AvatarStatusIc
     rtl: context.rtl,
   });
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: AvatarStatusIcon.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -60,7 +60,11 @@ export const AvatarStatusIcon = React.forwardRef<HTMLSpanElement, AvatarStatusIc
   const unhandledProps = useUnhandledProps(AvatarStatusIcon.handledProps, props);
 
   const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>{children}</ElementType>
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    >
+      {children}
+    </ElementType>
   );
 
   return element;
diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx
index 20fa5188a677da..685c04f1cd010a 100644
--- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx
+++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx
@@ -4,7 +4,8 @@ import { Accessibility, imageBehavior, ImageBehaviorProps } from '@fluentui/acce
 import {
   ForwardRefWithAs,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -51,8 +52,7 @@ export const AvatarStatusImage = React.forwardRef<HTMLImageElement, AvatarStatus
     rtl: context.rtl,
   });
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: AvatarStatusImage.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -60,7 +60,11 @@ export const AvatarStatusImage = React.forwardRef<HTMLImageElement, AvatarStatus
   const unhandledProps = useUnhandledProps(AvatarStatusImage.handledProps, props);
 
   const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>{children}</ElementType>
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    >
+      {children}
+    </ElementType>
   );
 
   return element;
diff --git a/packages/fluentui/react-northstar/src/components/Box/Box.tsx b/packages/fluentui/react-northstar/src/components/Box/Box.tsx
index 01ea12dbd5b6b4..bee55fbc63678f 100644
--- a/packages/fluentui/react-northstar/src/components/Box/Box.tsx
+++ b/packages/fluentui/react-northstar/src/components/Box/Box.tsx
@@ -3,9 +3,11 @@ import {
   ComponentWithAs,
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
+  wrapWithFocusZone,
 } from '@fluentui/react-bindings';
 import { Accessibility } from '@fluentui/accessibility';
 import * as React from 'react';
@@ -39,8 +41,7 @@ export const Box = compose<'div', BoxProps, BoxStylesProps, {}, {}>(
 
     const { accessibility, className, design, styles, variables, children, content } = props;
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
     const { classes } = useStyles<BoxStylesProps>(composeOptions.displayName, {
@@ -59,9 +60,10 @@ export const Box = compose<'div', BoxProps, BoxStylesProps, {}, {}>(
     const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
     const ElementType = getElementType(props);
 
-    const result = getA11yProps.unstable_wrapWithFocusZone(
+    const result = wrapWithFocusZone(
+      a11yBehavior,
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
           className: classes.root,
           ref,
diff --git a/packages/fluentui/react-northstar/src/components/Breadcrumb/Breadcrumb.tsx b/packages/fluentui/react-northstar/src/components/Breadcrumb/Breadcrumb.tsx
index 9982d7bca7ce30..202a83b67a8095 100644
--- a/packages/fluentui/react-northstar/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/fluentui/react-northstar/src/components/Breadcrumb/Breadcrumb.tsx
@@ -3,7 +3,9 @@ import * as PropTypes from 'prop-types';
 import {
   compose,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useStyles,
   useUnhandledProps,
   getElementType,
@@ -58,8 +60,7 @@ export const Breadcrumb = compose<'nav', BreadcrumbProps, BreadcrumbStylesProps,
     const { accessibility, children, content, className, design, styles, variables, size } = props;
 
     const contextValue = React.useMemo(() => ({ size }), [size]);
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
 
@@ -80,16 +81,17 @@ export const Breadcrumb = compose<'nav', BreadcrumbProps, BreadcrumbStylesProps,
     const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
     const ElementType = getElementType(props);
 
-    const result = getA11yProps.unstable_wrapWithFocusZone(
+    const result = wrapWithFocusZone(
+      a11yBehavior,
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           ...unhandledProps,
         })}
       >
         <BreadcrumbContext.Provider value={contextValue}>
           <div
-            {...getA11yProps('container', {
+            {...useAccessibilitySlotProps(a11yBehavior, 'container', {
               className: classes.container,
             })}
           >
diff --git a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbDivider.tsx b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbDivider.tsx
index 1134cd73226392..cf0d12c15dd079 100644
--- a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbDivider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbDivider.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import {
   compose,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useUnhandledProps,
   getElementType,
@@ -32,8 +33,7 @@ export const BreadcrumbDivider = compose<'span', BreadcrumbDividerProps, Breadcr
 
     const { accessibility, children, content, className, design, styles, variables } = props;
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
 
@@ -55,7 +55,7 @@ export const BreadcrumbDivider = compose<'span', BreadcrumbDividerProps, Breadcr
 
     const result = (
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           ref,
           ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbItem.tsx
index 02f9dd16033fb4..f2c4296fe16560 100644
--- a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbItem.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import {
   compose,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useUnhandledProps,
   getElementType,
@@ -42,8 +43,7 @@ export const BreadcrumbItem = compose<'div', BreadcrumbItemProps, BreadcrumbItem
     const { accessibility, children, content, className, design, styles, variables, active, disabled } = props;
     const { size } = useBreadcrumbContext();
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
 
@@ -70,7 +70,7 @@ export const BreadcrumbItem = compose<'div', BreadcrumbItemProps, BreadcrumbItem
 
     const result = (
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           ref,
           ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbLink.tsx b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbLink.tsx
index b7b8a1d24132bc..748e9b9381ff0f 100644
--- a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbLink.tsx
+++ b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbLink.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import {
   compose,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useUnhandledProps,
   getElementType,
@@ -35,8 +36,7 @@ export const BreadcrumbLink = compose<'a', BreadcrumbLinkProps, BreadcrumbLinkSt
     const { accessibility, children, content, className, design, styles, variables } = props;
     const { size } = useBreadcrumbContext();
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
 
@@ -61,7 +61,7 @@ export const BreadcrumbLink = compose<'a', BreadcrumbLinkProps, BreadcrumbLinkSt
 
     const result = (
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           ref,
           ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Button/Button.tsx b/packages/fluentui/react-northstar/src/components/Button/Button.tsx
index 67c58c6dda22a8..fed400f22cbf0b 100644
--- a/packages/fluentui/react-northstar/src/components/Button/Button.tsx
+++ b/packages/fluentui/react-northstar/src/components/Button/Button.tsx
@@ -3,7 +3,8 @@ import {
   compose,
   ComponentWithAs,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -135,7 +136,6 @@ export const Button = compose<'button', ButtonProps, ButtonStylesProps, {}, {}>(
       accessibility,
       // @ts-ignore
       active,
-      as,
       children,
       content,
       icon,
@@ -161,14 +161,14 @@ export const Button = compose<'button', ButtonProps, ButtonStylesProps, {}, {}>(
 
     const hasChildren = childrenExist(children);
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
-      mapPropsToBehavior: () => ({
-        as,
+    const ElementType = getElementType(props, 'button');
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
+      behaviorProps: {
+        as: String(ElementType),
         active,
         disabled,
         disabledFocusable,
-      }),
+      },
       actionHandlers: {
         performClick: event => {
           event.preventDefault();
@@ -209,33 +209,23 @@ export const Button = compose<'button', ButtonProps, ButtonStylesProps, {}, {}>(
     const slotProps = composeOptions.resolveSlotProps<ButtonProps>(props);
 
     const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
-    const ElementType = getElementType(props);
-
-    const renderIcon = () => {
-      return createShorthand(composeOptions.slots.icon, icon, {
-        defaultProps: () =>
-          getA11yProps('icon', {
-            styles: resolvedStyles.icon,
-            ...slotProps.icon,
-          }),
-      });
-    };
 
-    const renderLoader = () => {
-      return createShorthand(composeOptions.slots.loader, loader || {}, {
-        defaultProps: () =>
-          getA11yProps('loader', {
-            styles: resolvedStyles.loader,
-            ...slotProps.loader,
-          }),
-      });
-    };
+    const iconElement = createShorthand(composeOptions.slots.icon, icon, {
+      defaultProps: useAccessibilitySlotProps(a11yBehavior, 'icon', {
+        styles: resolvedStyles.icon,
+        ...slotProps.icon,
+      }),
+    });
+    const loaderElement = createShorthand(composeOptions.slots.loader, loader || {}, {
+      defaultProps: useAccessibilitySlotProps(a11yBehavior, 'loader', {
+        styles: resolvedStyles.loader,
+        ...slotProps.loader,
+      }),
+    });
 
-    const renderContent = () => {
-      return createShorthand(composeOptions.slots.content, content, {
-        defaultProps: () => getA11yProps('content', slotProps.content),
-      });
-    };
+    const contentElement = createShorthand(composeOptions.slots.content, content, {
+      defaultProps: useAccessibilitySlotProps(a11yBehavior, 'content', { ...slotProps.content }),
+    });
 
     const handleClick = (e: React.SyntheticEvent) => {
       if (disabled || disabledFocusable) {
@@ -253,7 +243,7 @@ export const Button = compose<'button', ButtonProps, ButtonStylesProps, {}, {}>(
     const result = (
       <ElementType
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           onClick: handleClick,
           className: classes.root,
           onFocus: handleFocus,
@@ -265,10 +255,10 @@ export const Button = compose<'button', ButtonProps, ButtonStylesProps, {}, {}>(
           children
         ) : (
           <>
-            {loading && renderLoader()}
-            {iconPosition !== 'after' && renderIcon()}
-            {renderContent()}
-            {iconPosition === 'after' && renderIcon()}
+            {loading && loaderElement}
+            {iconPosition !== 'after' && iconElement}
+            {contentElement}
+            {iconPosition === 'after' && iconElement}
           </>
         )}
       </ElementType>
diff --git a/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx b/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx
index bb6b70080d1851..cfcbeabf416ef9 100644
--- a/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx
@@ -18,7 +18,8 @@ import {
 import { Button, ButtonProps } from './Button';
 import {
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useUnhandledProps,
   useStyles,
   useFluentContext,
@@ -75,8 +76,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>((p
     rtl: context.rtl,
   });
 
-  const getA11yProps = useAccessibility<ButtonGroupBehaviorProps>(accessibility, {
-    debugName: ButtonGroup.displayName,
+  const a11yBehavior = useAccessibilityBehavior<ButtonGroupBehaviorProps>(accessibility, {
     rtl: context.rtl,
   });
 
@@ -99,7 +99,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>((p
   const element = (
     <ElementType
       {...{
-        ...getA11yProps('root', {
+        ...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           ref,
           ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Card/Card.tsx b/packages/fluentui/react-northstar/src/components/Card/Card.tsx
index dd6591c9930a76..632c6e128ce9b0 100644
--- a/packages/fluentui/react-northstar/src/components/Card/Card.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/Card.tsx
@@ -1,7 +1,9 @@
 import { Accessibility, cardBehavior, CardBehaviorProps } from '@fluentui/accessibility';
 import {
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useStyles,
   useFluentContext,
   useUnhandledProps,
@@ -128,8 +130,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
   const ElementType = getElementType(props);
 
   const unhandledProps = useUnhandledProps(Card.handledProps, props);
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: Card.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     actionHandlers: {
       performClick: e => {
         // prevent Spacebar from scrolling
@@ -140,9 +141,9 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
         cardRef.current.focus();
       },
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       disabled,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -182,9 +183,10 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
 
   const element = (
     <Ref innerRef={cardRef}>
-      {getA11yProps.unstable_wrapWithFocusZone(
+      {wrapWithFocusZone(
+        a11yBehavior,
         <ElementType
-          {...getA11yProps('root', {
+          {...useAccessibilitySlotProps(a11yBehavior, 'root', {
             className: classes.root,
             onClick: handleClick,
             ref,
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx b/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx
index 04cdd1061fe442..5d615f8d8d3e81 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx
@@ -7,7 +7,8 @@ import {
   getElementType,
   useUnhandledProps,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 import * as PropTypes from 'prop-types';
@@ -34,8 +35,7 @@ export const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>((props,
   const { accessibility, className, design, styles, variables, children, fitted } = props;
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(CardBody.handledProps, props);
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: CardBody.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -53,7 +53,7 @@ export const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>((props,
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx b/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx
index 3f67b5a8f0f2a7..264593ae4b2acb 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx
@@ -6,7 +6,8 @@ import {
   useStyles,
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
@@ -31,8 +32,7 @@ export const CardColumn = React.forwardRef<HTMLDivElement, CardColumnProps>((pro
 
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(CardColumn.handledProps, props);
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: CardColumn.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -49,7 +49,7 @@ export const CardColumn = React.forwardRef<HTMLDivElement, CardColumnProps>((pro
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx b/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx
index 4cf6be6942fce5..c8da9ff94b9830 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx
@@ -2,7 +2,8 @@ import { Accessibility } from '@fluentui/accessibility';
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -34,8 +35,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
   const { accessibility, className, design, styles, variables, children, fitted } = props;
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(CardFooter.handledProps, props);
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: CardFooter.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -53,7 +53,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx b/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx
index b22e493e4a8c97..554479252fa8d5 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx
@@ -2,7 +2,8 @@ import { Accessibility } from '@fluentui/accessibility';
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -35,8 +36,7 @@ export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((pro
   const { accessibility, className, design, styles, variables, children, fitted } = props;
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(CardHeader.handledProps, props);
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: CardHeader.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -54,7 +54,7 @@ export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((pro
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx b/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx
index 4a4d8108a1c35c..e090aeafe3c0cc 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx
@@ -3,7 +3,8 @@ import {
   ForwardRefWithAs,
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
 } from '@fluentui/react-bindings';
@@ -38,8 +39,7 @@ export const CardPreview = React.forwardRef<HTMLDivElement, CardPreviewProps>((p
   const { accessibility, className, design, styles, variables, children, horizontal, fitted } = props;
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(CardPreview.handledProps, props);
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: CardPreview.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -57,7 +57,7 @@ export const CardPreview = React.forwardRef<HTMLDivElement, CardPreviewProps>((p
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx b/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx
index 41cdc84186dfb3..c92cc1da723664 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx
@@ -2,7 +2,8 @@ import { Accessibility } from '@fluentui/accessibility';
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
   ForwardRefWithAs,
@@ -31,8 +32,7 @@ export const CardTopControls = React.forwardRef<HTMLDivElement, CardTopControlsP
   const { accessibility, className, design, styles, variables, children } = props;
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(CardTopControls.handledProps, props);
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: CardTopControls.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -49,7 +49,7 @@ export const CardTopControls = React.forwardRef<HTMLDivElement, CardTopControlsP
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx
index dbe6fcf36622cf..d39e9921c70d1e 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx
@@ -24,7 +24,8 @@ import { CarouselNavigationItem, CarouselNavigationItemProps } from './CarouselN
 import { CarouselPaddle, CarouselPaddleProps } from './CarouselPaddle';
 import {
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
   useUnhandledProps,
@@ -225,8 +226,15 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>((props,
   const previousPaddleHidden = items !== undefined && !circular && activeIndex === 0;
 
   const unhandledProps = useUnhandledProps(Carousel.handledProps, props);
-  const getA11yProps = useAccessibility<CarouselBehaviorProps>(accessibility, {
-    debugName: Carousel.displayName,
+  const a11yBehavior = useAccessibilityBehavior<CarouselBehaviorProps>(accessibility, {
+    behaviorProps: {
+      paddlePreviousHidden: previousPaddleHidden,
+      paddleNextHidden: nextPaddleHidden,
+      navigation,
+      ariaLiveOn,
+      'aria-roledescription': ariaRoleDescription,
+      'aria-label': ariaLabel,
+    },
     actionHandlers: {
       showNextSlideByKeyboardNavigation: e => {
         e.preventDefault();
@@ -247,14 +255,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>((props,
         handlePreviousPaddleFocus();
       },
     },
-    mapPropsToBehavior: () => ({
-      paddlePreviousHidden: previousPaddleHidden,
-      paddleNextHidden: nextPaddleHidden,
-      navigation,
-      ariaLiveOn,
-      'aria-roledescription': ariaRoleDescription,
-      'aria-label': ariaLabel,
-    }),
+    rtl: context.rtl,
   });
 
   const { classes } = useStyles<CarouselStylesProps>(Carousel.displayName, {
@@ -328,52 +329,50 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>((props,
     },
   });
 
-  const renderContent = () => {
-    return (
+  const contentElement = (
+    <div
+      {...useAccessibilitySlotProps(a11yBehavior, 'itemsContainerWrapper', {
+        className: classes.itemsContainerWrapper,
+      })}
+    >
       <div
-        {...getA11yProps('itemsContainerWrapper', {
-          className: classes.itemsContainerWrapper,
+        {...useAccessibilitySlotProps(a11yBehavior, 'itemsContainer', {
+          className: cx(carouselSlotClassNames.itemsContainer, classes.itemsContainer),
         })}
       >
-        <div
-          {...getA11yProps('itemsContainer', {
-            className: cx(carouselSlotClassNames.itemsContainer, classes.itemsContainer),
-          })}
-        >
-          {items &&
-            items.map((item, index) => {
-              const itemRef = itemRefs[index];
-              const active = activeIndex === index;
-              const animationName = getAnimationName({
-                active,
-                dir,
-                animationEnterFromPrev,
-                animationEnterFromNext,
-                animationExitToPrev,
-                animationExitToNext,
-              });
-
-              return (
-                <Animation visible={active} key={item['key'] || index} mountOnEnter unmountOnExit name={animationName}>
-                  <Ref innerRef={itemRef}>
-                    {CarouselItem.create(item, {
-                      defaultProps: () => ({
-                        active,
-                        navigation: !!navigation,
-                        ...(getItemPositionText && {
-                          itemPositionText: getItemPositionText(index, items.length),
-                        }),
+        {items &&
+          items.map((item, index) => {
+            const itemRef = itemRefs[index];
+            const active = activeIndex === index;
+            const animationName = getAnimationName({
+              active,
+              dir,
+              animationEnterFromPrev,
+              animationEnterFromNext,
+              animationExitToPrev,
+              animationExitToNext,
+            });
+
+            return (
+              <Animation visible={active} key={item['key'] || index} mountOnEnter unmountOnExit name={animationName}>
+                <Ref innerRef={itemRef}>
+                  {CarouselItem.create(item, {
+                    defaultProps: () => ({
+                      active,
+                      navigation: !!navigation,
+                      ...(getItemPositionText && {
+                        itemPositionText: getItemPositionText(index, items.length),
                       }),
-                      overrideProps: overrideItemProps,
-                    })}
-                  </Ref>
-                </Animation>
-              );
-            })}
-        </div>
+                    }),
+                    overrideProps: overrideItemProps,
+                  })}
+                </Ref>
+              </Animation>
+            );
+          })}
       </div>
-    );
-  };
+    </div>
+  );
 
   const handleNextPaddleFocus = () => {
     // if 'next' paddle will disappear, will focus 'previous' one.
@@ -425,26 +424,24 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>((props,
     <>
       <Ref innerRef={paddlePreviousRef}>
         {CarouselPaddle.create(paddlePrevious, {
-          defaultProps: () =>
-            getA11yProps('paddlePrevious', {
-              className: carouselSlotClassNames.paddlePrevious,
-              previous: true,
-              hidden: previousPaddleHidden,
-              disableClickableNav,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'paddlePrevious', {
+            className: carouselSlotClassNames.paddlePrevious,
+            previous: true,
+            hidden: previousPaddleHidden,
+            disableClickableNav,
+          }),
           overrideProps: (predefinedProps: CarouselPaddleProps) =>
             handlePaddleOverrides(predefinedProps, 'paddlePrevious'),
         })}
       </Ref>
       <Ref innerRef={paddleNextRef}>
         {CarouselPaddle.create(paddleNext, {
-          defaultProps: () =>
-            getA11yProps('paddleNext', {
-              className: carouselSlotClassNames.paddleNext,
-              next: true,
-              hidden: nextPaddleHidden,
-              disableClickableNav,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'paddleNext', {
+            className: carouselSlotClassNames.paddleNext,
+            next: true,
+            hidden: nextPaddleHidden,
+            disableClickableNav,
+          }),
           overrideProps: (predefinedProps: CarouselPaddleProps) => handlePaddleOverrides(predefinedProps, 'paddleNext'),
         })}
       </Ref>
@@ -501,7 +498,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>((props,
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
@@ -512,7 +509,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>((props,
       ) : (
         <>
           {renderPaddles()}
-          {renderContent()}
+          {contentElement}
           {renderNavigation()}
         </>
       )}
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx
index fca6aaad70e1e6..b089aaf7c0ad07 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx
@@ -14,7 +14,8 @@ import {
 import { screenReaderContainerStyles } from '../../utils/accessibility/Styles/accessibilityStyles';
 import { FluentComponentStaticProps } from '../../types';
 import {
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   getElementType,
   useUnhandledProps,
@@ -75,8 +76,7 @@ export const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
     variables,
   } = props;
   const ElementType = getElementType(props);
-  const getA11yProps = useAccessibility<CarouselItemBehaviorProps>(accessibility, {
-    debugName: CarouselItem.displayName,
+  const a11yBehavior = useAccessibilityBehavior<CarouselItemBehaviorProps>(accessibility, {
     actionHandlers: {
       arrowKeysNavigationStopPropagation: e => {
         // let event propagate, when it was invoke on the element where arrow keys should rotate carousel
@@ -85,10 +85,11 @@ export const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
         }
       },
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       navigation,
       active,
-    }),
+    },
+    rtl: context.rtl,
   });
 
   const { classes } = useStyles<CarouselItemStylesProps>(CarouselItem.displayName, {
@@ -104,7 +105,7 @@ export const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx
index d8a2ccaad637b8..f1eeca42726cce 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx
@@ -4,7 +4,9 @@ import {
   getElementType,
   useFluentContext,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useStyles,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
@@ -94,8 +96,7 @@ export const CarouselNavigation = React.forwardRef<HTMLUListElement, CarouselNav
   const ElementType = getElementType(props, 'ul');
   const unhandledProps = useUnhandledProps(CarouselNavigation.handledProps, props);
 
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: CarouselNavigation.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -125,28 +126,31 @@ export const CarouselNavigation = React.forwardRef<HTMLUListElement, CarouselNav
     variables: mergeVariablesOverrides(variables, predefinedProps.variables),
   });
 
+  const itemA11yProps = useAccessibilitySlotProps(a11yBehavior, 'item', {});
+
   const renderItems = () => {
     return _.map(items, (item, index) =>
       CarouselNavigationItem.create(item, {
-        defaultProps: () =>
-          getA11yProps('item', {
-            active: index === activeIndex,
-            iconOnly,
-            index,
-            primary,
-            secondary,
-            vertical,
-            thumbnails,
-            disableClickableNav,
-          }),
+        defaultProps: () => ({
+          ...itemA11yProps,
+          active: index === activeIndex,
+          iconOnly,
+          index,
+          primary,
+          secondary,
+          vertical,
+          thumbnails,
+          disableClickableNav,
+        }),
         overrideProps: handleItemOverrides(variables),
       }),
     );
   };
 
-  const element = getA11yProps.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx
index 3dda6dd15b3852..f43dcc2f78b4e4 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx
@@ -20,7 +20,8 @@ import {
   getElementType,
   useFluentContext,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
@@ -112,14 +113,14 @@ export const CarouselNavigationItem = React.forwardRef<HTMLLIElement, CarouselNa
   const ElementType = getElementType(props, 'li');
   const unhandledProps = useUnhandledProps(CarouselNavigationItem.handledProps, props);
 
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: CarouselNavigationItem.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     actionHandlers: {
       performClick: event => !event.defaultPrevented && handleClick(event),
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       active,
-    }),
+    },
+    rtl: context.rtl,
   });
 
   const { classes, styles: resolvedStyles } = useStyles<CarouselNavigationItemStylesProps>(
@@ -176,7 +177,7 @@ export const CarouselNavigationItem = React.forwardRef<HTMLLIElement, CarouselNa
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         onBlur: handleBlur,
         onFocus: handleFocus,
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx
index d2dee348cb47cb..ae983a89fe73d4 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx
@@ -18,7 +18,8 @@ import { ComponentEventHandler, FluentComponentStaticProps, ShorthandValue } fro
 import {
   getElementType,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useUnhandledProps,
   ForwardRefWithAs,
@@ -80,7 +81,6 @@ export const CarouselPaddle = React.forwardRef<HTMLButtonElement, CarouselPaddle
 
     const {
       accessibility = buttonBehavior,
-      as,
       children,
       className,
       content = {},
@@ -96,12 +96,12 @@ export const CarouselPaddle = React.forwardRef<HTMLButtonElement, CarouselPaddle
 
     const hasChildren = childrenExist(children);
 
-    const getA11Props = useAccessibility(accessibility, {
-      debugName: CarouselPaddle.displayName,
-      mapPropsToBehavior: () => ({
-        as: String(as),
+    const ElementType = getElementType(props, 'button');
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
+      behaviorProps: {
+        as: String(ElementType),
         disabled,
-      }),
+      },
       actionHandlers: {
         performClick: event => {
           event.preventDefault();
@@ -129,7 +129,6 @@ export const CarouselPaddle = React.forwardRef<HTMLButtonElement, CarouselPaddle
     });
 
     const unhandledProps = useUnhandledProps(CarouselPaddle.handledProps, props);
-    const ElementType = getElementType(props, 'button');
 
     const handleClick = (e: React.SyntheticEvent) => {
       if (disabled) {
@@ -140,10 +139,18 @@ export const CarouselPaddle = React.forwardRef<HTMLButtonElement, CarouselPaddle
       _.invoke(props, 'onClick', e, props);
     };
 
+    const contentElement = Box.create(content, {
+      defaultProps: useAccessibilitySlotProps(a11yBehavior, 'content', {
+        as: 'span',
+        className: carouselPaddleSlotClassNames.content,
+        styles: resolvedStyles.content,
+      }),
+    });
+
     const result = (
       <ElementType
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
-        {...getA11Props('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           onClick: handleClick,
           disabled,
           className: classes.root,
@@ -151,16 +158,7 @@ export const CarouselPaddle = React.forwardRef<HTMLButtonElement, CarouselPaddle
           ...unhandledProps,
         })}
       >
-        {hasChildren
-          ? children
-          : Box.create(content, {
-              defaultProps: () =>
-                getA11Props('content', {
-                  as: 'span',
-                  className: carouselPaddleSlotClassNames.content,
-                  styles: resolvedStyles.content,
-                }),
-            })}
+        {hasChildren ? children : contentElement}
       </ElementType>
     );
 
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx
index 09b4ba7124ec7c..8a48b300b2e407 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import {
   useFluentContext,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   getElementType,
   useUnhandledProps,
   ForwardRefWithAs,
@@ -45,8 +46,7 @@ export const CarouselPaddlesContainer = React.forwardRef<HTMLDivElement, Carouse
       rtl: context.rtl,
     });
 
-    const getA11Props = useAccessibility(accessibility, {
-      debugName: CarouselPaddlesContainer.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
 
@@ -54,7 +54,9 @@ export const CarouselPaddlesContainer = React.forwardRef<HTMLDivElement, Carouse
     const unhandledProps = useUnhandledProps(CarouselPaddlesContainer.handledProps, props);
 
     const element = (
-      <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
+      <ElementType
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+      >
         {childrenExist(children) ? children : content}
       </ElementType>
     );
diff --git a/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx b/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx
index 80fa763ad5d726..f5e54427d9aa9c 100644
--- a/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx
+++ b/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx
@@ -2,7 +2,9 @@ import { Accessibility, chatBehavior, ChatBehaviorProps } from '@fluentui/access
 import {
   ForwardRefWithAs,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -66,8 +68,7 @@ export const Chat = React.forwardRef<HTMLUListElement, ChatProps>((props, ref) =
     variables,
   } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Chat.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
   const { classes } = useStyles<ChatStylesProps>(Chat.displayName, {
@@ -85,9 +86,10 @@ export const Chat = React.forwardRef<HTMLUListElement, ChatProps>((props, ref) =
   const ElementType = getElementType(props, 'ul');
   const unhandledProps = useUnhandledProps(Chat.handledProps, props);
 
-  const element = getA11Props.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx
index 2791b9e499c538..76b145a47c67fb 100644
--- a/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx
@@ -2,7 +2,8 @@ import { Accessibility } from '@fluentui/accessibility';
 import {
   ForwardRefWithAs,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -85,8 +86,7 @@ export const ChatItem = React.forwardRef<HTMLLIElement, ChatItemProps>((props, r
     unstable_layout: layout = 'default',
   } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: ChatItem.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
   const { classes, styles: resolvedStyles } = useStyles<ChatItemStylesProps>(ChatItem.displayName, {
@@ -106,24 +106,24 @@ export const ChatItem = React.forwardRef<HTMLLIElement, ChatItemProps>((props, r
     rtl: context.rtl,
   });
 
-  const renderContent = () => {
-    const gutterElement = Box.create(gutter, {
-      defaultProps: () =>
-        getA11Props('gutter', {
-          className: chatItemSlotClassNames.gutter,
-          styles: resolvedStyles.gutter,
-        }),
-    });
-    const messageElement = Box.create(message, {
-      defaultProps: () =>
-        getA11Props('message', {
-          className: chatItemSlotClassNames.message,
-          styles: resolvedStyles.message,
-        }),
-    });
+  const gutterElement = Box.create(gutter, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'gutter', {
+      className: chatItemSlotClassNames.gutter,
+      styles: resolvedStyles.gutter,
+    }),
+  });
+  const messageElement = Box.create(message, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'message', {
+      className: chatItemSlotClassNames.message,
+      styles: resolvedStyles.message,
+    }),
+  });
+
+  const itemContextValue = React.useMemo(() => ({ attached }), [attached]);
 
+  const renderContent = () => {
     return (
-      <ChatItemContextProvider value={{ attached }}>
+      <ChatItemContextProvider value={itemContextValue}>
         {(contentPosition === 'start' || density === 'compact') && gutterElement}
         {messageElement}
         {contentPosition === 'end' && density === 'comfy' && gutterElement}
@@ -136,7 +136,7 @@ export const ChatItem = React.forwardRef<HTMLLIElement, ChatItemProps>((props, r
 
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx
index 9814c0175b518a..a4f9cddebcfcd7 100644
--- a/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx
+++ b/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx
@@ -8,7 +8,9 @@ import {
 } from '@fluentui/accessibility';
 import {
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useControllableState,
   useContextSelector,
   useFluentContext,
@@ -335,7 +337,7 @@ export const ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageProps>((p
   // `focused` state is used for show/hide actionMenu
   const [focused, setFocused] = React.useState<boolean>(false);
 
-  const getA11Props = useAccessibility(accessibility, {
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     actionHandlers: {
       // prevents default FocusZone behavior, e.g., in ChatMessageBehavior, it prevents FocusZone from using arrow keys
       // as navigation (only Tab key should work)
@@ -354,12 +356,11 @@ export const ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageProps>((p
         }
       },
     },
-    debugName: ChatMessage.displayName,
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       hasActionMenu,
       inlineActionMenu,
       actionMenuId: actionMenuId.current,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -543,39 +544,95 @@ export const ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageProps>((p
     defaultProps: () => ({ density }),
   });
 
+  const compactBodyElement = Box.create(compactBody || {}, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'compactBody', {
+      className: chatMessageSlotClassNames.compactBody,
+      styles: resolvedStyles.compactBody,
+    }),
+    overrideProps: () => ({
+      content: (
+        <>
+          <Flex.Item grow={1}>
+            <div>
+              {authorElement}
+              {messageContent}
+            </div>
+          </Flex.Item>
+          {timestampElement}
+          {detailsElement}
+          {badgeElement}
+        </>
+      ),
+    }),
+  });
+
+  const bubbleElement = Box.create(bubble || {}, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'bubble', {
+      className: chatMessageSlotClassNames.bubble,
+      styles: resolvedStyles.bubble,
+    }),
+    overrideProps: () => ({
+      ref: actionsMenuTargetRef,
+      content: (
+        <>
+          {actionMenuElement}
+          {messageContent}
+          {reactionGroupElement}
+          {readStatusElement}
+        </>
+      ),
+      onMouseEnter(e: React.SyntheticEvent) {
+        popperRef.current?.updatePosition();
+        handleMouseEnter(e);
+      },
+      onMouseLeave(e: React.SyntheticEvent) {
+        handleMouseLeave(e);
+      },
+    }),
+  });
+
+  const bubbleInsetElement = Box.create(bubbleInset || {}, {
+    defaultProps: () => ({
+      as: 'span',
+      className: chatMessageSlotClassNames.bubbleInset,
+      styles: resolvedStyles.bubbleInset,
+    }),
+    overrideProps: () => ({
+      content: (
+        <>
+          {badgeElement}
+          {bubbleInsetContent}
+          {timestampElement}
+        </>
+      ),
+    }),
+  });
+
+  const bodyElement = Box.create(body || {}, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'body', {
+      className: chatMessageSlotClassNames.body,
+      styles: resolvedStyles.body,
+    }),
+    overrideProps: () => ({
+      content: (
+        <>
+          {bubbleElement}
+          {bubbleInsetElement}
+        </>
+      ),
+    }),
+  });
+
   let elements = <></>;
   if (density === 'compact') {
     const headerElement = createShorthand(ChatMessageHeader, header);
 
-    const bodyElement = Box.create(compactBody || {}, {
-      defaultProps: () =>
-        getA11Props('compactBody', {
-          className: chatMessageSlotClassNames.compactBody,
-          styles: resolvedStyles.compactBody,
-        }),
-      overrideProps: () => ({
-        content: (
-          <>
-            <Flex.Item grow={1}>
-              <div>
-                {authorElement}
-                {messageContent}
-              </div>
-            </Flex.Item>
-            {timestampElement}
-            {detailsElement}
-            {badgeElement}
-          </>
-        ),
-      }),
-    });
-
     elements = (
       <>
         {actionMenuElement}
         <div className={chatMessageSlotClassNames.bar} />
         {headerElement}
-        {bodyElement}
+        {compactBodyElement}
         {reactionGroupElement}
         {readStatusElement}
       </>
@@ -594,65 +651,6 @@ export const ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageProps>((p
       }),
     });
 
-    const bubbleElement = Box.create(bubble || {}, {
-      defaultProps: () =>
-        getA11Props('bubble', {
-          className: chatMessageSlotClassNames.bubble,
-          styles: resolvedStyles.bubble,
-        }),
-      overrideProps: () => ({
-        ref: actionsMenuTargetRef,
-        content: (
-          <>
-            {actionMenuElement}
-            {messageContent}
-            {reactionGroupElement}
-            {readStatusElement}
-          </>
-        ),
-        onMouseEnter(e: React.SyntheticEvent) {
-          popperRef.current?.updatePosition();
-          handleMouseEnter(e);
-        },
-        onMouseLeave(e: React.SyntheticEvent) {
-          handleMouseLeave(e);
-        },
-      }),
-    });
-
-    const bubbleInsetElement = Box.create(bubbleInset || {}, {
-      defaultProps: () => ({
-        as: 'span',
-        className: chatMessageSlotClassNames.bubbleInset,
-        styles: resolvedStyles.bubbleInset,
-      }),
-      overrideProps: () => ({
-        content: (
-          <>
-            {badgeElement}
-            {bubbleInsetContent}
-            {timestampElement}
-          </>
-        ),
-      }),
-    });
-
-    const bodyElement = Box.create(body || {}, {
-      defaultProps: () =>
-        getA11Props('body', {
-          className: chatMessageSlotClassNames.body,
-          styles: resolvedStyles.body,
-        }),
-      overrideProps: () => ({
-        content: (
-          <>
-            {bubbleElement}
-            {bubbleInsetElement}
-          </>
-        ),
-      }),
-    });
-
     elements = (
       <>
         {headerElement}
@@ -689,9 +687,10 @@ export const ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageProps>((p
 
   const element = (
     <Ref innerRef={!isRefreshComfyLayout && actionsMenuTargetRef}>
-      {getA11Props.unstable_wrapWithFocusZone(
+      {wrapWithFocusZone(
+        a11yBehavior,
         <ElementType
-          {...getA11Props('root', {
+          {...useAccessibilitySlotProps(a11yBehavior, 'root', {
             className: rootClasses,
             onBlur: handleBlur,
             onFocus: handleFocus,
diff --git a/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx b/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx
index 80fd1c8d71b04b..8e39f842635117 100644
--- a/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx
+++ b/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx
@@ -2,7 +2,8 @@ import { Accessibility, checkboxBehavior, CheckboxBehaviorProps } from '@fluentu
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useControllableState,
   useFluentContext,
   useStyles,
@@ -99,12 +100,11 @@ export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>((props,
     initialState: false,
   });
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Checkbox.displayName,
-    mapPropsToBehavior: () => ({
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
+    behaviorProps: {
       checked,
       disabled,
-    }),
+    },
     actionHandlers: {
       performClick: (e: React.KeyboardEvent) => {
         e.preventDefault();
@@ -156,16 +156,15 @@ export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>((props,
   };
 
   const labelElement = Text.create(label, {
-    defaultProps: () =>
-      getA11Props('label', {
-        styles: resolvedStyles.label,
-        className: checkboxSlotClassNames.label,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'label', {
+      styles: resolvedStyles.label,
+      className: checkboxSlotClassNames.label,
+    }),
   });
 
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         onClick: handleClick,
         onChange: handleChange,
@@ -175,11 +174,10 @@ export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>((props,
     >
       {labelPosition === 'start' && labelElement}
       {Box.create(indicator, {
-        defaultProps: () =>
-          getA11Props('indicator', {
-            className: checkboxSlotClassNames.indicator,
-            styles: toggle ? resolvedStyles.toggle : resolvedStyles.checkbox,
-          }),
+        defaultProps: useAccessibilitySlotProps(a11yBehavior, 'indicator', {
+          className: checkboxSlotClassNames.indicator,
+          styles: toggle ? resolvedStyles.toggle : resolvedStyles.checkbox,
+        }),
       })}
       {labelPosition === 'end' && labelElement}
     </ElementType>
diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx
index 4fc1fa2f7df238..a32f723fb21633 100644
--- a/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx
+++ b/packages/fluentui/react-northstar/src/components/Datepicker/Datepicker.tsx
@@ -17,7 +17,9 @@ import {
 
 import {
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -312,8 +314,7 @@ export const Datepicker = React.forwardRef<HTMLDivElement, DatepickerProps>((_pr
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(Datepicker.handledProps, props);
 
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: Datepicker.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     actionHandlers: {
       open: e => {
         if (allowManualInput) {
@@ -326,11 +327,11 @@ export const Datepicker = React.forwardRef<HTMLDivElement, DatepickerProps>((_pr
         e.preventDefault();
       },
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       'aria-invalid': ariaInvalid,
       'aria-labelledby': ariaLabelledby,
       allowManualInput,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -361,7 +362,7 @@ export const Datepicker = React.forwardRef<HTMLDivElement, DatepickerProps>((_pr
   });
 
   const calendarElement = createShorthand(DatepickerCalendar, calendar, {
-    defaultProps: () => getA11yProps('calendar', { ...calendarOptions, ...dateFormatting }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'calendar', { ...calendarOptions, ...dateFormatting }),
     overrideProps: overrideDatepickerCalendarProps,
   });
 
@@ -420,28 +421,29 @@ export const Datepicker = React.forwardRef<HTMLDivElement, DatepickerProps>((_pr
     <Button icon={<CalendarIcon />} title={props.openCalendarTitle} iconOnly disabled={props.disabled} type="button" />
   );
 
-  const element = getA11yProps.unstable_wrapWithFocusZone(
+  const inputElement = createShorthand(Input, input, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'input', {
+      placeholder: props.inputPlaceholder,
+      disabled: props.disabled,
+      error: !!error,
+      value: formattedDate,
+      readOnly: !allowManualInput,
+      required: props.required,
+      'aria-label': formatRestrictedInput(restrictedDatesOptions, dateFormatting),
+    }),
+    overrideProps: overrideInputProps,
+  });
+
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
       })}
     >
-      {!props.buttonOnly &&
-        createShorthand(Input, input, {
-          defaultProps: () =>
-            getA11yProps('input', {
-              placeholder: props.inputPlaceholder,
-              disabled: props.disabled,
-              error: !!error,
-              value: formattedDate,
-              readOnly: !allowManualInput,
-              required: props.required,
-              'aria-label': formatRestrictedInput(restrictedDatesOptions, dateFormatting),
-            }),
-          overrideProps: overrideInputProps,
-        })}
+      {!props.buttonOnly && inputElement}
       {createShorthand(Popup, popup, {
         defaultProps: () => ({
           open: openState && !props.disabled,
diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx
index cfed38751dbd03..91892f3f50dceb 100644
--- a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx
+++ b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx
@@ -21,7 +21,8 @@ import {
 import {
   ForwardRefWithAs,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -158,8 +159,7 @@ export const DatepickerCalendar = React.forwardRef<HTMLDivElement, DatepickerCal
       setGridNavigatedDate(date);
     }
   };
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: DatepickerCalendar.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     actionHandlers: {
       addWeek: e => {
         e.preventDefault();
@@ -330,30 +330,32 @@ export const DatepickerCalendar = React.forwardRef<HTMLDivElement, DatepickerCal
     }
   }, [gridNavigatedDate, normalizedGridDate, shouldFocusInDayGrid]);
 
+  const cellA11yProps = useAccessibilitySlotProps(a11yBehavior, 'calendarCell', {});
+
   const renderCell = (day: IDay, content) =>
     createShorthand(DatepickerCalendarCell, calendarCell, {
-      defaultProps: () =>
-        getA11yProps('calendarCell', {
-          content,
-          key: day.key,
-          selected: day.isSelected,
-          disabled: !day.isInBounds,
-          quiet: !day.isInMonth,
-          today: compareDates(day.originalDate, props.today ?? new Date()),
-        }),
+      defaultProps: {
+        ...cellA11yProps,
+        content,
+        key: day.key,
+        selected: day.isSelected,
+        disabled: !day.isInBounds,
+        quiet: !day.isInMonth,
+        today: compareDates(day.originalDate, props.today ?? new Date()),
+      },
     });
 
   const renderCellButton = (day: IDay, dateRange: IDay[]) =>
     createShorthand(DatepickerCalendarCellButton, calendarCellButton, {
-      defaultProps: () =>
-        getA11yProps('calendarCell', {
-          content: day.date,
-          'aria-label': formatMonthDayYear(day.originalDate, dateFormatting),
-          selected: day.isSelected,
-          disabled: !day.isInBounds,
-          quiet: !day.isInMonth,
-          today: compareDates(day.originalDate, props.today ?? new Date()),
-        }),
+      defaultProps: {
+        ...cellA11yProps,
+        content: day.date,
+        'aria-label': formatMonthDayYear(day.originalDate, dateFormatting),
+        selected: day.isSelected,
+        disabled: !day.isInBounds,
+        quiet: !day.isInMonth,
+        today: compareDates(day.originalDate, props.today ?? new Date()),
+      },
       overrideProps: (
         predefinedProps: DatepickerCalendarCellButtonProps & { ref: React.Ref<HTMLButtonElement> },
       ): DatepickerCalendarCellButtonProps & { ref: React.Ref<HTMLButtonElement> } => ({
@@ -374,9 +376,12 @@ export const DatepickerCalendar = React.forwardRef<HTMLDivElement, DatepickerCal
     });
   const renderWeekRow = (week: IDay[]) => _.map(week, (day: IDay) => renderCell(day, renderCellButton(day, week)));
 
+  const gridRowA11yProps = useAccessibilitySlotProps(a11yBehavior, 'calendarGridRow', {});
+  const headerCellA11yProps = useAccessibilitySlotProps(a11yBehavior, 'calendarHeaderCell', {});
+
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
@@ -403,42 +408,40 @@ export const DatepickerCalendar = React.forwardRef<HTMLDivElement, DatepickerCal
         }),
       })}
       {createShorthand(DatepickerCalendarGrid, calendarGrid, {
-        defaultProps: () =>
-          getA11yProps('calendarGrid', {
-            content: (
-              <>
-                <thead>
-                  {createShorthand(DatepickerCalendarGridRow, calendarGridRow, {
-                    defaultProps: () =>
-                      getA11yProps('calendarGridRow', {
-                        children: _.times(DAYS_IN_WEEK, dayNumber =>
-                          createShorthand(DatepickerCalendarHeaderCell, calendarHeaderCell, {
-                            defaultProps: () =>
-                              getA11yProps('calendarHeaderCell', {
-                                'aria-label': days[(dayNumber + firstDayOfWeek) % DAYS_IN_WEEK],
-                                content: shortDays[(dayNumber + firstDayOfWeek) % DAYS_IN_WEEK],
-                                key: dayNumber,
-                              }),
-                          }),
-                        ),
+        defaultProps: useAccessibilitySlotProps(a11yBehavior, 'calendarGrid', {
+          content: (
+            <>
+              <thead>
+                {createShorthand(DatepickerCalendarGridRow, calendarGridRow, {
+                  defaultProps: useAccessibilitySlotProps(a11yBehavior, 'calendarGridRow', {
+                    children: _.times(DAYS_IN_WEEK, dayNumber =>
+                      createShorthand(DatepickerCalendarHeaderCell, calendarHeaderCell, {
+                        defaultProps: {
+                          ...headerCellA11yProps,
+                          'aria-label': days[(dayNumber + firstDayOfWeek) % DAYS_IN_WEEK],
+                          content: shortDays[(dayNumber + firstDayOfWeek) % DAYS_IN_WEEK],
+                          key: dayNumber,
+                        },
                       }),
-                  })}
-                </thead>
-                <tbody>
-                  {_.map(visibleGrid, week =>
-                    createShorthand(DatepickerCalendarGridRow, calendarGridRow, {
-                      defaultProps: () =>
-                        getA11yProps('calendarGridRow', {
-                          children: renderWeekRow(week),
-                          isRowSelectionActive: dateRangeType === DateRangeType.Week,
-                          key: week[0].key,
-                        }),
-                    }),
-                  )}
-                </tbody>
-              </>
-            ),
-          }),
+                    ),
+                  }),
+                })}
+              </thead>
+              <tbody>
+                {_.map(visibleGrid, week =>
+                  createShorthand(DatepickerCalendarGridRow, calendarGridRow, {
+                    defaultProps: {
+                      ...gridRowA11yProps,
+                      children: renderWeekRow(week),
+                      isRowSelectionActive: dateRangeType === DateRangeType.Week,
+                      key: week[0].key,
+                    },
+                  }),
+                )}
+              </tbody>
+            </>
+          ),
+        }),
       })}
     </ElementType>
   );
diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarCell.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarCell.tsx
index df935d6d73da05..8423dedb614942 100644
--- a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarCell.tsx
+++ b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarCell.tsx
@@ -5,7 +5,8 @@ import {
 } from '@fluentui/accessibility';
 import {
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
   useUnhandledProps,
@@ -56,15 +57,14 @@ export const DatepickerCalendarCell = compose<
     const { accessibility, className, design, styles, variables, disabled, selected, quiet, today, content } = props;
     const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
     const ElementType = getElementType(props);
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       actionHandlers: {},
-      mapPropsToBehavior: () => ({
+      behaviorProps: {
         selected,
         disabled,
         quiet,
         today,
-      }),
+      },
       rtl: context.rtl,
     });
 
@@ -89,7 +89,7 @@ export const DatepickerCalendarCell = compose<
 
     const element = (
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           ref,
           ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarCellButton.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarCellButton.tsx
index 82f38126d959f9..9d9a396b702c0e 100644
--- a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarCellButton.tsx
+++ b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarCellButton.tsx
@@ -5,7 +5,8 @@ import {
 } from '@fluentui/accessibility';
 import {
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
   useUnhandledProps,
@@ -82,8 +83,7 @@ export const DatepickerCalendarCellButton = compose<
     const { accessibility, className, design, styles, variables, disabled, selected, quiet, today, content } = props;
     const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
     const ElementType = getElementType(props);
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior<DatepickerCalendarCellButtonBehaviorProps>(accessibility, {
       actionHandlers: {
         performClick: e => {
           // prevent Spacebar from scrolling
@@ -91,12 +91,11 @@ export const DatepickerCalendarCellButton = compose<
           handleClick(e);
         },
       },
-      mapPropsToBehavior: () => ({
+      behaviorProps: {
         selected,
         disabled,
-        quiet,
         today,
-      }),
+      },
       rtl: context.rtl,
     });
 
@@ -129,7 +128,7 @@ export const DatepickerCalendarCellButton = compose<
 
     const element = (
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           onClick: handleClick,
           ref,
diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeader.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeader.tsx
index b239df362e6be5..88e09cc8fc6627 100644
--- a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeader.tsx
+++ b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeader.tsx
@@ -10,7 +10,8 @@ import { ICalendarStrings, DEFAULT_CALENDAR_STRINGS } from '../../utils/date-tim
 import {
   ForwardRefWithAs,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -86,9 +87,7 @@ export const DatepickerCalendarHeader = React.forwardRef<HTMLDivElement, Datepic
     } = props;
     const ElementType = getElementType(props);
     const unhandledProps = useUnhandledProps(DatepickerCalendarHeader.handledProps, props);
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: DatepickerCalendarHeader.displayName,
-      actionHandlers: {},
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
 
@@ -105,27 +104,25 @@ export const DatepickerCalendarHeader = React.forwardRef<HTMLDivElement, Datepic
 
     const element = (
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           ref,
           ...unhandledProps,
         })}
       >
         {createShorthand(Text, label, {
-          defaultProps: () =>
-            getA11yProps('label', {
-              className: classes.label,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'label', {
+            className: classes.label,
+          }),
         })}
 
         {createShorthand(DatepickerCalendarHeaderAction, previousButton, {
-          defaultProps: () =>
-            getA11yProps('previousButton', {
-              title: prevMonthAriaLabel,
-              direction: 'previous' as const,
-              'aria-disabled': disabledPreviousButton,
-              disabledNavigatableButton: disabledPreviousButton,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'previousButton', {
+            title: prevMonthAriaLabel,
+            direction: 'previous' as const,
+            'aria-disabled': disabledPreviousButton,
+            disabledNavigatableButton: disabledPreviousButton,
+          }),
           overrideProps: (
             predefinedProps: DatepickerCalendarHeaderActionProps,
           ): DatepickerCalendarHeaderActionProps => ({
@@ -138,13 +135,12 @@ export const DatepickerCalendarHeader = React.forwardRef<HTMLDivElement, Datepic
           }),
         })}
         {createShorthand(DatepickerCalendarHeaderAction, nextButton, {
-          defaultProps: () =>
-            getA11yProps('nextButton', {
-              title: nextMonthAriaLabel,
-              direction: 'next' as const,
-              'aria-disabled': disabledNextButton,
-              disabledNavigatableButton: disabledNextButton,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'nextButton', {
+            title: nextMonthAriaLabel,
+            direction: 'next' as const,
+            'aria-disabled': disabledNextButton,
+            disabledNavigatableButton: disabledNextButton,
+          }),
           overrideProps: (
             predefinedProps: DatepickerCalendarHeaderActionProps,
           ): DatepickerCalendarHeaderActionProps => ({
diff --git a/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx b/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx
index c93a4e4ff2102a..4ee80b24c78e87 100644
--- a/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx
+++ b/packages/fluentui/react-northstar/src/components/Dialog/Dialog.tsx
@@ -1,7 +1,8 @@
 import { Accessibility, dialogBehavior, DialogBehaviorProps, getCode, keyboardKey } from '@fluentui/accessibility';
 import {
   FocusTrapZoneProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
   useUnhandledProps,
@@ -174,8 +175,7 @@ export const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref)
   const headerId = React.useRef<string>();
   headerId.current = getOrGenerateIdFromShorthand('dialog-header-', header, headerId.current);
 
-  const getA11yProps = useAccessibility<DialogBehaviorProps>(accessibility, {
-    debugName: Dialog.displayName,
+  const a11yBehavior = useAccessibilityBehavior<DialogBehaviorProps>(accessibility, {
     actionHandlers: {
       closeAndFocusTrigger: e => {
         handleDialogCancel(e);
@@ -185,12 +185,12 @@ export const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref)
       },
       close: e => handleDialogCancel(e),
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       headerId: headerId.current,
       contentId: contentId.current,
       trapFocus,
       trigger,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -325,7 +325,7 @@ export const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref)
   const dialogContent = (
     <Ref innerRef={contentRef}>
       <ElementType
-        {...getA11yProps('popup', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'popup', {
           className: classes.root,
           ref,
           ...unhandledProps,
@@ -333,28 +333,25 @@ export const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref)
         })}
       >
         {Header.create(header, {
-          defaultProps: () =>
-            getA11yProps('header', {
-              as: 'h2',
-              className: dialogSlotClassNames.header,
-              styles: resolvedStyles.header,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'header', {
+            as: 'h2',
+            className: dialogSlotClassNames.header,
+            styles: resolvedStyles.header,
+          }),
         })}
         {createShorthand(Button, headerAction, {
-          defaultProps: () =>
-            getA11yProps('headerAction', {
-              className: dialogSlotClassNames.headerAction,
-              styles: resolvedStyles.headerAction,
-              text: true,
-              iconOnly: true,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'headerAction', {
+            className: dialogSlotClassNames.headerAction,
+            styles: resolvedStyles.headerAction,
+            text: true,
+            iconOnly: true,
+          }),
         })}
         {Box.create(content, {
-          defaultProps: () =>
-            getA11yProps('content', {
-              styles: resolvedStyles.content,
-              className: dialogSlotClassNames.content,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'content', {
+            styles: resolvedStyles.content,
+            className: dialogSlotClassNames.content,
+          }),
         })}
         {DialogFooter.create(footer, {
           overrideProps: {
diff --git a/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx b/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx
index 373fcbb581aa13..118b7479964279 100644
--- a/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx
+++ b/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx
@@ -14,7 +14,8 @@ import {
   getElementType,
   useUnhandledProps,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
@@ -39,8 +40,7 @@ export const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
   const { children, content, className, design, styles, variables, accessibility } = props;
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(DialogFooter.handledProps, props);
-  const getA11yProps = useAccessibility<never>(accessibility, {
-    debugName: DialogFooter.displayName,
+  const a11yBehavior = useAccessibilityBehavior<never>(accessibility, {
     rtl: context.rtl,
   });
   const { classes } = useStyles<DialogFooterStylesProps>(DialogFooter.displayName, {
@@ -54,7 +54,9 @@ export const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
     rtl: context.rtl,
   });
   const element = (
-    <ElementType {...getA11yProps('root', { className: classes.root, ref, ...unhandledProps })}>
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    >
       {childrenExist(children) ? children : content}
     </ElementType>
   );
diff --git a/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx b/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx
index 1e4d2f0da0f845..a80c8aaf8e5e19 100644
--- a/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx
@@ -1,6 +1,7 @@
 import { Accessibility } from '@fluentui/accessibility';
 import {
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   getElementType,
   useFluentContext,
   useUnhandledProps,
@@ -77,8 +78,7 @@ export const Divider = React.forwardRef<HTMLDivElement, DividerProps>((props, re
   } = props;
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(Divider.handledProps, props);
-  const getA11yProps = useAccessibility<never>(accessibility, {
-    debugName: Divider.displayName,
+  const a11yBehavior = useAccessibilityBehavior<never>(accessibility, {
     rtl: context.rtl,
   });
   const { classes } = useStyles<DividerStylesProps>(Divider.displayName, {
@@ -104,7 +104,7 @@ export const Divider = React.forwardRef<HTMLDivElement, DividerProps>((props, re
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
diff --git a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx
index 07ad822b38cbd8..04fbd69fc5666e 100644
--- a/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Dropdown/DropdownSelectedItem.tsx
@@ -26,7 +26,8 @@ import {
   useStyles,
   useFluentContext,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
@@ -105,14 +106,13 @@ export const DropdownSelectedItem = React.forwardRef<HTMLSpanElement, DropdownSe
   const ElementType = getElementType(props, 'span');
   const unhandledProps = useUnhandledProps(DropdownSelectedItem.handledProps, props);
 
-  const getA11yProps = useAccessibility<DropdownSelectedItemBehaviorProps>(
+  const a11yBehavior = useAccessibilityBehavior<DropdownSelectedItemBehaviorProps>(
     props.accessibility ?? dropdownSelectedItemBehavior,
     {
-      debugName: DropdownSelectedItem.displayName,
-      mapPropsToBehavior: () => ({
+      behaviorProps: {
         header: header as string,
         active,
-      }),
+      },
       rtl: context.rtl,
     },
   );
@@ -169,36 +169,33 @@ export const DropdownSelectedItem = React.forwardRef<HTMLSpanElement, DropdownSe
   });
 
   const headerElement = Box.create(header, {
-    defaultProps: () =>
-      getA11yProps('header', {
-        as: 'span',
-        className: dropdownSelectedItemSlotClassNames.header,
-        styles: resolvedStyles.header,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'header', {
+      as: 'span',
+      className: dropdownSelectedItemSlotClassNames.header,
+      styles: resolvedStyles.header,
+    }),
   });
 
   const iconElement = Box.create(icon, {
-    defaultProps: () =>
-      getA11yProps('icon', {
-        className: dropdownSelectedItemSlotClassNames.icon,
-        styles: resolvedStyles.icon,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'icon', {
+      className: dropdownSelectedItemSlotClassNames.icon,
+      styles: resolvedStyles.icon,
+    }),
     overrideProps: handleIconOverrides,
   });
 
   const imageElement = Image.create(image, {
-    defaultProps: () =>
-      getA11yProps('image', {
-        avatar: true,
-        className: dropdownSelectedItemSlotClassNames.image,
-        styles: resolvedStyles.image,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'image', {
+      avatar: true,
+      className: dropdownSelectedItemSlotClassNames.image,
+      styles: resolvedStyles.image,
+    }),
   });
 
   const element = (
     <Ref innerRef={itemRef}>
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           onClick: handleClick,
           onKeyDown: handleKeyDown,
diff --git a/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx b/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx
index f103544171bff6..85bbdd1476d88d 100644
--- a/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx
+++ b/packages/fluentui/react-northstar/src/components/Embed/Embed.tsx
@@ -14,7 +14,8 @@ import {
   getElementType,
   useUnhandledProps,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   ForwardRefWithAs,
   useControllableState,
@@ -102,15 +103,14 @@ export const Embed = React.forwardRef<HTMLSpanElement, EmbedProps>((props, ref)
   const ElementType = getElementType(props, 'span');
   const unhandledProps = useUnhandledProps(Embed.handledProps, props);
 
-  const getA11yProps = useAccessibility<EmbedBehaviorProps>(accessibility, {
-    debugName: Embed.displayName,
+  const a11yBehavior = useAccessibilityBehavior<EmbedBehaviorProps>(accessibility, {
     actionHandlers: {
       performClick: event => handleClick(event),
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       alt,
       title,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -165,7 +165,7 @@ export const Embed = React.forwardRef<HTMLSpanElement, EmbedProps>((props, ref)
     <Image
       src={placeholder}
       styles={resolvedStyles.image}
-      variables={{ width: variables.width, height: variables.height }}
+      variables={{ width: variables?.width, height: variables?.height }}
     />
   ) : null;
 
@@ -174,9 +174,37 @@ export const Embed = React.forwardRef<HTMLSpanElement, EmbedProps>((props, ref)
   const controlVisible = !active || hasVideo;
   const placeholderVisible = !active || (hasIframe && active && !iframeLoaded);
 
+  const controlElement = Box.create(control, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'control', {
+      className: embedSlotClassNames.control,
+      styles: resolvedStyles.control,
+    }),
+  });
+  const iframeElement = Box.create(iframe, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'iframe', {
+      as: 'iframe',
+      styles: resolvedStyles.iframe,
+    }),
+    overrideProps: handleFrameOverrides,
+  });
+  const videoElement = Video.create(video, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'video', {
+      autoPlay: true,
+      controls: false,
+      loop: true,
+      muted: true,
+      poster: placeholder,
+      styles: resolvedStyles.video,
+      variables: {
+        width: variables?.width,
+        height: variables?.height,
+      },
+    }),
+  });
+
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         onClick: handleClick,
         ref,
@@ -185,45 +213,13 @@ export const Embed = React.forwardRef<HTMLSpanElement, EmbedProps>((props, ref)
     >
       {active && (
         <>
-          {Video.create(video, {
-            defaultProps: () =>
-              getA11yProps('video', {
-                autoPlay: true,
-                controls: false,
-                loop: true,
-                muted: true,
-                poster: placeholder,
-                styles: resolvedStyles.video,
-                variables: {
-                  width: variables.width,
-                  height: variables.height,
-                },
-              }),
-          })}
-          {iframe && (
-            <Ref innerRef={frameRef}>
-              {Box.create(iframe, {
-                defaultProps: () =>
-                  getA11yProps('iframe', {
-                    as: 'iframe',
-                    styles: resolvedStyles.iframe,
-                  }),
-                overrideProps: handleFrameOverrides,
-              })}
-            </Ref>
-          )}
+          {videoElement}
+          {iframe && <Ref innerRef={frameRef}>{iframeElement}</Ref>}
         </>
       )}
 
       {placeholderVisible && placeholderElement}
-      {controlVisible &&
-        Box.create(control, {
-          defaultProps: () =>
-            getA11yProps('control', {
-              className: embedSlotClassNames.control,
-              styles: resolvedStyles.control,
-            }),
-        })}
+      {controlVisible && controlElement}
     </ElementType>
   );
 
diff --git a/packages/fluentui/react-northstar/src/components/Form/Form.tsx b/packages/fluentui/react-northstar/src/components/Form/Form.tsx
index 9d0c8b353c338d..3fbd95479bdfa1 100644
--- a/packages/fluentui/react-northstar/src/components/Form/Form.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/Form.tsx
@@ -19,7 +19,8 @@ import {
   useUnhandledProps,
   useStyles,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
@@ -71,8 +72,7 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>((props, ref) =>
     rtl: context.rtl,
   });
 
-  const getA11yProps = useAccessibility<never>(accessibility, {
-    debugName: Form.displayName,
+  const a11yBehavior = useAccessibilityBehavior<never>(accessibility, {
     rtl: context.rtl,
   });
 
@@ -92,7 +92,7 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>((props, ref) =>
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormField.tsx b/packages/fluentui/react-northstar/src/components/Form/FormField.tsx
index abe04d9ff0104c..c8666604565ed5 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormField.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormField.tsx
@@ -19,7 +19,8 @@ import {
   useUnhandledProps,
   useFluentContext,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
@@ -99,13 +100,12 @@ export const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>((props
   const labelId = React.useRef<string>();
   labelId.current = getOrGenerateIdFromShorthand('form-label-', id, labelId.current);
 
-  const getA11yProps = useAccessibility<FormFieldBehaviorProps>(props.accessibility ?? formFieldBehavior, {
-    debugName: FormField.displayName,
-    mapPropsToBehavior: () => ({
+  const a11yBehavior = useAccessibilityBehavior<FormFieldBehaviorProps>(props.accessibility ?? formFieldBehavior, {
+    behaviorProps: {
       hasErrorMessage: !!errorMessage,
       messageId: messageId.current,
       labelId: labelId.current,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -127,34 +127,31 @@ export const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>((props
   });
 
   const labelElement = Text.create(label, {
-    defaultProps: () =>
-      getA11yProps('label', {
-        as: 'label',
-        htmlFor: id,
-        id: labelId.current,
-        styles: resolvedStyles.label,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'label', {
+      as: 'label',
+      htmlFor: id,
+      id: labelId.current,
+      styles: resolvedStyles.label,
+    }),
   });
 
   const messageElement = Text.create(errorMessage || message, {
-    defaultProps: () =>
-      getA11yProps('message', {
-        className: formFieldMessageClassName,
-        id: messageId.current,
-        styles: resolvedStyles.message,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'message', {
+      className: formFieldMessageClassName,
+      id: messageId.current,
+      styles: resolvedStyles.message,
+    }),
   });
 
   const controlElement = Box.create(control || {}, {
-    defaultProps: () =>
-      getA11yProps('control', {
-        required,
-        name,
-        id,
-        type,
-        error: !!errorMessage || null,
-        styles: resolvedStyles.control,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'control', {
+      required,
+      name,
+      id,
+      type,
+      error: !!errorMessage || null,
+      styles: resolvedStyles.control,
+    }),
   });
 
   const shouldControlAppearFirst = () => {
@@ -172,7 +169,7 @@ export const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>((props
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx b/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx
index b495b420e5b5d8..ededa4e072db79 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx
@@ -8,7 +8,8 @@ import {
   useUnhandledProps,
   useFluentContext,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
 } from '@fluentui/react-bindings';
 
 export interface FormFieldCustomProps extends UIComponentProps, ChildrenComponentProps {
@@ -48,8 +49,7 @@ export const FormFieldCustom = React.forwardRef<HTMLDivElement, FormFieldCustomP
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(FormFieldCustom.handledProps, props);
 
-  const getA11yProps = useAccessibility<FormFieldBehaviorProps>(props.accessibility ?? formFieldBehavior, {
-    debugName: FormFieldCustom.displayName,
+  const a11yBehavior = useAccessibilityBehavior<FormFieldBehaviorProps>(props.accessibility ?? formFieldBehavior, {
     rtl: context.rtl,
   });
 
@@ -71,7 +71,7 @@ export const FormFieldCustom = React.forwardRef<HTMLDivElement, FormFieldCustomP
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Form/utils/formFieldBase.tsx b/packages/fluentui/react-northstar/src/components/Form/utils/formFieldBase.tsx
index 02818d1c5d8f7e..a0d1ad937d701b 100644
--- a/packages/fluentui/react-northstar/src/components/Form/utils/formFieldBase.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/utils/formFieldBase.tsx
@@ -8,7 +8,8 @@ import { Box, BoxProps } from '../../Box/Box';
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   compose,
   useStyles,
@@ -49,7 +50,8 @@ export const _FormFieldBase = compose<'div', FormFieldBaseProps, {}, {}, {}>(
   (props, ref, composeOptions) => {
     const context = useFluentContext();
 
-    const { message, inline, errorMessage, control, label, className, design, styles, variables } = props;
+    const { accessibility, message, inline, errorMessage, control, label, className, design, styles, variables } =
+      props;
 
     const slotProps = composeOptions.resolveSlotProps<FormFieldBaseProps>(props);
     const ElementType = getElementType(props);
@@ -72,13 +74,12 @@ export const _FormFieldBase = compose<'div', FormFieldBaseProps, {}, {}, {}>(
       unstable_props: props,
     });
 
-    const getA11yProps = useAccessibility<FormFieldBehaviorProps>(props.accessibility, {
-      debugName: composeOptions.displayName,
-      mapPropsToBehavior: () => ({
+    const a11yBehavior = useAccessibilityBehavior<FormFieldBehaviorProps>(accessibility, {
+      behaviorProps: {
         hasErrorMessage: !!errorMessage,
         messageId: messageId.current,
         labelId: labelId.current,
-      }),
+      },
       rtl: context.rtl,
     });
 
@@ -93,17 +94,16 @@ export const _FormFieldBase = compose<'div', FormFieldBaseProps, {}, {}, {}>(
 
     const element = (
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
         })}
       >
         {createShorthand(composeOptions.slots.label, label, {
-          defaultProps: () =>
-            getA11yProps('label', {
-              id: labelId.current,
-              inline,
-              ...slotProps.label,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'label', {
+            id: labelId.current,
+            inline,
+            ...slotProps.label,
+          }),
         })}
         {/**
          * When there's a message for the input the labelId and messageId should be consistent in the
@@ -112,21 +112,19 @@ export const _FormFieldBase = compose<'div', FormFieldBaseProps, {}, {}, {}>(
          */}
         <FormFieldBaseProvider value={childProps}>
           {createShorthand(composeOptions.slots.control, control || {}, {
-            defaultProps: () =>
-              getA11yProps('control', {
-                error: !!errorMessage || null,
-                ref,
-                ...unhandledProps,
-                ...slotProps.control,
-              }),
+            defaultProps: useAccessibilitySlotProps(a11yBehavior, 'control', {
+              error: !!errorMessage || null,
+              ref,
+              ...unhandledProps,
+              ...slotProps.control,
+            }),
           })}
         </FormFieldBaseProvider>
         {createShorthand(composeOptions.slots.message, errorMessage || message, {
-          defaultProps: () =>
-            getA11yProps('message', {
-              id: messageId.current,
-              ...slotProps.message,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'message', {
+            id: messageId.current,
+            ...slotProps.message,
+          }),
         })}
       </ElementType>
     );
diff --git a/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx b/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx
index 02a6f850f995c4..2a74c6611e7b6d 100644
--- a/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx
+++ b/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx
@@ -1,7 +1,9 @@
 import { Accessibility, GridBehaviorProps } from '@fluentui/accessibility';
 import {
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useStyles,
   useFluentContext,
   useUnhandledProps,
@@ -47,9 +49,7 @@ export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) =>
 
   const { accessibility, children, className, columns, content, design, rows, styles, variables } = props;
 
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: Grid.displayName,
-
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
   const { classes } = useStyles<GridStylesProps>(Grid.displayName, {
@@ -67,9 +67,10 @@ export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) =>
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(Grid.handledProps, props);
 
-  const element = getA11yProps.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
diff --git a/packages/fluentui/react-northstar/src/components/Header/Header.tsx b/packages/fluentui/react-northstar/src/components/Header/Header.tsx
index 547b36d68aeb26..47d198df803063 100644
--- a/packages/fluentui/react-northstar/src/components/Header/Header.tsx
+++ b/packages/fluentui/react-northstar/src/components/Header/Header.tsx
@@ -18,7 +18,8 @@ import { HeaderDescription, HeaderDescriptionProps } from './HeaderDescription';
 
 import { ShorthandValue, FluentComponentStaticProps } from '../../types';
 import {
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   getElementType,
   useUnhandledProps,
@@ -59,14 +60,13 @@ export type HeaderStylesProps = Required<Pick<HeaderProps, 'align' | 'color'>> &
 export const Header = React.forwardRef<HTMLHeadingElement, HeaderProps>((props, ref) => {
   const context = useFluentContext();
 
-  const { children, content, variables, align, className, design, styles, description, color } = props;
+  const { accessibility, children, content, variables, align, className, design, styles, description, color } = props;
   const ElementType = getElementType(props, 'h1');
   const unhandledProps = useUnhandledProps(Header.handledProps, props);
   const hasChildren = childrenExist(children);
   const contentElement = hasChildren ? children : content;
 
-  const getA11yProps = useAccessibility<never>(props.accessibility, {
-    debugName: Header.displayName,
+  const a11yBehavior = useAccessibilityBehavior<never>(accessibility, {
     rtl: context.rtl,
   });
 
@@ -86,9 +86,13 @@ export const Header = React.forwardRef<HTMLHeadingElement, HeaderProps>((props,
     rtl: context.rtl,
   });
 
+  const descriptionElement = HeaderDescription.create(description, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'description', {}),
+  });
+
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
@@ -99,10 +103,7 @@ export const Header = React.forwardRef<HTMLHeadingElement, HeaderProps>((props,
       })}
     >
       {rtlTextContainer.createFor({ element: contentElement, condition: !!description })}
-      {!hasChildren &&
-        HeaderDescription.create(description, {
-          defaultProps: () => getA11yProps('description', {}),
-        })}
+      {!hasChildren && descriptionElement}
     </ElementType>
   );
 
diff --git a/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx b/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx
index d9377c1f3347a9..2271c2ec61b42e 100644
--- a/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx
+++ b/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx
@@ -17,7 +17,8 @@ import {
   useFluentContext,
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
@@ -42,12 +43,11 @@ export type HeaderDescriptionStylesProps = Pick<HeaderDescriptionProps, 'color'>
 export const HeaderDescription = React.forwardRef<HTMLParagraphElement, HeaderDescriptionProps>((props, ref) => {
   const context = useFluentContext();
 
-  const { children, content, color, className, design, styles, variables } = props;
+  const { accessibility, children, content, color, className, design, styles, variables } = props;
   const ElementType = getElementType(props, 'p');
   const unhandledProps = useUnhandledProps(HeaderDescription.handledProps, props);
 
-  const getA11yProps = useAccessibility<never>(props.accessibility, {
-    debugName: HeaderDescription.displayName,
+  const a11yBehavior = useAccessibilityBehavior<never>(accessibility, {
     rtl: context.rtl,
   });
 
@@ -67,7 +67,7 @@ export const HeaderDescription = React.forwardRef<HTMLParagraphElement, HeaderDe
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Image/Image.tsx b/packages/fluentui/react-northstar/src/components/Image/Image.tsx
index 752014c8b9ef33..bd1ea74aa4f5af 100644
--- a/packages/fluentui/react-northstar/src/components/Image/Image.tsx
+++ b/packages/fluentui/react-northstar/src/components/Image/Image.tsx
@@ -2,7 +2,8 @@ import { Accessibility, AccessibilityAttributes, imageBehavior, ImageBehaviorPro
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -65,12 +66,11 @@ export const Image = React.forwardRef<HTMLImageElement, ImageProps>((props, ref)
     variables,
   } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Image.displayName,
-    mapPropsToBehavior: () => ({
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
+    behaviorProps: {
       alt,
       'aria-label': ariaLabel,
-    }),
+    },
     rtl: context.rtl,
   });
   const { classes } = useStyles<ImageStylesProps>(Image.displayName, {
@@ -92,7 +92,11 @@ export const Image = React.forwardRef<HTMLImageElement, ImageProps>((props, ref)
   const ElementType = getElementType(props, 'img');
   const unhandledProps = useUnhandledProps(Image.handledProps, props);
 
-  const result = <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })} />;
+  const result = (
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    />
+  );
 
   return result;
 }) as unknown as ForwardRefWithAs<'img', HTMLImageElement, ImageProps> & FluentComponentStaticProps<ImageProps>;
diff --git a/packages/fluentui/react-northstar/src/components/Input/Input.tsx b/packages/fluentui/react-northstar/src/components/Input/Input.tsx
index 7008baaa59f4ac..3a6984ebd31d7d 100644
--- a/packages/fluentui/react-northstar/src/components/Input/Input.tsx
+++ b/packages/fluentui/react-northstar/src/components/Input/Input.tsx
@@ -24,7 +24,8 @@ import {
   useUnhandledProps,
   useFluentContext,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   compose,
   ComponentWithAs,
 } from '@fluentui/react-bindings';
@@ -214,8 +215,7 @@ export const Input = compose<'input', InputProps, InputStylesProps, {}, {}>(
       unstable_props: props,
     });
 
-    const getA11yProps = useAccessibility<InputBehaviorProps>(props.accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior<InputBehaviorProps>(props.accessibility, {
       actionHandlers: {
         clear: e => {
           if (clearable && value !== '') {
@@ -225,11 +225,11 @@ export const Input = compose<'input', InputProps, InputStylesProps, {}, {}>(
           }
         },
       },
-      mapPropsToBehavior: () => ({
+      behaviorProps: {
         disabled,
         required,
         error,
-      }),
+      },
       rtl: context.rtl,
     });
 
@@ -323,7 +323,7 @@ export const Input = compose<'input', InputProps, InputStylesProps, {}, {}>(
     const inputElement = Box.create(
       { 'data-tid': input ? input['data-tid'] : undefined },
       {
-        defaultProps: () => ({
+        defaultProps: {
           children: (
             <>
               <Ref
@@ -334,49 +334,46 @@ export const Input = compose<'input', InputProps, InputStylesProps, {}, {}>(
                 }}
               >
                 {createShorthand(composeOptions.slots.control, input || type, {
-                  defaultProps: () =>
-                    getA11yProps('input', {
-                      ...htmlInputProps,
-                      as: 'input',
-                      disabled,
-                      type,
-                      required,
-                      value: value || '',
-                      id: inputId.current,
-                      className: inputSlotClassNames.input,
-                      styles: resolvedStyles.input,
-                      onChange: handleChange,
-                    }),
+                  defaultProps: useAccessibilitySlotProps(a11yBehavior, 'input', {
+                    ...htmlInputProps,
+                    as: 'input',
+                    disabled,
+                    type,
+                    required,
+                    value: value || '',
+                    id: inputId.current,
+                    className: inputSlotClassNames.input,
+                    styles: resolvedStyles.input,
+                    onChange: handleChange,
+                  }),
                 })}
               </Ref>
               {createShorthand(composeOptions.slots.icon, computeIcon(), {
-                defaultProps: () =>
-                  getA11yProps('icon', {
-                    className: inputSlotClassNames.icon,
-                    styles: resolvedStyles.icon,
-                  }),
+                defaultProps: useAccessibilitySlotProps(a11yBehavior, 'icon', {
+                  className: inputSlotClassNames.icon,
+                  styles: resolvedStyles.icon,
+                }),
                 overrideProps: handleIconOverrides,
               })}
             </>
           ),
           styles: resolvedStyles.inputContainer,
-        }),
+        },
       },
     );
 
     const element = Box.create(wrapper, {
-      defaultProps: () =>
-        getA11yProps('root', {
-          className: classes.root,
-          children: (
-            <>
-              {labelElement}
-              {inputElement}
-            </>
-          ),
-          styles: resolvedStyles.root,
-          ...restProps,
-        }),
+      defaultProps: useAccessibilitySlotProps(a11yBehavior, 'root', {
+        className: classes.root,
+        children: (
+          <>
+            {labelElement}
+            {inputElement}
+          </>
+        ),
+        styles: resolvedStyles.root,
+        ...restProps,
+      }),
       overrideProps: {
         as: (wrapper && (wrapper as any).as) || ElementType,
       },
diff --git a/packages/fluentui/react-northstar/src/components/Label/Label.tsx b/packages/fluentui/react-northstar/src/components/Label/Label.tsx
index e88d02bd251237..c7d03bb022f2b1 100644
--- a/packages/fluentui/react-northstar/src/components/Label/Label.tsx
+++ b/packages/fluentui/react-northstar/src/components/Label/Label.tsx
@@ -2,7 +2,8 @@ import { Accessibility } from '@fluentui/accessibility';
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -86,8 +87,7 @@ export const Label = React.forwardRef<HTMLSpanElement, LabelProps>((props, ref)
     imagePosition = 'start',
   } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Label.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
   const { classes, styles: resolvedStyles } = useStyles<LabelStylesProps>(Label.displayName, {
@@ -108,23 +108,6 @@ export const Label = React.forwardRef<HTMLSpanElement, LabelProps>((props, ref)
   const ElementType = getElementType(props, 'span');
   const unhandledProps = useUnhandledProps(Label.handledProps, props);
 
-  if (childrenExist(children)) {
-    const element = (
-      <ElementType
-        {...getA11Props('root', {
-          className: classes.root,
-          ref,
-          ...rtlTextContainer.getAttributes({ forElements: [children] }),
-          ...unhandledProps,
-        })}
-      >
-        {children}
-      </ElementType>
-    );
-
-    return element;
-  }
-
   const imageElement = Image.create(image, {
     defaultProps: () => ({
       styles: resolvedStyles.image,
@@ -148,17 +131,24 @@ export const Label = React.forwardRef<HTMLSpanElement, LabelProps>((props, ref)
 
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
+        ...rtlTextContainer.getAttributes({ forElements: [children] }),
         ...unhandledProps,
       })}
     >
-      {startImage}
-      {startIcon}
-      {contentElement}
-      {endIcon}
-      {endImage}
+      {childrenExist(children) ? (
+        children
+      ) : (
+        <>
+          {startImage}
+          {startIcon}
+          {contentElement}
+          {endIcon}
+          {endImage}
+        </>
+      )}
     </ElementType>
   );
 
diff --git a/packages/fluentui/react-northstar/src/components/Layout/Layout.tsx b/packages/fluentui/react-northstar/src/components/Layout/Layout.tsx
index 433c454493bbca..624ac3cde378a2 100644
--- a/packages/fluentui/react-northstar/src/components/Layout/Layout.tsx
+++ b/packages/fluentui/react-northstar/src/components/Layout/Layout.tsx
@@ -11,7 +11,8 @@ import {
   getElementType,
   useFluentContext,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
 } from '@fluentui/react-bindings';
 
 export interface LayoutSlotClassNames {
@@ -149,8 +150,7 @@ export const Layout: ComponentWithAs<'div', LayoutProps> & FluentComponentStatic
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(Layout.handledProps, props);
 
-  const getA11yProps = useAccessibility<never>(props.accessibility, {
-    debugName: Layout.displayName,
+  const a11yBehavior = useAccessibilityBehavior<never>(props.accessibility, {
     rtl: context.rtl,
   });
 
@@ -182,15 +182,12 @@ export const Layout: ComponentWithAs<'div', LayoutProps> & FluentComponentStatic
   const mainArea = renderMainArea({ ...props, classes });
   const endArea = renderEndArea({ ...props, classes });
 
+  const rootA11yProps = useAccessibilitySlotProps(a11yBehavior, 'root', {
+    ...unhandledProps,
+  });
+
   if (!startArea && !mainArea && !endArea) {
-    return (
-      <ElementType
-        {...getA11yProps('root', {
-          className: classes.root,
-          ...unhandledProps,
-        })}
-      />
-    );
+    return <ElementType {...rootA11yProps} className={classes.root} />;
   }
 
   const activeAreas = [startArea, mainArea, endArea].filter(Boolean);
@@ -210,24 +207,14 @@ export const Layout: ComponentWithAs<'div', LayoutProps> & FluentComponentStatic
     );
 
     return (
-      <ElementType
-        {...getA11yProps('root', {
-          className: composedClasses,
-          ...unhandledProps,
-        })}
-      >
+      <ElementType {...rootA11yProps} className={composedClasses}>
         {start || main || end}
       </ElementType>
     );
   }
 
   return (
-    <ElementType
-      {...getA11yProps('root', {
-        className: classes.root,
-        ...unhandledProps,
-      })}
-    >
+    <ElementType {...rootA11yProps} className={classes.root}>
       {startArea}
       {startArea && mainArea && renderGap({ ...props, classes })}
       {mainArea}
diff --git a/packages/fluentui/react-northstar/src/components/List/List.tsx b/packages/fluentui/react-northstar/src/components/List/List.tsx
index 176aba06543309..54994d689daacf 100644
--- a/packages/fluentui/react-northstar/src/components/List/List.tsx
+++ b/packages/fluentui/react-northstar/src/components/List/List.tsx
@@ -2,7 +2,9 @@ import { Accessibility, listBehavior, ListBehaviorProps } from '@fluentui/access
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -115,13 +117,12 @@ export const List = React.forwardRef<HTMLUListElement, ListProps & { as: React.R
     state: props.selectedIndex,
     initialState: -1,
   });
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: List.displayName,
-    mapPropsToBehavior: () => ({
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
+    behaviorProps: {
       horizontal,
       navigable,
       selectable,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -164,9 +165,10 @@ export const List = React.forwardRef<HTMLUListElement, ListProps & { as: React.R
   };
   const renderItems = () => _.map(items, (item, index) => ListItem.create(item, { defaultProps: () => ({ index }) }));
 
-  const element = getA11Props.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
diff --git a/packages/fluentui/react-northstar/src/components/List/ListItem.tsx b/packages/fluentui/react-northstar/src/components/List/ListItem.tsx
index 60d3b4e5104993..fc6fb8d48c5c54 100644
--- a/packages/fluentui/react-northstar/src/components/List/ListItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/List/ListItem.tsx
@@ -2,7 +2,9 @@ import { Accessibility, listItemBehavior, ListItemBehaviorProps } from '@fluentu
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useFluentContext,
   useStyles,
   useContextSelectors,
@@ -118,19 +120,18 @@ export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>((props, r
     variables = parentProps.variables,
   } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: ListItem.displayName,
+  const itemA11yProps = useAccessibilityBehavior(accessibility, {
     actionHandlers: {
       performClick: e => {
         e.preventDefault();
         handleClick(e);
       },
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       navigable,
       selectable,
       selected,
-    }),
+    },
     rtl: context.rtl,
   });
   const { classes } = useStyles<ListItemStylesProps>(ListItem.displayName, {
@@ -184,9 +185,10 @@ export const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>((props, r
     }),
   });
 
-  const element = getA11Props.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    itemA11yProps,
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(itemA11yProps, 'root', {
         className: classes.root,
         onClick: handleClick,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx b/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx
index b20dd6ecb5b830..7ddf789bc82591 100644
--- a/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx
+++ b/packages/fluentui/react-northstar/src/components/Loader/Loader.tsx
@@ -6,7 +6,8 @@ import {
   getElementType,
   useUnhandledProps,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 import * as PropTypes from 'prop-types';
@@ -111,11 +112,10 @@ export const Loader = React.forwardRef<HTMLDivElement, LoaderProps>((props, ref)
     rtl: context.rtl,
   });
 
-  const getA11yProps = useAccessibility<LoaderBehaviorProps>(accessibility, {
-    debugName: Loader.displayName,
-    mapPropsToBehavior: () => ({
+  const a11yBehavior = useAccessibilityBehavior<LoaderBehaviorProps>(accessibility, {
+    behaviorProps: {
       labelId: labelId.current,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -137,34 +137,32 @@ export const Loader = React.forwardRef<HTMLDivElement, LoaderProps>((props, ref)
     </svg>
   );
 
-  const element = visible && (
+  const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
       })}
     >
       {Box.create(indicator, {
-        defaultProps: () =>
-          getA11yProps('indicator', {
-            children: svgElement,
-            className: loaderSlotClassNames.indicator,
-            styles: resolvedStyles.indicator,
-          }),
+        defaultProps: useAccessibilitySlotProps(a11yBehavior, 'indicator', {
+          children: svgElement,
+          className: loaderSlotClassNames.indicator,
+          styles: resolvedStyles.indicator,
+        }),
       })}
       {Text.create(label, {
-        defaultProps: () =>
-          getA11yProps('label', {
-            className: loaderSlotClassNames.label,
-            styles: resolvedStyles.label,
-            id: labelId.current,
-          }),
+        defaultProps: useAccessibilitySlotProps(a11yBehavior, 'label', {
+          className: loaderSlotClassNames.label,
+          styles: resolvedStyles.label,
+          id: labelId.current,
+        }),
       })}
     </ElementType>
   );
 
-  return element;
+  return visible ? element : null;
 }) as unknown as ForwardRefWithAs<'div', HTMLDivElement, LoaderProps> &
   FluentComponentStaticProps<LoaderProps> & {
     shorthandConfig: ShorthandConfig<LoaderProps>;
diff --git a/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx b/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx
index 30f8e362ea439f..fa97d249a4c41f 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx
@@ -2,7 +2,9 @@ import { Accessibility, menuBehavior, MenuBehaviorProps } from '@fluentui/access
 import {
   getElementType,
   mergeVariablesOverrides,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -202,11 +204,10 @@ export const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) =
 
   const unhandledProps = useUnhandledProps(Menu.handledProps, props);
 
-  const getA11yProps = useAccessibility<MenuBehaviorProps>(accessibility, {
-    debugName: Menu.displayName,
-    mapPropsToBehavior: () => ({
+  const a11yBehavior = useAccessibilityBehavior<MenuBehaviorProps>(accessibility, {
+    behaviorProps: {
       vertical,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -282,6 +283,9 @@ export const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) =
     variables: mergeVariablesOverrides(variables, predefinedProps.variables),
   });
 
+  const dividerA11yProps = useAccessibilitySlotProps(a11yBehavior, 'divider', {});
+  const itemA11yProps = useAccessibilitySlotProps(a11yBehavior, 'item', {});
+
   const renderItems = () => {
     const itemsCount = _.filter(items, item => getKindProp(item, 'item') !== 'divider').length;
     let itemPosition = 0;
@@ -291,7 +295,7 @@ export const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) =
 
       if (kind === 'divider') {
         return createShorthand(MenuDivider, item as ShorthandValue<MenuDividerProps>, {
-          defaultProps: () => getA11yProps('divider', {}),
+          defaultProps: () => dividerA11yProps,
           overrideProps: handleDividerOverrides,
         });
       }
@@ -299,12 +303,12 @@ export const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) =
       itemPosition++;
 
       return createShorthand(MenuItem, item, {
-        defaultProps: () =>
-          getA11yProps('item', {
-            index,
-            itemPosition,
-            itemsCount,
-          }),
+        defaultProps: {
+          ...itemA11yProps,
+          index,
+          itemPosition,
+          itemsCount,
+        },
         overrideProps: handleItemOverrides,
       });
     });
@@ -330,9 +334,10 @@ export const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) =
     },
   };
 
-  const element = getA11yProps.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx
index fe6678a51e4ea1..c5efd5ab57c53f 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx
@@ -4,7 +4,8 @@ import {
   getElementType,
   mergeVariablesOverrides,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useUnhandledProps,
   useContextSelectors,
@@ -79,8 +80,7 @@ export const MenuDivider = React.forwardRef<HTMLLIElement, MenuDividerProps>((in
     variables,
   } = props;
 
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: MenuDivider.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -110,7 +110,7 @@ export const MenuDivider = React.forwardRef<HTMLLIElement, MenuDividerProps>((in
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx
index 28641010e2d073..845845e11a0837 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx
@@ -6,7 +6,8 @@ import {
   useFluentContext,
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   ForwardRefWithAs,
   useContextSelectors,
@@ -246,8 +247,7 @@ export const MenuItem = React.forwardRef<HTMLAnchorElement, MenuItemProps>((inpu
   const ElementType = getElementType(props, 'a');
   const unhandledProps = useUnhandledProps(MenuItem.handledProps, props);
 
-  const getA11yProps = useAccessibility<MenuItemBehaviorProps>(accessibility, {
-    debugName: Menu.displayName,
+  const a11yBehavior = useAccessibilityBehavior<MenuItemBehaviorProps>(accessibility, {
     actionHandlers: {
       performClick: event => !event.defaultPrevented && handleClick(event),
       openMenu: event => openMenu(event),
@@ -259,13 +259,13 @@ export const MenuItem = React.forwardRef<HTMLAnchorElement, MenuItemProps>((inpu
       },
       closeAllMenus: event => closeAllMenus(event),
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       menuOpen,
       hasMenu: !!menu,
       disabled,
       vertical,
       active, // for tabBehavior
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -439,6 +439,39 @@ export const MenuItem = React.forwardRef<HTMLAnchorElement, MenuItemProps>((inpu
     });
   };
 
+  const indicatorElement = createShorthand(MenuItemIndicator, indicator, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'indicator', {
+      iconOnly,
+      vertical,
+      inSubmenu,
+      active,
+      primary,
+      underlined,
+    }),
+  });
+
+  const contentElement = (
+    <>
+      <>
+        {createShorthand(MenuItemIcon, icon, {
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'icon', {
+            hasContent: !!content,
+            iconOnly,
+          }),
+        })}
+        {createShorthand(MenuItemContent, content, {
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'content', {
+            hasIcon: !!icon,
+            hasMenu: !!menu,
+            inSubmenu,
+            vertical,
+          }),
+        })}
+        {menu && indicatorElement}
+      </>
+    </>
+  );
+
   const menuItemInner = (
     <Ref
       innerRef={node => {
@@ -447,7 +480,7 @@ export const MenuItem = React.forwardRef<HTMLAnchorElement, MenuItemProps>((inpu
       }}
     >
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           disabled,
           onBlur: handleBlur,
@@ -457,40 +490,7 @@ export const MenuItem = React.forwardRef<HTMLAnchorElement, MenuItemProps>((inpu
         })}
         {...rootHandlers}
       >
-        {childrenExist(children) ? (
-          children
-        ) : (
-          <>
-            {createShorthand(MenuItemIcon, icon, {
-              defaultProps: () =>
-                getA11yProps('icon', {
-                  hasContent: !!content,
-                  iconOnly,
-                }),
-            })}
-            {createShorthand(MenuItemContent, content, {
-              defaultProps: () =>
-                getA11yProps('content', {
-                  hasIcon: !!icon,
-                  hasMenu: !!menu,
-                  inSubmenu,
-                  vertical,
-                }),
-            })}
-            {menu &&
-              createShorthand(MenuItemIndicator, indicator, {
-                defaultProps: () =>
-                  getA11yProps('indicator', {
-                    iconOnly,
-                    vertical,
-                    inSubmenu,
-                    active,
-                    primary,
-                    underlined,
-                  }),
-              })}
-          </>
-        )}
+        {childrenExist(children) ? children : contentElement}
       </ElementType>
     </Ref>
   );
@@ -550,34 +550,33 @@ export const MenuItem = React.forwardRef<HTMLAnchorElement, MenuItemProps>((inpu
       </>
     ) : null;
 
-  if (wrapper) {
-    const wrapperElement = createShorthand(MenuItemWrapper, wrapper, {
-      defaultProps: () =>
-        getA11yProps('wrapper', {
-          active,
-          disabled,
-          iconOnly,
-          isFromKeyboard,
-          pills,
-          pointing,
-          secondary,
-          underlined,
-          vertical,
-          primary,
-          on,
-          variables,
-        }),
-      overrideProps: predefinedProps => ({
-        children: (
-          <>
-            {menuItemInner}
-            {maybeSubmenu}
-          </>
-        ),
-        ...handleWrapperOverrides(predefinedProps),
-      }),
-    });
+  const wrapperElement = createShorthand(MenuItemWrapper, wrapper, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'wrapper', {
+      active,
+      disabled,
+      iconOnly,
+      isFromKeyboard,
+      pills,
+      pointing,
+      secondary,
+      underlined,
+      vertical,
+      primary,
+      on,
+      variables,
+    }),
+    overrideProps: predefinedProps => ({
+      children: (
+        <>
+          {menuItemInner}
+          {maybeSubmenu}
+        </>
+      ),
+      ...handleWrapperOverrides(predefinedProps),
+    }),
+  });
 
+  if (wrapper) {
     return wrapperElement;
   }
 
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx
index df9e29396d3f80..7cd515b2b58dee 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx
@@ -3,7 +3,8 @@ import {
   ForwardRefWithAs,
   useFluentContext,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useUnhandledProps,
   getElementType,
   childrenExist,
@@ -85,8 +86,7 @@ export const MenuItemContent = React.forwardRef<HTMLSpanElement, MenuItemContent
     rtl: context.rtl,
   });
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: MenuItemContent.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -95,7 +95,7 @@ export const MenuItemContent = React.forwardRef<HTMLSpanElement, MenuItemContent
 
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
         ref,
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx
index a47f629d0a4ae7..2c0df4b2c51dd6 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx
@@ -3,7 +3,8 @@ import {
   ForwardRefWithAs,
   useFluentContext,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   getElementType,
   useUnhandledProps,
   childrenExist,
@@ -53,8 +54,7 @@ export const MenuItemIcon = React.forwardRef<HTMLSpanElement, MenuItemIconProps>
     rtl: context.rtl,
   });
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: MenuItemIcon.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -62,7 +62,9 @@ export const MenuItemIcon = React.forwardRef<HTMLSpanElement, MenuItemIconProps>
   const unhandledProps = useUnhandledProps(MenuItemIcon.handledProps, props);
 
   const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    >
       {childrenExist(children) ? children : content}
     </ElementType>
   );
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx
index d8c91a3c137a3d..8e88455990b26a 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx
@@ -3,7 +3,8 @@ import {
   ForwardRefWithAs,
   useFluentContext,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   getElementType,
   useUnhandledProps,
   childrenExist,
@@ -84,8 +85,7 @@ export const MenuItemIndicator = React.forwardRef<HTMLSpanElement, MenuItemIndic
     rtl: context.rtl,
   });
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: MenuItemIndicator.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -93,7 +93,9 @@ export const MenuItemIndicator = React.forwardRef<HTMLSpanElement, MenuItemIndic
   const unhandledProps = useUnhandledProps(MenuItemIndicator.handledProps, props);
 
   const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    >
       {childrenExist(children) ? children : content}
     </ElementType>
   );
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx
index 20b6c5ed14d46a..f303c6cccefedf 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx
@@ -3,7 +3,8 @@ import {
   ForwardRefWithAs,
   useFluentContext,
   useStyles,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   getElementType,
   useUnhandledProps,
   childrenExist,
@@ -127,8 +128,7 @@ export const MenuItemWrapper = React.forwardRef<HTMLLIElement, MenuItemWrapperPr
     rtl: context.rtl,
   });
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: MenuItemWrapper.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -136,7 +136,9 @@ export const MenuItemWrapper = React.forwardRef<HTMLLIElement, MenuItemWrapperPr
   const unhandledProps = useUnhandledProps(MenuItemWrapper.handledProps, props);
 
   const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    >
       {childrenExist(children) ? children : content}
     </ElementType>
   );
diff --git a/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx b/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx
index f757981af742ca..2da6e5e1e2e557 100644
--- a/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx
+++ b/packages/fluentui/react-northstar/src/components/MenuButton/MenuButton.tsx
@@ -15,7 +15,9 @@ import { MenuItemProps } from '../Menu/MenuItem';
 import { focusMenuItem } from './focusUtils';
 import { ALIGNMENTS, POSITIONS, PositioningProps, AutoSize, AUTOSIZES } from '../../utils/positioner';
 import {
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   getElementType,
   useUnhandledProps,
   useFluentContext,
@@ -163,14 +165,13 @@ export const MenuButton = React.forwardRef<HTMLDivElement, MenuButtonProps>((pro
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(MenuButton.handledProps, props);
 
-  const getA11yProps = useAccessibility<MenuButtonBehaviorProps>(accessibility, {
-    debugName: MenuButton.displayName,
+  const a11yBehavior = useAccessibilityBehavior<MenuButtonBehaviorProps>(accessibility, {
     actionHandlers: {
       closeMenu: e => closeMenu(e),
       openAndFocusFirst: e => openAndFocus(e, 'first'),
       openAndFocusLast: e => openAndFocus(e, 'last'),
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       menuId: menuId.current,
       triggerId: triggerId.current,
       open,
@@ -178,7 +179,7 @@ export const MenuButton = React.forwardRef<HTMLDivElement, MenuButtonProps>((pro
       contextMenu,
       on,
       tabbableTrigger,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -249,16 +250,15 @@ export const MenuButton = React.forwardRef<HTMLDivElement, MenuButtonProps>((pro
   });
 
   const content = Menu.create(menu, {
-    defaultProps: () =>
-      getA11yProps('menu', {
-        vertical: true,
-        className: menuButtonSlotClassNames.menu,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'menu', {
+      vertical: true,
+      className: menuButtonSlotClassNames.menu,
+    }),
     overrideProps: handleMenuOverrides,
   });
 
   const overrideProps: PopupProps = {
-    accessibility: getA11yProps.unstable_behaviorDefinition,
+    accessibility: () => a11yBehavior,
     open,
     onOpenChange: (e, { open }) => {
       handleOpenChange(e, open);
@@ -281,14 +281,10 @@ export const MenuButton = React.forwardRef<HTMLDivElement, MenuButtonProps>((pro
   };
 
   const popup = Popup.create(popupProps, { overrideProps });
-
-  if (contextMenu) {
-    return popup;
-  }
-
-  const element = getA11yProps.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         ref,
         className: classes.root,
         ...unhandledProps,
@@ -298,6 +294,10 @@ export const MenuButton = React.forwardRef<HTMLDivElement, MenuButtonProps>((pro
     </ElementType>,
   );
 
+  if (contextMenu) {
+    return popup;
+  }
+
   return element;
 }) as unknown as ForwardRefWithAs<'div', HTMLDivElement, MenuButtonProps> & FluentComponentStaticProps<MenuButtonProps>;
 
diff --git a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx
index 524e576ad47708..068a894b8011dc 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx
@@ -8,7 +8,9 @@ import { ShorthandValue, FluentComponentStaticProps, ComponentEventHandler } fro
 import { BoxProps } from '../Box/Box';
 
 import {
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   getElementType,
   useStyles,
   useFluentContext,
@@ -166,19 +168,18 @@ export const Pill = React.forwardRef<HTMLSpanElement, PillProps>((props, ref) =>
     _.invoke(props, 'onClick', e, props);
   };
 
-  const getA11yProps = useAccessibility(accessibility || parentProps.pillBehavior || pillBehavior, {
-    debugName: Pill.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility || parentProps.pillBehavior || pillBehavior, {
     actionHandlers: {
       performDismiss: handleDismiss,
       performClick: handleClick,
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       actionable,
       selectable,
       selected,
       role,
       dismissible: Boolean(onDismiss),
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -214,9 +215,10 @@ export const Pill = React.forwardRef<HTMLSpanElement, PillProps>((props, ref) =>
     return <AcceptIcon />;
   };
 
-  const element = getA11yProps.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...((actionable || selectable) && { onClick: handleClick }),
diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx
index fda8cd0fe57ab7..9bf78bde481d4f 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx
@@ -3,7 +3,8 @@ import { Accessibility, pillActionBehavior, PillActionBehaviorProps } from '@flu
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -54,8 +55,7 @@ export const PillAction = React.forwardRef<HTMLDivElement, PillActionProps>((pro
     size,
   } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: PillAction.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -71,7 +71,7 @@ export const PillAction = React.forwardRef<HTMLDivElement, PillActionProps>((pro
 
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx
index 39f63d23815f92..3244d9de938736 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx
@@ -4,7 +4,8 @@ import { Accessibility } from '@fluentui/accessibility';
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -49,8 +50,7 @@ export const PillContent = React.forwardRef<HTMLSpanElement, PillContentProps>((
 
   const { accessibility, children, className, content, design, styles, variables, size, actionable } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: PillContent.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -66,7 +66,7 @@ export const PillContent = React.forwardRef<HTMLSpanElement, PillContentProps>((
 
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx
index 030c68f23f669a..e43f6fa0c64c62 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx
@@ -3,7 +3,9 @@ import { Accessibility, PillGroupBehavior, PillGroupBehaviorProps } from '@fluen
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -37,8 +39,7 @@ export const PillGroup = React.forwardRef<HTMLDivElement, PillGroupProps>((props
 
   const { accessibility = PillGroupBehavior, children, className, design, styles, variables } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: PillGroup.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -50,7 +51,7 @@ export const PillGroup = React.forwardRef<HTMLDivElement, PillGroupProps>((props
 
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(PillGroup.handledProps, props);
-  const pillBehavior = getA11Props.unstable_behaviorDefinition().childBehaviors?.pill;
+  const pillBehavior = a11yBehavior.childBehaviors?.pill;
 
   const childProps: PillsContextValue = React.useMemo(
     () => ({
@@ -59,9 +60,10 @@ export const PillGroup = React.forwardRef<HTMLDivElement, PillGroupProps>((props
     [pillBehavior],
   );
 
-  const element = getA11Props.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx
index 358d0cc589faf1..c0a1e4647c1fa0 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx
@@ -5,7 +5,8 @@ import * as customPropTypes from '@fluentui/react-proptypes';
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -68,8 +69,7 @@ export const PillIcon = React.forwardRef<HTMLSpanElement, PillIconProps>((props,
     image,
   } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: PillIcon.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -85,7 +85,7 @@ export const PillIcon = React.forwardRef<HTMLSpanElement, PillIconProps>((props,
 
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillImage.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillImage.tsx
index 0cebfae75c09ad..8f6cc295d031ec 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/PillImage.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/PillImage.tsx
@@ -2,7 +2,8 @@ import { Accessibility, pillImageBehavior } from '@fluentui/accessibility';
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -37,8 +38,7 @@ export const PillImage = React.forwardRef<HTMLImageElement, PillImageProps>((pro
 
   const { accessibility = pillImageBehavior, className, design, styles, variables, size } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: PillImage.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
 
@@ -59,7 +59,11 @@ export const PillImage = React.forwardRef<HTMLImageElement, PillImageProps>((pro
   const ElementType = getElementType(props, 'img');
   const unhandledProps = useUnhandledProps(PillImage.handledProps, props);
 
-  const result = <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })} />;
+  const result = (
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    />
+  );
 
   return result;
 }) as unknown as ForwardRefWithAs<'img', HTMLImageElement, PillImageProps> & FluentComponentStaticProps<PillImageProps>;
diff --git a/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx b/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx
index 6929765282a04c..217c1342cf6d9a 100644
--- a/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx
@@ -9,7 +9,8 @@ import {
 import {
   AutoFocusZoneProps,
   FocusTrapZoneProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useControllableState,
   useFluentContext,
   useTriggerElement,
@@ -202,8 +203,7 @@ export const Popup: React.FC<PopupProps> &
     });
   });
 
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: Popup.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     actionHandlers: {
       closeAndFocusTrigger: e => {
         e.preventDefault();
@@ -230,14 +230,14 @@ export const Popup: React.FC<PopupProps> &
         e.stopPropagation();
       },
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       isOpenedByRightClick,
       on,
       trapFocus,
       tabbableTrigger,
       trigger: trigger as any,
       inline,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -430,22 +430,24 @@ export const Popup: React.FC<PopupProps> &
     return relatedTarget && !(isInsideContent || isInsideTarget);
   };
 
+  const popupContentA11yProps = useAccessibilitySlotProps(a11yBehavior, 'popup', {});
+
   const renderPopperChildren =
-    classes =>
+    (classes: string) =>
     ({ placement, scheduleUpdate }: PopperChildrenProps) => {
       const content = renderContent ? renderContent(scheduleUpdate) : props.content;
-      const popupContent = Popup.Content.create(content || {}, {
-        defaultProps: () =>
-          getA11yProps('popup', {
-            ...getContentProps(),
-            placement,
-            pointing,
-            pointerRef: pointerTargetRef,
-            trapFocus,
-            autoFocus,
-            autoSize,
-            className: classes,
-          }),
+      const popupContent = PopupContent.create(content || {}, {
+        defaultProps: {
+          ...getContentProps(),
+          ...popupContentA11yProps,
+          placement,
+          pointing,
+          pointerRef: pointerTargetRef,
+          trapFocus,
+          autoFocus,
+          autoSize,
+          className: classes,
+        },
         overrideProps: getContentProps,
       });
 
@@ -623,10 +625,10 @@ export const Popup: React.FC<PopupProps> &
     </Animation>
   );
 
+  const triggerA11yProps = useAccessibilitySlotProps(a11yBehavior, 'trigger', triggerProps);
+
   const triggerElement = triggerNode && (
-    <Ref innerRef={triggerRef}>
-      {React.cloneElement(triggerNode as React.ReactElement, getA11yProps('trigger', triggerProps))}
-    </Ref>
+    <Ref innerRef={triggerRef}>{React.cloneElement(triggerNode as React.ReactElement, triggerA11yProps)}</Ref>
   );
 
   const element = (
diff --git a/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx b/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx
index afb72ce7d8aff9..942637c5767a3e 100644
--- a/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx
@@ -5,7 +5,8 @@ import {
   FocusTrapZone,
   FocusTrapZoneProps,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -108,8 +109,7 @@ export const PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(
     autoSize,
   } = props;
 
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: PopupContent.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
   const { classes } = useStyles<PopupContentStylesProps>(PopupContent.displayName, {
@@ -134,7 +134,7 @@ export const PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(
     _.invoke(props, 'onMouseLeave', e, props);
   };
 
-  const popupContentProps: PopupContentProps = getA11yProps('root', {
+  const popupContentProps: PopupContentProps = useAccessibilitySlotProps(a11yBehavior, 'root', {
     className: classes.root,
     ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
     ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx
index be3c353a93ee83..1662cf4ce641d1 100644
--- a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx
@@ -19,7 +19,9 @@ import {
   useFluentContext,
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useStyles,
   ForwardRefWithAs,
   useControllableState,
@@ -68,8 +70,7 @@ export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((pro
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(RadioGroup.handledProps, props);
 
-  const getA11yProps = useAccessibility<RadioGroupBehaviorProps>(accessibility, {
-    debugName: RadioGroup.displayName,
+  const a11yBehavior = useAccessibilityBehavior<RadioGroupBehaviorProps>(accessibility, {
     actionHandlers: {
       nextItem: event => setCheckedItem(event, 1),
       prevItem: event => setCheckedItem(event, -1),
@@ -157,15 +158,17 @@ export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((pro
     shouldFocus,
   });
 
+  const itemA11yProps = useAccessibilitySlotProps(a11yBehavior, 'item', {});
+
   const renderItems = (vertical: boolean) => {
     const isNoneValueSelected = checkedValue === undefined;
     return _.map(items, (item, index) =>
       RadioGroupItem.create(item, {
-        defaultProps: () =>
-          getA11yProps('item', {
-            vertical,
-            ...(index === 0 && isNoneValueSelected && { tabIndex: 0 }),
-          }),
+        defaultProps: {
+          ...itemA11yProps,
+          vertical,
+          ...(index === 0 && isNoneValueSelected && { tabIndex: 0 }),
+        },
         overrideProps: handleItemOverrides,
       }),
     );
@@ -187,9 +190,10 @@ export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((pro
     _.invoke(props, 'onCheckedValueChange', event, itemProps);
   };
 
-  const element = getA11yProps.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx
index 7e014c65d42feb..49ed2b66ae1942 100644
--- a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx
@@ -15,7 +15,9 @@ import { Box, BoxProps } from '../Box/Box';
 import { ComponentEventHandler, ShorthandValue, FluentComponentStaticProps } from '../../types';
 import {
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -159,8 +161,7 @@ export const RadioGroupItem = React.forwardRef<HTMLDivElement, RadioGroupItemPro
     rtl: context.rtl,
   });
 
-  const getA11yProps = useAccessibility<RadioGroupItemBehaviorProps>(accessibility, {
-    debugName: RadioGroupItem.displayName,
+  const a11yBehavior = useAccessibilityBehavior<RadioGroupItemBehaviorProps>(accessibility, {
     actionHandlers: {
       performClick: e => {
         if (shouldPreventDefaultOnKeyDown(e)) {
@@ -169,10 +170,10 @@ export const RadioGroupItem = React.forwardRef<HTMLDivElement, RadioGroupItemPro
         handleClick(e);
       },
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       checked,
       disabled,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -182,10 +183,11 @@ export const RadioGroupItem = React.forwardRef<HTMLDivElement, RadioGroupItemPro
     _.invoke(props, 'onChange', e, { ...props, checked });
   };
 
-  const element = getA11yProps.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <Ref innerRef={elementRef}>
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           onClick: handleClick,
           onChange: handleChange,
diff --git a/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx b/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx
index 7ba638c59cb489..62ea091d6517ac 100644
--- a/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx
+++ b/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx
@@ -19,7 +19,8 @@ import {
   useFluentContext,
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
@@ -63,8 +64,7 @@ export const Reaction = React.forwardRef<HTMLSpanElement, ReactionProps>((props,
   const ElementType = getElementType(props, 'span');
   const unhandledProps = useUnhandledProps(Reaction.handledProps, props);
 
-  const getA11yProps = useAccessibility<never>(props.accessibility, {
-    debugName: Reaction.displayName,
+  const a11yBehavior = useAccessibilityBehavior<never>(props.accessibility, {
     rtl: context.rtl,
   });
 
@@ -82,9 +82,22 @@ export const Reaction = React.forwardRef<HTMLSpanElement, ReactionProps>((props,
     rtl: context.rtl,
   });
 
+  const iconElement = Box.create(icon, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'icon', {
+      className: reactionSlotClassNames.icon,
+      styles: resolvedStyles.icon,
+    }),
+  });
+  const contentElement = Box.create(content, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'content', {
+      className: reactionSlotClassNames.content,
+      styles: resolvedStyles.content,
+    }),
+  });
+
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
@@ -95,20 +108,8 @@ export const Reaction = React.forwardRef<HTMLSpanElement, ReactionProps>((props,
         children
       ) : (
         <>
-          {Box.create(icon, {
-            defaultProps: () =>
-              getA11yProps('icon', {
-                className: reactionSlotClassNames.icon,
-                styles: resolvedStyles.icon,
-              }),
-          })}
-          {Box.create(content, {
-            defaultProps: () =>
-              getA11yProps('content', {
-                className: reactionSlotClassNames.content,
-                styles: resolvedStyles.content,
-              }),
-          })}
+          {iconElement}
+          {contentElement}
         </>
       )}
     </ElementType>
diff --git a/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx b/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx
index 3b16a0f2da0761..b106be47ab2888 100644
--- a/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx
@@ -18,7 +18,8 @@ import {
   getElementType,
   useUnhandledProps,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
@@ -47,8 +48,7 @@ export const ReactionGroup = React.forwardRef<HTMLDivElement, ReactionGroupProps
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(ReactionGroup.handledProps, props);
 
-  const getA11yProps = useAccessibility<never>(props.accessibility, {
-    debugName: ReactionGroup.displayName,
+  const a11yBehavior = useAccessibilityBehavior<never>(props.accessibility, {
     rtl: context.rtl,
   });
 
@@ -63,30 +63,31 @@ export const ReactionGroup = React.forwardRef<HTMLDivElement, ReactionGroupProps
     rtl: context.rtl,
   });
 
-  const element = _.isNil(items) ? (
+  const shouldRenderChildren = _.isNil(items);
+
+  const potentialChildren = shouldRenderChildren ? (childrenExist(children) ? children : content) : null;
+  const potentialItems = shouldRenderChildren
+    ? null
+    : _.map(items, reaction =>
+        Reaction.create(reaction, {
+          defaultProps: () => ({
+            styles: resolvedStyles.reaction,
+          }),
+        }),
+      );
+
+  return (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
       })}
       {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
     >
-      {childrenExist(children) ? children : content}
-    </ElementType>
-  ) : (
-    <ElementType {...unhandledProps} className={classes.root}>
-      {_.map(items, reaction =>
-        Reaction.create(reaction, {
-          defaultProps: () => ({
-            styles: resolvedStyles.reaction,
-          }),
-        }),
-      )}
+      {shouldRenderChildren ? potentialChildren : potentialItems}
     </ElementType>
   );
-
-  return element;
 }) as unknown as ForwardRefWithAs<'div', HTMLDivElement, ReactionGroupProps> &
   FluentComponentStaticProps<ReactionGroupProps>;
 
diff --git a/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx b/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx
index 0d6988306355b2..fe70f810855a30 100644
--- a/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx
+++ b/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx
@@ -16,7 +16,9 @@ import { ShorthandValue, FluentComponentStaticProps } from '../../types';
 import { Box, BoxProps } from '../Box/Box';
 import {
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useFluentContext,
   useUnhandledProps,
   useStyles,
@@ -54,8 +56,7 @@ export const Segment = React.forwardRef<HTMLDivElement, SegmentProps>((props, re
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(Segment.handledProps, props);
 
-  const getA11yProps = useAccessibility<never>(props.accessibility, {
-    debugName: Segment.displayName,
+  const a11yBehavior = useAccessibilityBehavior<never>(props.accessibility, {
     rtl: context.rtl,
   });
 
@@ -75,9 +76,10 @@ export const Segment = React.forwardRef<HTMLDivElement, SegmentProps>((props, re
     rtl: context.rtl,
   });
 
-  const element = getA11yProps.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children] }),
diff --git a/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx b/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx
index d98202a959d11a..17c63870a90d10 100644
--- a/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx
@@ -3,7 +3,8 @@ import {
   getElementType,
   useControllableState,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -163,17 +164,16 @@ export const Slider = React.forwardRef<HTMLInputElement, SliderProps>((props, re
     value: String(value),
   });
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Slider.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       disabled,
       getA11yValueMessageOnChange,
       max: numericMax,
       min: numericMax,
       value: numericValue,
       vertical,
-    }),
+    },
   });
   const { classes, styles: resolvedStyles } = useStyles<SliderStylesProps>(Slider.displayName, {
     className: sliderClassName,
@@ -211,31 +211,36 @@ export const Slider = React.forwardRef<HTMLInputElement, SliderProps>((props, re
   // we need 2 wrappers around the slider rail, track, input and thumb slots to achieve correct component sizes
 
   const inputElement = Box.create(input || type, {
-    defaultProps: () =>
-      getA11Props('input', {
-        ...htmlInputProps,
-        as: 'input',
-        className: sliderSlotClassNames.input,
-        min: numericMin,
-        max: numericMax,
-        step,
-        styles: resolvedStyles.input,
-        type,
-        value: numericValue,
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'input', {
+      ...htmlInputProps,
+      as: 'input',
+      className: sliderSlotClassNames.input,
+      min: numericMin,
+      max: numericMax,
+      step,
+      styles: resolvedStyles.input,
+      type,
+      value: numericValue,
+    }),
     overrideProps: handleInputOverrides,
   });
 
   const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...restProps })}>
+    <ElementType {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...restProps })}>
       <div
-        {...getA11Props('inputWrapper', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'inputWrapper', {
           className: cx(sliderSlotClassNames.inputWrapper, classes.inputWrapper),
         })}
       >
-        <span {...getA11Props('rail', { className: cx(sliderSlotClassNames.rail, classes.rail) })} />
         <span
-          {...getA11Props('track', { className: cx(sliderSlotClassNames.track, classes.track) })}
+          {...useAccessibilitySlotProps(a11yBehavior, 'rail', {
+            className: cx(sliderSlotClassNames.rail, classes.rail),
+          })}
+        />
+        <span
+          {...useAccessibilitySlotProps(a11yBehavior, 'track', {
+            className: cx(sliderSlotClassNames.track, classes.track),
+          })}
           style={{ width: valueAsPercentage }}
         />
         <Ref
@@ -248,7 +253,9 @@ export const Slider = React.forwardRef<HTMLInputElement, SliderProps>((props, re
         </Ref>
         {/* the thumb slot needs to appear after the input slot */}
         <span
-          {...getA11Props('thumb', { className: cx(sliderSlotClassNames.thumb, classes.thumb) })}
+          {...useAccessibilitySlotProps(a11yBehavior, 'thumb', {
+            className: cx(sliderSlotClassNames.thumb, classes.thumb),
+          })}
           style={{ [context.rtl ? 'right' : 'left']: valueAsPercentage }}
         />
       </div>
diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx
index 96a61d536ab4bd..4396fbad7d1a55 100644
--- a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx
+++ b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx
@@ -26,7 +26,8 @@ import { Ref } from '@fluentui/react-component-ref';
 import { PositioningProps, AutoSize } from '../../utils/positioner/types';
 
 import {
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   getElementType,
   useFluentContext,
   useUnhandledProps,
@@ -149,11 +150,10 @@ export const SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>((p
 
   const [isFromKeyboard, setIsFromKeyboard] = React.useState<boolean>(false);
 
-  const getA11yProps = useAccessibility<SplitButtonBehaviorProps>(accessibility, {
-    debugName: SplitButton.displayName,
-    mapPropsToBehavior: () => ({
+  const a11yBehavior = useAccessibilityBehavior<SplitButtonBehaviorProps>(accessibility, {
+    behaviorProps: {
       open,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -202,7 +202,7 @@ export const SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>((p
   const element = (
     <Ref innerRef={targetRef}>
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           ref,
           ...unhandledProps,
@@ -211,32 +211,31 @@ export const SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>((p
         {MenuButton.create(
           {},
           {
-            defaultProps: () =>
-              getA11yProps('menuButton', {
-                menu,
-                on: [],
-                open,
-                trigger: createShorthand(Button, button, {
-                  defaultProps: () => ({
-                    styles: resolvedStyles.menuButton,
-                    primary,
-                    secondary,
-                    disabled,
-                  }),
-                  overrideProps: handleMenuButtonTriggerOverrides,
+            defaultProps: useAccessibilitySlotProps(a11yBehavior, 'menuButton', {
+              menu,
+              on: [],
+              open,
+              trigger: createShorthand(Button, button, {
+                defaultProps: () => ({
+                  styles: resolvedStyles.menuButton,
+                  primary,
+                  secondary,
+                  disabled,
                 }),
-                target: targetRef.current,
-                position,
-                align,
-                flipBoundary,
-                overflowBoundary,
-                popperRef,
-                positionFixed,
-                offset,
-                unstable_disableTether,
-                unstable_pinned,
-                autoSize,
+                overrideProps: handleMenuButtonTriggerOverrides,
               }),
+              target: targetRef.current,
+              position,
+              align,
+              flipBoundary,
+              overflowBoundary,
+              popperRef,
+              positionFixed,
+              offset,
+              unstable_disableTether,
+              unstable_pinned,
+              autoSize,
+            }),
             overrideProps: handleMenuButtonOverrides,
           },
         )}
@@ -245,21 +244,19 @@ export const SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>((p
           SplitButtonDivider,
           {},
           {
-            defaultProps: () =>
-              getA11yProps('divider', {
-                primary,
-              }),
+            defaultProps: useAccessibilitySlotProps(a11yBehavior, 'divider', {
+              primary,
+            }),
           },
         )}
         {SplitButtonToggle.create(toggleButton, {
-          defaultProps: () =>
-            getA11yProps('toggleButton', {
-              disabled,
-              primary,
-              secondary,
-              size,
-              flat,
-            }),
+          defaultProps: useAccessibilitySlotProps(a11yBehavior, 'toggleButton', {
+            disabled,
+            primary,
+            secondary,
+            size,
+            flat,
+          }),
           overrideProps: (predefinedProps: ButtonProps) => ({
             onClick: (e: React.SyntheticEvent, buttonProps: ButtonProps) => {
               _.invoke(predefinedProps, 'onClick', e, buttonProps);
diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx
index e246c14fdcb63f..750617bac72cf2 100644
--- a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx
+++ b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Accessibility } from '@fluentui/accessibility';
 import {
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   getElementType,
   useFluentContext,
   useUnhandledProps,
@@ -48,8 +49,7 @@ export const SplitButtonDivider = React.forwardRef<HTMLDivElement, SplitButtonDi
   const ElementType = getElementType(props);
   const { primary } = props;
   const unhandledProps = useUnhandledProps(SplitButtonDivider.handledProps, props);
-  const getA11yProps = useAccessibility<never>(accessibility, {
-    debugName: SplitButtonDivider.displayName,
+  const a11yBehavior = useAccessibilityBehavior<never>(accessibility, {
     rtl: context.rtl,
   });
   const { classes } = useStyles<SplitButtonDividerStylesProps>(SplitButtonDivider.displayName, {
@@ -68,7 +68,7 @@ export const SplitButtonDivider = React.forwardRef<HTMLDivElement, SplitButtonDi
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx
index 3e269bcb2ac5cc..3c9bf0396f572b 100644
--- a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx
+++ b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx
@@ -19,7 +19,8 @@ import { ComponentEventHandler, FluentComponentStaticProps } from '../../types';
 import {
   ForwardRefWithAs,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   useUnhandledProps,
@@ -68,7 +69,6 @@ export const SplitButtonToggle = React.forwardRef<HTMLButtonElement, SplitButton
 
     const {
       accessibility = buttonBehavior,
-      as,
       children,
       content,
       disabled,
@@ -83,12 +83,12 @@ export const SplitButtonToggle = React.forwardRef<HTMLButtonElement, SplitButton
 
     const hasChildren = childrenExist(children);
 
-    const getA11Props = useAccessibility(accessibility, {
-      debugName: SplitButtonToggle.displayName,
-      mapPropsToBehavior: () => ({
-        as: String(as),
+    const ElementType = getElementType(props, 'button');
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
+      behaviorProps: {
+        as: String(ElementType),
         disabled,
-      }),
+      },
       actionHandlers: {
         performClick: event => {
           event.preventDefault();
@@ -115,7 +115,6 @@ export const SplitButtonToggle = React.forwardRef<HTMLButtonElement, SplitButton
     });
 
     const unhandledProps = useUnhandledProps(SplitButtonToggle.handledProps, props);
-    const ElementType = getElementType(props, 'button');
 
     const handleClick = (e: React.SyntheticEvent) => {
       if (disabled) {
@@ -129,7 +128,7 @@ export const SplitButtonToggle = React.forwardRef<HTMLButtonElement, SplitButton
     const result = (
       <ElementType
         {...rtlTextContainer.getAttributes({ forElements: [children] })}
-        {...getA11Props('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           onClick: handleClick,
           disabled,
           className: classes.root,
diff --git a/packages/fluentui/react-northstar/src/components/Status/Status.tsx b/packages/fluentui/react-northstar/src/components/Status/Status.tsx
index ff97f95d6835dc..4d0d7e5f634ffe 100644
--- a/packages/fluentui/react-northstar/src/components/Status/Status.tsx
+++ b/packages/fluentui/react-northstar/src/components/Status/Status.tsx
@@ -2,7 +2,8 @@ import { Accessibility, statusBehavior, StatusBehaviorProps } from '@fluentui/ac
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
   ForwardRefWithAs,
@@ -70,23 +71,23 @@ export const Status = React.forwardRef<HTMLSpanElement, StatusProps>((props, ref
     }),
     rtl: context.rtl,
   });
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Status.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
   const ElementType = getElementType(props, 'span');
   const unhandledProps = useUnhandledProps(Status.handledProps, props);
 
   const iconElement = Box.create(icon, {
-    defaultProps: () =>
-      getA11Props('icon', {
-        styles: resolvedStyles.icon,
-        as: 'span',
-      }),
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'icon', {
+      styles: resolvedStyles.icon,
+      as: 'span',
+    }),
   });
 
   const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
+    <ElementType
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ref, ...unhandledProps })}
+    >
       {iconElement}
     </ElementType>
   );
diff --git a/packages/fluentui/react-northstar/src/components/Table/Table.tsx b/packages/fluentui/react-northstar/src/components/Table/Table.tsx
index 78b6e2786c4037..1ce21536ef9d61 100644
--- a/packages/fluentui/react-northstar/src/components/Table/Table.tsx
+++ b/packages/fluentui/react-northstar/src/components/Table/Table.tsx
@@ -3,7 +3,9 @@ import {
   getElementType,
   mergeVariablesOverrides,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useStyles,
   useFluentContext,
   ForwardRefWithAs,
@@ -92,8 +94,7 @@ export const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) =
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(Table.handledProps, props);
 
-  const getA11yProps = useAccessibility<TableBehaviorProps>(accessibility, {
-    debugName: Table.displayName,
+  const a11yBehavior = useAccessibilityBehavior<TableBehaviorProps>(accessibility, {
     rtl: context.rtl,
   });
 
@@ -108,16 +109,18 @@ export const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) =
     rtl: context.rtl,
   });
 
+  const rowA11yProps = useAccessibilitySlotProps(a11yBehavior, 'row', {});
+
   const renderRows = () => {
     return _.map(rows, (row: TableRowProps) => {
       return TableRow.create(row, {
-        defaultProps: () =>
-          getA11yProps('row', {
-            compact,
-            onClick: (e, props) => {
-              _.invoke(row, 'onClick', e, props);
-            },
-          }),
+        defaultProps: () => ({
+          ...rowA11yProps,
+          compact,
+          onClick: (e, props) => {
+            _.invoke(row, 'onClick', e, props);
+          },
+        }),
         overrideProps: predefinedProps => ({
           variables: mergeVariablesOverrides(variables, predefinedProps.variables),
         }),
@@ -127,21 +130,22 @@ export const Table = React.forwardRef<HTMLDivElement, TableProps>((props, ref) =
 
   const renderHeader = () => {
     return TableRow.create(header, {
-      defaultProps: () =>
-        getA11yProps('row', {
-          header: true,
-          compact,
-          className: tableSlotClassNames.header,
-        }),
+      defaultProps: () => ({
+        ...rowA11yProps,
+        header: true,
+        compact,
+        className: tableSlotClassNames.header,
+      }),
       overrideProps: predefinedProps => ({
         variables: mergeVariablesOverrides(variables, predefinedProps.variables),
       }),
     });
   };
 
-  const element = getA11yProps.unstable_wrapWithFocusZone(
+  const element = wrapWithFocusZone(
+    a11yBehavior,
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx b/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx
index 3c7f5273aa2510..6d768c42c5161a 100644
--- a/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx
+++ b/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx
@@ -17,7 +17,9 @@ import {
   useFluentContext,
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
 
@@ -73,8 +75,7 @@ export const TableCell = React.forwardRef<HTMLDivElement, TableCellProps>((props
   const hasChildren = childrenExist(children);
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(TableCell.handledProps, props);
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: TableCell.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     actionHandlers: {
       focusCell: e => {
         e.preventDefault();
@@ -106,9 +107,10 @@ export const TableCell = React.forwardRef<HTMLDivElement, TableCellProps>((props
 
   const element = (
     <Ref innerRef={cellRef}>
-      {getA11yProps.unstable_wrapWithFocusZone(
+      {wrapWithFocusZone(
+        a11yBehavior,
         <ElementType
-          {...getA11yProps('root', {
+          {...useAccessibilitySlotProps(a11yBehavior, 'root', {
             className: classes.root,
             ref,
             ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx b/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx
index 3e7fa9b006c487..4ebbd6fd97e7cb 100644
--- a/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx
+++ b/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx
@@ -2,7 +2,9 @@ import { Accessibility, tableRowBehavior, GridRowBehaviorProps } from '@fluentui
 import {
   getElementType,
   mergeVariablesOverrides,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useStyles,
   useUnhandledProps,
   useFluentContext,
@@ -72,8 +74,7 @@ export const TableRow = React.forwardRef<HTMLDivElement, TableRowProps>((props,
   const hasChildren = childrenExist(children);
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(TableRow.handledProps, props);
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: TableRow.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     actionHandlers: {
       // https://github.com/microsoft/fluent-ui-react/issues/2150
       unsetRowTabbable: e => {
@@ -86,10 +87,10 @@ export const TableRow = React.forwardRef<HTMLDivElement, TableRowProps>((props,
         }
       },
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       selected,
       header,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -108,10 +109,12 @@ export const TableRow = React.forwardRef<HTMLDivElement, TableRowProps>((props,
     rtl: context.rtl,
   });
 
+  const cellA11yProps = useAccessibilitySlotProps(a11yBehavior, 'cell', {});
+
   const renderCells = () => {
     return _.map(items, (item: TableCellProps) => {
       return TableCell.create(item, {
-        defaultProps: () => getA11yProps('cell', {}),
+        defaultProps: () => cellA11yProps,
         overrideProps: predefinedProps => ({
           variables: mergeVariablesOverrides(variables, predefinedProps.variables),
         }),
@@ -121,9 +124,10 @@ export const TableRow = React.forwardRef<HTMLDivElement, TableRowProps>((props,
 
   const element = (
     <Ref innerRef={rowRef}>
-      {getA11yProps.unstable_wrapWithFocusZone(
+      {wrapWithFocusZone(
+        a11yBehavior,
         <ElementType
-          {...getA11yProps('root', {
+          {...useAccessibilitySlotProps(a11yBehavior, 'root', {
             className: classes.root,
             ref,
             ...unhandledProps,
diff --git a/packages/fluentui/react-northstar/src/components/Text/Text.tsx b/packages/fluentui/react-northstar/src/components/Text/Text.tsx
index 07e9a704396b9d..273071824f3f11 100644
--- a/packages/fluentui/react-northstar/src/components/Text/Text.tsx
+++ b/packages/fluentui/react-northstar/src/components/Text/Text.tsx
@@ -21,7 +21,8 @@ import {
   getElementType,
   useUnhandledProps,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   ForwardRefWithAs,
 } from '@fluentui/react-bindings';
@@ -116,8 +117,7 @@ export const Text = React.forwardRef<HTMLSpanElement, TextProps>((props, ref) =>
     weight,
   } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: Text.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
   const { classes } = useStyles<TextStylesProps>(Text.displayName, {
@@ -150,7 +150,7 @@ export const Text = React.forwardRef<HTMLSpanElement, TextProps>((props, ref) =>
 
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
diff --git a/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx b/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx
index e0527b4e194a84..738ce1162e4485 100644
--- a/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx
+++ b/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx
@@ -8,7 +8,8 @@ import {
   getElementType,
   useUnhandledProps,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   ForwardRefWithAs,
   useControllableState,
@@ -89,11 +90,10 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((pr
 
   const unhandledProps = useUnhandledProps(TextArea.handledProps, props);
 
-  const getA11yProps = useAccessibility<TextAreaBehaviorProps>(accessibility, {
-    debugName: TextArea.displayName,
-    mapPropsToBehavior: () => ({
+  const a11yBehavior = useAccessibilityBehavior<TextAreaBehaviorProps>(accessibility, {
+    behaviorProps: {
       disabled,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -126,7 +126,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((pr
 
   const element = (
     <ElementType
-      {...getA11yProps('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         value,
         disabled,
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/Toolbar.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/Toolbar.tsx
index a77542d1546dcc..e5698a8d87d4de 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/Toolbar.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/Toolbar.tsx
@@ -11,7 +11,9 @@ import {
   getElementType,
   getFirstFocusable,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useStyles,
   useUnhandledProps,
 } from '@fluentui/react-bindings';
@@ -172,8 +174,7 @@ export const Toolbar = compose<'div', ToolbarProps, ToolbarStylesProps, {}, {}>(
     const lastVisibleItemIndex = React.useRef<number>();
     const animationFrameId = React.useRef<number>();
 
-    const getA11Props = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
     const { classes } = useStyles<ToolbarStylesProps>(composeOptions.displayName, {
@@ -544,7 +545,28 @@ export const Toolbar = compose<'div', ToolbarProps, ToolbarStylesProps, {}, {}>(
     const menuSlot = composeOptions.slots.menu;
     const menuToolbarContextValue = React.useMemo(() => ({ slots: { menu: menuSlot } }), [menuSlot]);
 
-    const element = overflow ? (
+    const content = overflow ? (
+      <>
+        <div className={classes.overflowContainer} ref={overflowContainerRef}>
+          <ToolbarMenuContextProvider value={menuToolbarContextValue}>
+            <ToolbarVariablesProvider value={variables}>
+              {childrenExist(children) ? children : renderItems(getVisibleItems())}
+              {overflowSentinel && renderOverflowSentinel()}
+              {renderOverflowItem(overflowItem)}
+            </ToolbarVariablesProvider>
+          </ToolbarMenuContextProvider>
+        </div>
+        <div className={classes.offsetMeasure} ref={offsetMeasureRef} />
+      </>
+    ) : (
+      <ToolbarMenuContextProvider value={menuToolbarContextValue}>
+        <ToolbarVariablesProvider value={variables}>
+          {childrenExist(children) ? children : renderItems(items)}
+        </ToolbarVariablesProvider>
+      </ToolbarMenuContextProvider>
+    );
+
+    return (
       <>
         <Ref
           innerRef={(node: HTMLDivElement) => {
@@ -552,43 +574,18 @@ export const Toolbar = compose<'div', ToolbarProps, ToolbarStylesProps, {}, {}>(
             handleRef(ref, node);
           }}
         >
-          {getA11Props.unstable_wrapWithFocusZone(
-            <ElementType {...getA11Props('root', { className: classes.root, ...unhandledProps })}>
-              <div className={classes.overflowContainer} ref={overflowContainerRef}>
-                <ToolbarMenuContextProvider value={menuToolbarContextValue}>
-                  <ToolbarVariablesProvider value={variables}>
-                    {childrenExist(children) ? children : renderItems(getVisibleItems())}
-                    {overflowSentinel && renderOverflowSentinel()}
-                    {renderOverflowItem(overflowItem)}
-                  </ToolbarVariablesProvider>
-                </ToolbarMenuContextProvider>
-              </div>
-              <div className={classes.offsetMeasure} ref={offsetMeasureRef} />
+          {wrapWithFocusZone(
+            a11yBehavior,
+            <ElementType
+              {...useAccessibilitySlotProps(a11yBehavior, 'root', { className: classes.root, ...unhandledProps })}
+            >
+              {content}
             </ElementType>,
           )}
         </Ref>
-        <EventListener listener={handleWindowResize} target={context.target.defaultView} type="resize" />
+        {overflow && <EventListener listener={handleWindowResize} target={context.target.defaultView} type="resize" />}
       </>
-    ) : (
-      <Ref
-        innerRef={(node: HTMLDivElement) => {
-          containerRef.current = node;
-          handleRef(ref, node);
-        }}
-      >
-        {getA11Props.unstable_wrapWithFocusZone(
-          <ElementType {...getA11Props('root', { className: classes.root, ...unhandledProps })}>
-            <ToolbarMenuContextProvider value={menuToolbarContextValue}>
-              <ToolbarVariablesProvider value={variables}>
-                {childrenExist(children) ? children : renderItems(items)}
-              </ToolbarVariablesProvider>
-            </ToolbarMenuContextProvider>
-          </ElementType>,
-        )}
-      </Ref>
     );
-
-    return element;
   },
   {
     className: toolbarClassName,
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarCustomItem.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarCustomItem.tsx
index 9cca31ca68a3b6..8cf1ff4b744f3a 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarCustomItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarCustomItem.tsx
@@ -4,7 +4,8 @@ import {
   getElementType,
   mergeVariablesOverrides,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
 } from '@fluentui/react-bindings';
@@ -65,8 +66,7 @@ export const ToolbarCustomItem = compose<'div', ToolbarCustomItemProps, ToolbarC
     const { accessibility, children, className, content, design, fitted, focusable, styles, variables } = props;
     const parentVariables = React.useContext(ToolbarVariablesContext);
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
     const { classes } = useStyles<ToolbarCustomItemStylesProps>(composeOptions.displayName, {
@@ -100,7 +100,7 @@ export const ToolbarCustomItem = compose<'div', ToolbarCustomItemProps, ToolbarC
 
     const element = (
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           [IS_FOCUSABLE_ATTRIBUTE]: focusable,
           ...unhandledProps,
           className: classes.root,
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarDivider.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarDivider.tsx
index 4238f582f2e7f9..2f9084a64e7e1c 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarDivider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarDivider.tsx
@@ -3,7 +3,8 @@ import {
   getElementType,
   mergeVariablesOverrides,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
   compose,
@@ -33,8 +34,7 @@ export const ToolbarDivider = compose<'div', ToolbarDividerProps, ToolbarDivider
     const { accessibility, className, design, styles, variables } = props;
     const parentVariables = React.useContext(ToolbarVariablesContext);
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
     const { classes } = useStyles<ToolbarDividerStylesProps>(composeOptions.displayName, {
@@ -53,7 +53,11 @@ export const ToolbarDivider = compose<'div', ToolbarDividerProps, ToolbarDivider
     const ElementType = getElementType(props);
     const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
 
-    const element = <ElementType {...getA11yProps('root', { ref, ...unhandledProps, className: classes.root })} />;
+    const element = (
+      <ElementType
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', { ref, ...unhandledProps, className: classes.root })}
+      />
+    );
 
     return element;
   },
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx
index e3f85d47d9c7df..0f8d44b1d1df54 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx
@@ -1,11 +1,17 @@
-import { Accessibility, toolbarItemBehavior, ToolbarItemBehaviorProps } from '@fluentui/accessibility';
+import {
+  Accessibility,
+  toolbarItemBehavior,
+  ToolbarItemBehaviorProps,
+  ToggleButtonBehaviorProps,
+} from '@fluentui/accessibility';
 import {
   compose,
   getElementType,
   mergeVariablesOverrides,
   useUnhandledProps,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useContextSelectors,
 } from '@fluentui/react-bindings';
@@ -148,8 +154,8 @@ export const ToolbarItem = compose<'button', ToolbarItemProps, ToolbarItemStyles
     );
     const { menuSlot } = useContextSelectors(ToolbarMenuContext, menuSelector) as unknown as ToolbarItemSubscribedValue; // TODO: we should improve typings for the useContextSelectors
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const ElementType = getElementType(props);
+    const a11yBehavior = useAccessibilityBehavior<ToolbarItemBehaviorProps | ToggleButtonBehaviorProps>(accessibility, {
       actionHandlers: {
         performClick: event => {
           event.preventDefault();
@@ -166,15 +172,15 @@ export const ToolbarItem = compose<'button', ToolbarItemProps, ToolbarItemStyles
           event.stopPropagation();
         },
       },
-      mapPropsToBehavior: () => ({
-        as: String(props.as),
+      behaviorProps: {
+        as: String(ElementType),
         disabled,
         disabledFocusable,
         hasMenu: !!menu,
         hasPopup: !!popup,
         menuOpen,
         active,
-      }),
+      },
       rtl: context.rtl,
     });
     const { classes } = useStyles<ToolbarItemStylesProps>(composeOptions.displayName, {
@@ -260,7 +266,6 @@ export const ToolbarItem = compose<'button', ToolbarItemProps, ToolbarItemStyles
       },
     });
 
-    const ElementType = getElementType(props);
     const slotProps = composeOptions.resolveSlotProps<ToolbarItemProps>(props);
     const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
 
@@ -272,7 +277,7 @@ export const ToolbarItem = compose<'button', ToolbarItemProps, ToolbarItemStyles
         }}
       >
         <ElementType
-          {...getA11yProps('root', {
+          {...useAccessibilitySlotProps(a11yBehavior, 'root', {
             ...unhandledProps,
             disabled,
             className: classes.root,
@@ -313,6 +318,23 @@ export const ToolbarItem = compose<'button', ToolbarItemProps, ToolbarItemStyles
       </Unstable_NestingAuto>
     ) : null;
 
+    const contentElement = (
+      <>
+        {itemElement}
+        {submenuElement}
+      </>
+    );
+    const wrapperElement = createShorthand(composeOptions.slots.wrapper, wrapper, {
+      defaultProps: useAccessibilitySlotProps(a11yBehavior, 'wrapper', { ...slotProps.wrapper }),
+      overrideProps: predefinedProps => ({
+        children: contentElement,
+        onClick: e => {
+          handleWrapperClick(e);
+          _.invoke(predefinedProps, 'onClick', e);
+        },
+      }),
+    });
+
     if (popup) {
       const popupElement = createShorthand(composeOptions.slots.popup, popup, {
         defaultProps: () => slotProps.popup,
@@ -327,25 +349,7 @@ export const ToolbarItem = compose<'button', ToolbarItemProps, ToolbarItemStyles
 
     // wrap the item if it has menu (even if it is closed = not rendered)
     if (menu) {
-      const contentElement = (
-        <>
-          {itemElement}
-          {submenuElement}
-        </>
-      );
-
       if (wrapper) {
-        const wrapperElement = createShorthand(composeOptions.slots.wrapper, wrapper, {
-          defaultProps: () => getA11yProps('wrapper', slotProps.wrapper || {}),
-          overrideProps: predefinedProps => ({
-            children: contentElement,
-            onClick: e => {
-              handleWrapperClick(e);
-              _.invoke(predefinedProps, 'onClick', e);
-            },
-          }),
-        });
-
         return wrapperElement;
       }
 
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenu.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenu.tsx
index efb8f919effbd9..df1041550b7ce9 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenu.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenu.tsx
@@ -10,7 +10,9 @@ import {
   mergeVariablesOverrides,
   useUnhandledProps,
   useFluentContext,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useStyles,
 } from '@fluentui/react-bindings';
 import { Ref } from '@fluentui/react-component-ref';
@@ -87,8 +89,7 @@ export const ToolbarMenu = compose<'ul', ToolbarMenuProps, ToolbarMenuStylesProp
     const mergedVariables = mergeVariablesOverrides(parentVariables, variables);
     const slotProps = composeOptions.resolveSlotProps<ToolbarMenuProps>(props);
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       actionHandlers: {
         performClick: e => {
           _.invoke(props, 'onClick', e, props);
@@ -160,8 +161,9 @@ export const ToolbarMenu = compose<'ul', ToolbarMenuProps, ToolbarMenuStylesProp
     const ElementType = getElementType(props);
     const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
 
-    const element = getA11yProps.unstable_wrapWithFocusZone(
-      <ElementType {...getA11yProps('root', { ...unhandledProps, className: classes.root })}>
+    const element = wrapWithFocusZone(
+      a11yBehavior,
+      <ElementType {...useAccessibilitySlotProps(a11yBehavior, 'root', { ...unhandledProps, className: classes.root })}>
         <ToolbarVariablesProvider value={mergedVariables}>
           {childrenExist(children) ? children : renderItems()}
         </ToolbarVariablesProvider>
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuDivider.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuDivider.tsx
index 360efdc23e6e37..5df662d39e81bf 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuDivider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuDivider.tsx
@@ -3,7 +3,8 @@ import {
   getElementType,
   mergeVariablesOverrides,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
   compose,
@@ -34,8 +35,7 @@ export const ToolbarMenuDivider = compose<'li', ToolbarMenuDividerProps, Toolbar
     const { accessibility, className, design, styles, variables } = props;
     const parentVariables = React.useContext(ToolbarVariablesContext);
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
     const { classes } = useStyles<ToolbarMenuDividerStylesProps>(composeOptions.displayName, {
@@ -54,7 +54,11 @@ export const ToolbarMenuDivider = compose<'li', ToolbarMenuDividerProps, Toolbar
     const ElementType = getElementType(props);
     const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
 
-    const element = <ElementType {...getA11yProps('root', { ...unhandledProps, className: classes.root, ref })} />;
+    const element = (
+      <ElementType
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', { ...unhandledProps, className: classes.root, ref })}
+      />
+    );
 
     return element;
   },
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx
index a1121554898118..122af07647921f 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx
@@ -21,7 +21,8 @@ import {
   useFluentContext,
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useContextSelectors,
 } from '@fluentui/react-bindings';
 
@@ -184,18 +185,16 @@ export const ToolbarMenuItem = compose<'button', ToolbarMenuItemProps, ToolbarMe
     const slotProps = composeOptions.resolveSlotProps<ToolbarMenuItemProps>(props);
     const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
-      mapPropsToBehavior: () => ({
+    const a11yBehavior = useAccessibilityBehavior<ToolbarMenuItemBehaviorProps>(accessibility, {
+      behaviorProps: {
         hasMenu: !!menu,
-        active,
         menuOpen,
         disabled,
         disabledFocusable,
         'aria-label': props['aria-label'],
         'aria-labelledby': props['aria-labelledby'],
         'aria-describedby': props['aria-describedby'],
-      }),
+      },
       actionHandlers: {
         performClick: event => {
           event.preventDefault();
@@ -333,9 +332,13 @@ export const ToolbarMenuItem = compose<'button', ToolbarMenuItemProps, ToolbarMe
       _.invoke(props, 'onClick', e, props);
     };
 
+    const contentElement = createShorthand(composeOptions.slots.content, content, {
+      defaultProps: useAccessibilitySlotProps(a11yBehavior, 'content', { ...slotProps.content }),
+    });
+
     const element = (
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           onClick: handleClick,
           disabled,
@@ -348,9 +351,7 @@ export const ToolbarMenuItem = compose<'button', ToolbarMenuItemProps, ToolbarMe
         ) : (
           <>
             {createShorthand(composeOptions.slots.icon, icon, { defaultProps: () => slotProps.icon })}
-            {createShorthand(composeOptions.slots.content, content, {
-              defaultProps: () => getA11yProps('content', slotProps.content),
-            })}
+            {contentElement}
             {active &&
               createShorthand(composeOptions.slots.activeIndicator, activeIndicator, {
                 defaultProps: () => slotProps.activeIndicator,
@@ -434,10 +435,9 @@ export const ToolbarMenuItem = compose<'button', ToolbarMenuItemProps, ToolbarMe
     }
 
     const wrapperElement = Box.create(wrapper, {
-      defaultProps: () =>
-        getA11yProps('wrapper', {
-          className: cx(toolbarMenuItemSlotClassNames.wrapper, classes.wrapper),
-        }),
+      defaultProps: useAccessibilitySlotProps(a11yBehavior, 'wrapper', {
+        className: cx(toolbarMenuItemSlotClassNames.wrapper, classes.wrapper),
+      }),
       overrideProps: () => ({
         children: (
           <>
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroup.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroup.tsx
index 1f889c3236b136..42c2f834c2105f 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroup.tsx
@@ -9,7 +9,8 @@ import {
   mergeVariablesOverrides,
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
 } from '@fluentui/react-bindings';
@@ -77,8 +78,7 @@ export const ToolbarMenuRadioGroup = compose<
     const parentVariables = React.useContext(ToolbarVariablesContext);
     const mergedVariables = mergeVariablesOverrides(parentVariables, variables);
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       rtl: context.rtl,
     });
     const { classes } = useStyles<ToolbarMenuRadioGroupStylesProps>(composeOptions.displayName, {
@@ -106,7 +106,9 @@ export const ToolbarMenuRadioGroup = compose<
     const unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
 
     const content = (
-      <ElementType {...getA11yProps('root', { ...unhandledProps, className: classes.root, ref })}>
+      <ElementType
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', { ...unhandledProps, className: classes.root, ref })}
+      >
         <ToolbarVariablesProvider value={mergedVariables}>
           {_.map(items, (item, index) =>
             createShorthand(ToolbarMenuItem, item, {
@@ -122,14 +124,15 @@ export const ToolbarMenuRadioGroup = compose<
         </ToolbarVariablesProvider>
       </ElementType>
     );
-    const element = createShorthand(composeOptions.slots.wrapper, wrapper, {
-      defaultProps: () => getA11yProps('wrapper', slotProps.wrapper || {}),
+
+    const wrapperElement = createShorthand(composeOptions.slots.wrapper, wrapper, {
+      defaultProps: useAccessibilitySlotProps(a11yBehavior, 'wrapper', { ...slotProps.wrapper }),
       overrideProps: {
         children: content,
       },
     });
 
-    return element;
+    return wrapperElement;
   },
   {
     className: toolbarMenuRadioGroupClassName,
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarRadioGroup.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarRadioGroup.tsx
index 6e24960780ede2..ada2816314e738 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarRadioGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarRadioGroup.tsx
@@ -9,7 +9,8 @@ import {
   getElementType,
   mergeVariablesOverrides,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
 } from '@fluentui/react-bindings';
@@ -71,8 +72,7 @@ export const ToolbarRadioGroup = compose<'div', ToolbarRadioGroupProps, ToolbarR
     const parentVariables = React.useContext(ToolbarVariablesContext);
     const mergedVariables = mergeVariablesOverrides(parentVariables, variables);
 
-    const getA11yProps = useAccessibility(accessibility, {
-      debugName: composeOptions.displayName,
+    const a11yBehavior = useAccessibilityBehavior(accessibility, {
       actionHandlers: {
         nextItem: event => setFocusedItem(event, 1),
         prevItem: event => setFocusedItem(event, -1),
@@ -155,7 +155,7 @@ export const ToolbarRadioGroup = compose<'div', ToolbarRadioGroupProps, ToolbarR
 
     const element = (
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           ...unhandledProps,
           className: classes.root,
           ref,
diff --git a/packages/fluentui/react-northstar/src/components/Tooltip/Tooltip.tsx b/packages/fluentui/react-northstar/src/components/Tooltip/Tooltip.tsx
index a4bb15308002b4..bc3a7f17c4dd0e 100644
--- a/packages/fluentui/react-northstar/src/components/Tooltip/Tooltip.tsx
+++ b/packages/fluentui/react-northstar/src/components/Tooltip/Tooltip.tsx
@@ -1,6 +1,7 @@
 import { Accessibility, tooltipAsLabelBehavior, TooltipBehaviorProps } from '@fluentui/accessibility';
 import {
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useControllableState,
   useFluentContext,
   useTriggerElement,
@@ -161,7 +162,7 @@ export const Tooltip: React.FC<TooltipProps> &
   const contentId = React.useRef<string>();
   contentId.current = getOrGenerateIdFromShorthand('tooltip-content-', content, contentId.current);
 
-  const getA11Props = useAccessibility(accessibility, {
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     actionHandlers: {
       close: e => {
         setTooltipOpen(false, e);
@@ -169,14 +170,15 @@ export const Tooltip: React.FC<TooltipProps> &
         e.preventDefault();
       },
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       'aria-describedby': props['aria-describedby'],
       'aria-label': props['aria-label'],
       'aria-labelledby': props['aria-labelledby'],
       contentId: contentId.current,
       triggerAriaLabel: trigger && trigger.props['aria-label'],
       open,
-    }),
+    },
+    rtl: context.rtl,
   });
 
   const getContentOverrideProps = (
@@ -194,16 +196,17 @@ export const Tooltip: React.FC<TooltipProps> &
     },
   });
 
+  const tooltipContentA11yProps = useAccessibilitySlotProps(a11yBehavior, 'tooltip', {});
   const renderPopperChildren = (popperProps: PopperChildrenProps) => {
     const tooltipContent = TooltipContent.create(content, {
-      defaultProps: () =>
-        getA11Props('tooltip', {
-          open,
-          placement: popperProps.placement,
-          pointing,
-          pointerRef: pointerTargetRef,
-          subtle,
-        }),
+      defaultProps: () => ({
+        ...tooltipContentA11yProps,
+        open,
+        placement: popperProps.placement,
+        pointing,
+        pointerRef: pointerTargetRef,
+        subtle,
+      }),
       generateKey: false,
       overrideProps: getContentOverrideProps,
     });
@@ -262,16 +265,15 @@ export const Tooltip: React.FC<TooltipProps> &
     },
   };
 
+  const triggerA11yProps = useAccessibilitySlotProps(a11yBehavior, 'trigger', {
+    ...unhandledProps,
+    ...triggerElement?.props,
+    ...triggerProps,
+  });
+
   const element = (
     <>
-      {triggerElement && (
-        <Ref innerRef={triggerRef}>
-          {React.cloneElement(
-            triggerElement,
-            getA11Props('trigger', { ...unhandledProps, ...triggerElement.props, ...triggerProps }),
-          )}
-        </Ref>
-      )}
+      {triggerElement && <Ref innerRef={triggerRef}>{React.cloneElement(triggerElement, triggerA11yProps)}</Ref>}
       <PortalInner mountNode={mountNode}>
         <Popper
           align={align}
diff --git a/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx b/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx
index c9602681569825..1b2b9bcbcdc08c 100644
--- a/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx
@@ -2,7 +2,8 @@ import { Accessibility } from '@fluentui/accessibility';
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useFluentContext,
   useStyles,
   ForwardRefWithAs,
@@ -74,8 +75,7 @@ export const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentPro
     subtle,
   } = props;
 
-  const getA11Props = useAccessibility(accessibility, {
-    debugName: TooltipContent.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
   });
   const { classes } = useStyles<TooltipContentStylesProps>(TooltipContent.displayName, {
@@ -100,7 +100,7 @@ export const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentPro
 
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         ref,
         ...rtlTextContainer.getAttributes({ forElements: [children, content] }),
@@ -109,7 +109,7 @@ export const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentPro
     >
       {open && pointing && <div className={classes.pointer} ref={pointerRef} />}
 
-      <div {...getA11Props('content', { className: classes.content })}>
+      <div {...useAccessibilitySlotProps(a11yBehavior, 'content', { className: classes.content })}>
         {childrenExist(children) ? children : content}
       </div>
     </ElementType>
diff --git a/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx b/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx
index 5eb73fd135da33..62d8b827835af9 100644
--- a/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx
+++ b/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx
@@ -2,7 +2,9 @@ import { Accessibility, treeBehavior, TreeBehaviorProps } from '@fluentui/access
 import {
   useUnhandledProps,
   getElementType,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
+  wrapWithFocusZone,
   useStyles,
   useFluentContext,
   ForwardRefWithAs,
@@ -125,12 +127,11 @@ export const Tree = React.forwardRef<HTMLDivElement, TreeProps>((props, ref) =>
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(Tree.handledProps, props);
 
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: Tree.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     rtl: context.rtl,
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       selectable,
-    }),
+    },
   });
 
   const { classes } = useStyles<TreeStylesProps>(Tree.displayName, {
@@ -177,15 +178,17 @@ export const Tree = React.forwardRef<HTMLDivElement, TreeProps>((props, ref) =>
     ],
   );
 
+  const defaultItemProps = useAccessibilitySlotProps(a11yBehavior, 'item', {
+    renderItemTitle: props.renderItemTitle,
+  });
+
   const renderContent = (): React.ReactElement[] => {
     return visibleItemIds.map(id => {
       const item = getItemById(id);
       const { expanded, parent, level, index, treeSize } = item;
+
       return TreeItem.create(item.item, {
-        defaultProps: () =>
-          getA11yProps('item', {
-            renderItemTitle: props.renderItemTitle,
-          }),
+        defaultProps: defaultItemProps,
         overrideProps: {
           expanded,
           parent,
@@ -201,9 +204,10 @@ export const Tree = React.forwardRef<HTMLDivElement, TreeProps>((props, ref) =>
 
   const element = (
     <TreeContext.Provider value={contextValue}>
-      {getA11yProps.unstable_wrapWithFocusZone(
+      {wrapWithFocusZone(
+        a11yBehavior,
         <ElementType
-          {...getA11yProps('root', {
+          {...useAccessibilitySlotProps(a11yBehavior, 'root', {
             className: classes.root,
             ref,
             ...rtlTextContainer.getAttributes({ forElements: [children] }),
diff --git a/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx b/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx
index e985aa9ee6da18..fc7fde69c35cd9 100644
--- a/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx
@@ -2,7 +2,8 @@ import { Accessibility, treeItemBehavior, TreeItemBehaviorProps } from '@fluentu
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
   ForwardRefWithAs,
@@ -158,7 +159,7 @@ export const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>((props,
 
   const { selected, hasSubtree, childrenIds } = getItemById(id);
 
-  const getA11Props = useAccessibility(accessibility, {
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
     actionHandlers: {
       performClick: e => {
         if (shouldPreventDefaultOnKeyDown(e)) {
@@ -202,8 +203,7 @@ export const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>((props,
         handleSelection(e);
       },
     },
-    debugName: TreeItem.displayName,
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       expanded,
       level,
       index,
@@ -212,7 +212,7 @@ export const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>((props,
       selected: selected === true,
       selectable,
       indeterminate: selected === 'indeterminate',
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -290,9 +290,30 @@ export const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>((props,
 
   const ElementType = getElementType(props);
   const unhandledProps = useUnhandledProps(TreeItem.handledProps, props);
+
+  const titleElement = TreeTitle.create(title, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'title', {
+      hasSubtree,
+      as: hasSubtree ? 'span' : 'a',
+      level,
+      treeSize,
+      expanded,
+      index,
+      selected: selected === true,
+      selectable,
+      parent,
+      ...(hasSubtree && {
+        indeterminate: selected === 'indeterminate',
+      }),
+      selectionIndicator,
+    }),
+    render: renderItemTitle,
+    overrideProps: handleTitleOverrides,
+  });
+
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         id,
         ref: elementRef,
@@ -303,28 +324,7 @@ export const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>((props,
         ...unhandledProps,
       })}
     >
-      {childrenExist(children)
-        ? children
-        : TreeTitle.create(title, {
-            defaultProps: () =>
-              getA11Props('title', {
-                hasSubtree,
-                as: hasSubtree ? 'span' : 'a',
-                level,
-                treeSize,
-                expanded,
-                index,
-                selected: selected === true,
-                selectable,
-                parent,
-                ...(hasSubtree && {
-                  indeterminate: selected === 'indeterminate',
-                }),
-                selectionIndicator,
-              }),
-            render: renderItemTitle,
-            overrideProps: handleTitleOverrides,
-          })}
+      {childrenExist(children) ? children : titleElement}
     </ElementType>
   );
 
diff --git a/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx b/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx
index 3f7193f36d42ee..4b4ea1a1cf1957 100644
--- a/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx
+++ b/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx
@@ -2,7 +2,8 @@ import { Accessibility, treeTitleBehavior, TreeTitleBehaviorProps } from '@fluen
 import {
   getElementType,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   useStyles,
   useFluentContext,
   ForwardRefWithAs,
@@ -123,8 +124,7 @@ export const TreeTitle = React.forwardRef<HTMLAnchorElement, TreeTitleProps>((pr
     indeterminate,
   } = props;
 
-  const getA11Props = useAccessibility<TreeTitleBehaviorProps>(accessibility, {
-    debugName: TreeTitle.displayName,
+  const a11yBehavior = useAccessibilityBehavior<TreeTitleBehaviorProps>(accessibility, {
     actionHandlers: {
       performClick: e => {
         if (shouldPreventDefaultOnKeyDown(e)) {
@@ -138,14 +138,14 @@ export const TreeTitle = React.forwardRef<HTMLAnchorElement, TreeTitleProps>((pr
         focusItemById(props.parent);
       },
     },
-    mapPropsToBehavior: () => ({
+    behaviorProps: {
       hasSubtree,
       level,
       index,
       treeSize,
       selected,
       selectable,
-    }),
+    },
     rtl: context.rtl,
   });
 
@@ -192,23 +192,19 @@ export const TreeTitle = React.forwardRef<HTMLAnchorElement, TreeTitleProps>((pr
     },
   });
 
-  const selectionIndicatorElement =
-    selectable &&
-    Box.create(selectionIndicator, {
-      defaultProps: () => ({
-        as: 'span',
-        selected,
-        ...getA11Props('indicator', {
-          className: treeTitleSlotClassNames.indicator,
-          styles: resolvedStyles.selectionIndicator,
-        }),
-      }),
-      overrideProps: selectionIndicatorOverrideProps,
-    });
+  const selectionIndicatorElement = Box.create(selectionIndicator, {
+    defaultProps: useAccessibilitySlotProps(a11yBehavior, 'indicator', {
+      as: 'span',
+      selected,
+      className: treeTitleSlotClassNames.indicator,
+      styles: resolvedStyles.selectionIndicator,
+    }),
+    overrideProps: selectionIndicatorOverrideProps,
+  });
 
   const element = (
     <ElementType
-      {...getA11Props('root', {
+      {...useAccessibilitySlotProps(a11yBehavior, 'root', {
         className: classes.root,
         onClick: handleClick,
         selected,
@@ -218,7 +214,7 @@ export const TreeTitle = React.forwardRef<HTMLAnchorElement, TreeTitleProps>((pr
       })}
     >
       {childrenExist(children) ? children : content}
-      {selectionIndicatorElement}
+      {selectable && selectionIndicatorElement}
     </ElementType>
   );
 
diff --git a/packages/fluentui/react-northstar/src/components/Video/Video.tsx b/packages/fluentui/react-northstar/src/components/Video/Video.tsx
index 1e257e8a4b89b4..d1b854c97555dc 100644
--- a/packages/fluentui/react-northstar/src/components/Video/Video.tsx
+++ b/packages/fluentui/react-northstar/src/components/Video/Video.tsx
@@ -9,8 +9,10 @@ import {
   getElementType,
   useStyles,
   useUnhandledProps,
-  useAccessibility,
+  useAccessibilityBehavior,
+  useAccessibilitySlotProps,
   ForwardRefWithAs,
+  useFluentContext,
 } from '@fluentui/react-bindings';
 
 export interface VideoProps extends UIComponentProps {
@@ -59,13 +61,15 @@ export const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref)
     design,
     styles,
   } = props;
+
+  const context = useFluentContext();
   const videoRef = React.useRef<HTMLVideoElement>();
 
   const ElementType = getElementType(props, 'video');
   const unhandledProps = useUnhandledProps(Video.handledProps, props);
 
-  const getA11yProps = useAccessibility(accessibility, {
-    debugName: Video.displayName,
+  const a11yBehavior = useAccessibilityBehavior(accessibility, {
+    rtl: context.rtl,
   });
 
   React.useEffect(() => {
@@ -96,7 +100,7 @@ export const Video = React.forwardRef<HTMLVideoElement, VideoProps>((props, ref)
   const element = (
     <Ref innerRef={videoRef}>
       <ElementType
-        {...getA11yProps('root', {
+        {...useAccessibilitySlotProps(a11yBehavior, 'root', {
           className: classes.root,
           autoPlay,
           controls,
diff --git a/packages/fluentui/react-northstar/src/utils/factories.ts b/packages/fluentui/react-northstar/src/utils/factories.ts
index e8f51652eb13db..00fd9009623be6 100644
--- a/packages/fluentui/react-northstar/src/utils/factories.ts
+++ b/packages/fluentui/react-northstar/src/utils/factories.ts
@@ -12,7 +12,7 @@ type ShorthandProp = 'children' | 'src' | 'type';
 
 interface CreateShorthandOptions<P extends {}> {
   /** Default props object */
-  defaultProps?: () => Partial<Props<P>>;
+  defaultProps?: (() => Partial<Props<P>>) | Partial<Props<P>>;
 
   /** Override props object or function (called with regular props) */
   overrideProps?: Partial<Props<P>> | ((props: P) => Partial<Props<P>>);
@@ -144,7 +144,8 @@ export function createShorthandInternal<P extends {}>({
   // ----------------------------------------
   // Build up props
   // ----------------------------------------
-  const defaultProps = options.defaultProps ? options.defaultProps() || ({} as Props<P>) : ({} as Props<P>);
+  const defaultProps =
+    (typeof options.defaultProps === 'function' ? options.defaultProps() : options.defaultProps) ?? ({} as Props<P>);
 
   // User's props
   const usersProps =
diff --git a/packages/fluentui/react-northstar/src/utils/index.ts b/packages/fluentui/react-northstar/src/utils/index.ts
index 928420630a4e27..20b216bd575ac2 100644
--- a/packages/fluentui/react-northstar/src/utils/index.ts
+++ b/packages/fluentui/react-northstar/src/utils/index.ts
@@ -7,9 +7,6 @@ export { getOrGenerateIdFromShorthand } from './getOrGenerateIdFromShorthand';
 export * from './factories';
 export { mergeProviderContexts } from './mergeProviderContexts';
 
-export * from './renderComponent';
-export { renderComponent } from './renderComponent';
-
 export { htmlImageProps, htmlInputAttrs, htmlInputEvents, htmlInputProps, partitionHTMLProps } from './htmlPropsUtils';
 
 export { isBrowser } from './isBrowser';
diff --git a/packages/fluentui/react-northstar/src/utils/renderComponent.tsx b/packages/fluentui/react-northstar/src/utils/renderComponent.tsx
deleted file mode 100644
index c3fc20040e1009..00000000000000
--- a/packages/fluentui/react-northstar/src/utils/renderComponent.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import {
-  AccessibilityActionHandlers,
-  ComponentSlotClasses,
-  FocusZone,
-  getElementType,
-  getUnhandledProps,
-  ReactAccessibilityBehavior,
-  unstable_getAccessibility as getAccessibility,
-  unstable_getStyles as getStyles,
-  ProviderContextPrepared,
-} from '@fluentui/react-bindings';
-import { noopRenderer } from '@fluentui/react-northstar-fela-renderer';
-import {
-  emptyTheme,
-  ComponentSlotStylesResolved,
-  ComponentVariablesObject,
-  DebugData,
-  PropsWithVarsAndStyles,
-  ThemePrepared,
-} from '@fluentui/styles';
-import * as _ from 'lodash';
-import * as React from 'react';
-
-import { Props } from '../types';
-import { logProviderMissingWarning } from './providerMissingHandler';
-
-export interface RenderResultConfig<P> {
-  ElementType: React.ElementType<P>;
-  classes: ComponentSlotClasses;
-  unhandledProps: Props;
-  variables: ComponentVariablesObject;
-  styles: ComponentSlotStylesResolved;
-  accessibility: ReactAccessibilityBehavior;
-  rtl: boolean;
-  theme: ThemePrepared;
-}
-
-export type RenderComponentCallback<P> = (config: RenderResultConfig<P>) => any;
-
-export interface RenderConfig<P> {
-  className?: string;
-  displayName: string;
-  handledProps: string[];
-  props: PropsWithVarsAndStyles;
-  state: Record<string, any>;
-  actionHandlers: AccessibilityActionHandlers;
-  render: RenderComponentCallback<P>;
-  saveDebug: (debug: DebugData | null) => void;
-  isFirstRenderRef: React.MutableRefObject<boolean>;
-}
-
-export const renderComponent = <P extends {}>(
-  config: RenderConfig<P>,
-  context?: ProviderContextPrepared,
-): React.ReactElement<P> => {
-  const { className, displayName, handledProps, props, state, actionHandlers, render, saveDebug = () => {} } = config;
-
-  if (_.isEmpty(context)) {
-    logProviderMissingWarning();
-  }
-
-  const rtl = context.rtl || false;
-
-  const ElementType = getElementType(props) as React.ReactType<P>;
-  const unhandledProps = getUnhandledProps(handledProps, props);
-  const stateAndProps = { ...state, ...props };
-
-  const accessibility: ReactAccessibilityBehavior = getAccessibility(
-    displayName,
-    props.accessibility,
-    stateAndProps,
-    rtl,
-    actionHandlers,
-  );
-  const { classes, variables, styles, theme } = getStyles({
-    allDisplayNames: [displayName],
-    className,
-    disableAnimations: context.disableAnimations || false,
-    primaryDisplayName: displayName,
-    componentProps: stateAndProps,
-    inlineStylesProps: stateAndProps,
-    renderer: context.renderer || noopRenderer,
-    rtl,
-    saveDebug,
-    theme: context.theme || emptyTheme,
-    performance: {
-      ...context.performance,
-      // we cannot enable caching for class components
-      enableStylesCaching: false,
-      enableBooleanVariablesCaching: false,
-    },
-  });
-
-  const resolvedConfig: RenderResultConfig<P> = {
-    ElementType,
-    unhandledProps,
-    classes,
-    variables,
-    styles,
-    accessibility,
-    rtl,
-    theme,
-  };
-
-  if (accessibility.focusZone) {
-    const originalElementType = resolvedConfig.ElementType;
-
-    resolvedConfig.ElementType = FocusZone as any;
-    resolvedConfig.unhandledProps = {
-      ...resolvedConfig.unhandledProps,
-      ...accessibility.focusZone.props,
-    };
-    resolvedConfig.unhandledProps.as = originalElementType;
-    resolvedConfig.unhandledProps.isRtl = resolvedConfig.rtl;
-  }
-
-  const element = render(resolvedConfig);
-
-  return element;
-};
diff --git a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
index 3a8c1909679017..ce4ee1a56ab6d9 100644
--- a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
+++ b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
@@ -498,7 +498,7 @@ export function isConformant(
   // ---------------------------------------
   if (isComposedComponent) {
     describe('compose', () => {
-      describe('debug', () => {
+      it('overrides default "displayName"', () => {
         const displayName = 'ComposedComponent';
         const ComposedComponent = compose<'div', { accessibility?: Accessibility }, {}, {}, {}>(
           Component as ComposedComponent,
@@ -507,22 +507,7 @@ export function isConformant(
           },
         );
 
-        it('overrides default "displayName"', () => {
-          expect(ComposedComponent.displayName).toBe(displayName);
-        });
-
-        it('overrides default debug name for accessibility', () => {
-          const noopBehavior: Accessibility = () => ({
-            attributes: {
-              root: { 'aria-label': 'test' },
-            },
-          });
-
-          const wrapper = mount(<ComposedComponent {...requiredProps} accessibility={noopBehavior} />);
-          const element = getComponent(wrapper);
-
-          expect(element.prop('data-aa-class')).toBe(displayName);
-        });
+        expect(ComposedComponent.displayName).toBe(displayName);
       });
 
       describe('styles', () => {
diff --git a/packages/fluentui/react-northstar/test/specs/components/Toolbar/ToolbarMenuRadioGroup-test.ts b/packages/fluentui/react-northstar/test/specs/components/Toolbar/ToolbarMenuRadioGroup-test.ts
index 91755d31bf2331..3f7bcb72b103ad 100644
--- a/packages/fluentui/react-northstar/test/specs/components/Toolbar/ToolbarMenuRadioGroup-test.ts
+++ b/packages/fluentui/react-northstar/test/specs/components/Toolbar/ToolbarMenuRadioGroup-test.ts
@@ -9,7 +9,10 @@ describe('ToolbarMenuRadioGroup', () => {
     testPath: __filename,
     wrapperComponent: ToolbarMenuRadioGroupWrapper,
     constructorName: 'ToolbarMenuRadioGroup',
-    getTargetElement: result => result.container.querySelector(`[data-aa-class="ToolbarMenuRadioGroup"]`),
+    requiredProps: {
+      'data-root': true,
+    },
+    getTargetElement: result => result.container.querySelector(`[data-root]`),
   });
 
   describe('accessibility', () => {