fix(TableToolbarAction): adds forwardRef so focus management works as expected

[abbeyhrt]

Closes #2481
Closes #3372

Components using OverflowMenuItem need to have the primaryFocus attribute on the first item so a user can use the arrow keys to go between options. This PR makes it so the README for OverflowMenu, which specifies this, shows up in the react Storybook (#3372 was just confusion around that). It adds forwardRef to TableToolbarAction, in conjunction with adding primaryFocus, so that focus management works as expected.

Changelog

New

• README visible in storybook for OverflowMenu

Changed

• adds forwardRef to TableToolbarAction

Testing / Reviewing

• Go to DataTable with batch actions example, tab into gear and make sure you can use arrow keys to select options.
  Expected:
  

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit 52ce5c2

https://deploy-preview-3918--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 52ce5c2

https://deploy-preview-3918--carbon-elements.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 52ce5c2

https://deploy-preview-3918--carbon-components-react.netlify.com

[joshblack]

Fix looks good 👍 I think some snapshots are failing on DataTable, though 👀

[tw15egan]

Do we have any examples using an OverflowMenu in a TableRow? Unable to verify this fixes #3372

[aledavila]

@tw15egan unsure it exists in react. It exists in vanilla, josefina worked on it but I'm not sure who worked on updating the v10 react datatable and if it was included.

[dakahn]

Great! 🏄 Approving, but there is one extra bonus fix if you feel up for it. It's out of the scope of the referenced issues, but since you have a familiarity with the component might be a good add on;

My expectation is that if I have the menu open with an item focused and I hit TAB focus should move to the next tabstop (in this case an "Add New" button). Here's an example using an navigation menu. Tab to the menu, open it, and then hit tab and you'll see focus jump to a link (since the whole navbar itself is a tabstop in the example's case).

The way it works now is the menu closes and focus is returned to the menu's button.

Again, not a blocker and feel free to merge and we can roll this into another ticket 👍

--

UPDATE
Discussed it offline and after some deliberation we're gonna move this to a ticket 💯

[abbeyhrt]

#3372 is a little weird, this fixes it because there was never really a problem in the first place. For the focus management to work, there needs to be the primaryFocus attribute on the first OverflowMenuItem and they weren't doing that. This is in the readme but the readme wasn't in the storybook, this adds it to the storybook. Hopefully people won't have this problem in the future!🤞

[tw15egan]

@abbeyhrt makes sense, thanks for clarifying! Looks good once tests are fixed