chore(v0): use useAccessibilityBehavior() & useAccessibilitySlotProps() hooks

Author: layershifter

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. */

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,15 +216,15 @@ 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);
       _.invoke(props, 'onTitleClick', e, titleProps);
     },
     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,

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,

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,23 +114,21 @@ 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();
           e.stopPropagation();
           handleClick(e);
         },
       },
-      mapPropsToBehavior: () => ({
-        hasContent: !!content,
+      behaviorProps: {
         canBeCollapsed,
-        as: String(as),
+        as: String(ElementType),
         active,
         disabled,
         accordionContentId,
-      }),
+      },
       rtl: context.rtl,
     });
 
@@ -161,42 +159,38 @@ 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,
                   }),
                 })}
               </>
             ),
-            ...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,