add additional useTwoToneFocusBorder button prop

[adaoraarinze]

Platform

• iOS
• macOS
• win32
• windows
• android

Describe the feature that you would like added

Currently if you're using a primary button on a non high contrast theme on win32, the property shouldUseTwoToneFocusBorder is always true.

  const shouldUseTwoToneFocusBorder = Platform.OS === ('win32' as any) && props.appearance === 'primary' && !isHighContrast(theme);
  const [baseHeight, setBaseHeight] = React.useState<number | undefined>(undefined);
  const [baseWidth, setBaseWidth] = React.useState<number | undefined>(undefined);
  const onLayoutInner = React.useCallback(
    (e: LayoutChangeEvent) => {
      // Only run when shouldUseTwoToneFocusBorder so that state update doesn't
      // affect platforms that don't need it.
      if (shouldUseTwoToneFocusBorder) {
        setBaseHeight(e.nativeEvent.layout.height);
        setBaseWidth(e.nativeEvent.layout.width);
      }

      onLayout && onLayout(e);
    },

This causes the primary button to re-render which can cause performance issues if you're using a lot of them. I'm proposing adding an optional prop to the button component, useTwoToneFocusBorder, which will allow users to turn this off if they're using the primary button. It will default to true so that only those who want to turn it off will be affected.

What component or utility would this be added to

Button component

Have you discussed this feature with our team, and if so, who

No response

Additional context/screenshots

No response

[rurikoaraki]

Hi, on the win32 platform the two-tone focus border is an a11y requirement in order to make sure the borders have the required color contrast ratio against backgrounds. Turning them off would make the buttons not hit a11y standards, so unfortunately, I don't think it's a good idea to introduce this prop.

There may be ways to reduce unnecessary rerenders if you're finding that the button is rerendering way more often than just on initial mount - in theory the layout should settle down after a few state changes? Are you seeing it constantly rerender?