feat(bindings): add useAccessibility hook

[layershifter]

🍴 useAccessibility()

This PR adds support for useAccessibility() hook that allows to use existing or created behavior in custom components.

👨‍💻 Example

  const getA11Props = useAccessibility(imageBehavior, {
    mapPropsToBehavior: () => ({
      disabled: props.disabled
    }),
    actionHandlers: {
      click: (e: React.KeyboardEvent<HTMLDivElement>) => {
        if (onClick) onClick(e);
      }
    }
  });

• mapPropsToBehavior() - passes props to behavior, allows to pass props strictly, similar to mapPropsToState() in useStateManager()
• actionHandlers - works as existing actionHandlers in our components and allows to bind component actions to actions described in behaviors
• getA11Props(slotName, slotProps) - a function that applies accessibility props and performs proper merge with user's props

📡 POC

https://codesandbox.io/s/dropdown-prototype-r3ux9
(prototype of Dropdown component that uses useStateManager() and useAccessibility())

---

Questions

1️⃣ Refactor to .root() syntax

During our discussion @levithomason, he proposed more fancy signature for getA11Props():

getA11Props('root', someProps) // existing
getA11Props.root(someProps) // proposed

Key issue with this proposal that I don't understand there is еру replacement of behaviors. For example, I can replace imageBehavior with emptyBehavior without definitions for any slots. How I will not that I need to create a getA11Props.image()?

As solution, I can use Proxy, but it's not supported in IE11 💣

2️⃣ FocusZone

There is no support in useAccessibility() for FocusZone, I propose to ship it later. Now, I am not fully sure around approaches and want to discuss them separately.

[jurokapsiar]

can this be Props | () => Props for API simplification? looking at the unit tests I think passing an object there should be sufficient for most use cases.

[layershifter]

I see that you mean, but I want to keep it obvious for now and in sync with useStateManager(). We can improve this part once we will receive feedback for this thing.

[mnajdova]

I agree that Props | () => Props maybe make sense, in most of the cases I see this as a simple props mapping.. Anyways, not a blocker :)

[layershifter]

There are no typings for keyboard-key 😭

[ecraig12345]

Hi, just a heads up that I made a change #2153 renaming all lib folders to utils. So the changes to lib files in this PR will need to be moved to the new location.

[mnajdova]

Can we extract this in a separate function

[mnajdova]

Suggested change

	const keyHandlers = definition.keyHandlers[slotName]
	const keyHandlers = slotHandlers

[layershifter]

Points of confusion / Parts that were blamed

• getA11Props() - it's not clear that this function is responsible for merging accessibility and client props
• mapPropsToBehavior() - should it be just an object? How to handle overrides case?
• childBehaviors - are not implemented as there is a strict contract from child components (accept accessibility prop)

[mnajdova]

We reviewed and agreed that there are parts that can be improved (see #1980 (comment)), but it can be merged as is now, and we'll iterate later on them. Good job @layershifter!