RFC: Triggers and multiple layers of button handling

[bsunderhus]

PREVIEW

Problem statement

On the case of a custom component being as a trigger child, it's impossible for useARIAButtonProps (which is used internally) to find out if the returned element will be an actual button or not.

<Trigger>
  <Button>Trigger something</Button>
</Trigger>

That way, even for Button, useARIAButtonProps will end up providing a bunch of unnecessary props.

<button onclick="fn" onkeydown="fn" onkeyup="fn" role="button" tabindex="0">Trigger something</button>

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against b48083b3009bc75f28c328de0024eb400b989145}

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4531e7c:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: b48083b3009bc75f28c328de0024eb400b989145 (build)

[layershifter]

Is it the problem? Will be something broken?

[bsunderhus]

Yup, that's the problem, nothing will be broken. It's just a bunch of redundant listeners and properties such as role and tabIndex

[layershifter]

But redundant properties will break nothing, correct?

[bsunderhus]

Yes, nothing will be broken, they'll just override one another.

[layershifter]

Should be then a third option in RFC called "Do nothing"? 🤔

[jurokapsiar]

we will need to make sure that when tabindex is used explicitly, it won't be overriden by trigger:
should still render a with tabindex -1 and menuitem role.

[jurokapsiar]

similarly keydown, keyup and click handlers on button should be respected

[layershifter]

This is the biggest issue as it works against our composition model and composition model in React as requires to know about isFluentTriggerComponent. It works for MenuTrigger, PopoverTrigger more or less because there are no reasons to recompose *Trigger components.

[jurokapsiar]

wrapping is very common. moreover we have scenarios where a button is wrapped with popover and a tooltip.

[ling1726]

I would go for disableButtonEnhancement as a prop, it would let users fall into the 'pit of success' and there is an out for them if they need it.

Perhaps this could be done for existing triggers, any unstable or future triggers can revert to a behaviour where they expect an ARIA compliant button as a contract ?

[layershifter]

@bsunderhus I see that the RFC was merged, but what solution is a way to go and what are discarded? Can you please update it?