chore(dropdown): add split button action example

[Mash707]

Closes #10197
References:

• https://v5-archive.patternfly.org/components/menus/dropdown/react-deprecated#split-button-checkbox
• https://www.patternfly.org/components/menus/menu-toggle#split-toggle-with-checkbox

[Mash707]

@kmcfaul @thatblindgeye I have created a draft for the example. Let me know of the changes required.
Also could you guys also suggest the description and sub heading for the example, I am not sure of it. Thank You

[patternfly-build]

Preview: https://patternfly-react-pr-11753.surge.sh

A11y report: https://patternfly-react-pr-11753-a11y.surge.sh

[Mash707]

There were some a11y issues regarding MenuToggle and MenuToggleCheckbox since I didn't add aria-label to them.
@thatblindgeye do check the aria-labels once, I have added them for now so that the tests don't fail.

[nicolethoen]

Event handling is not quite ideal in this example.

In other dropdown examples, if I open the menu using the keyboard, i can hit tab and it will close the menu and put focus on the next focusable element on the page (in the docs, that's usually the button)

In the other dropdown examples, I can also click outside the menu and it will close the menu.

I think it's because this new example might be missing the 'onOpenChange' prop.

[Mash707]

Yes, it was happening due to the missing onOpenChange prop. I have added it and now the menu is closing when clicking outside.

[nicolethoen]

I'm noticing that if I select an option from the menu (with they keyboard or my mouse) browser focus is not returned to the MenuToggle as it does in other examples.

I think you're also missing the shouldFocusToggleOnSelect prop

[Mash707]

When adding the shouldFocusToggleOnSelect , it does not seem to work with splitButtonItems prop of the menu toggle. If I remove the splitButtonItems prop then it is working fine.
I also added splitButtonItems to others examples to test things out and it breaks them too.

[thatblindgeye]

Looks like it's because we're applying the innerref inside MenuToggle to that wrapper div instead of the toggle button:

patternfly-react/packages/react-core/src/components/MenuToggle/MenuToggle.tsx

Lines 200 to 202 in 31a4c28

	if (splitButtonItems) {
	return (
	<div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles, styles.modifiers.splitButton)}>

Since it's a plain div without any tabindex focus gets lost when trying to focus it, and we end up back at the top of the page when you Tab again. This PR is what added the ref to that div #8024 . @kmcfaul do you recall if we need to have the ref on this wrapper div? Moving it to the button toggle for the splitButtonItems return seems more accurate in this case, but can't remember if there was a specific reason.

An alternative would be possibly having to supply some custom focus logic in the example code, which consumers would then have to also implement.