Fix for visual rowDetails in DataTable

[aheintz]

What does this PR do?

1. Added a justify="center" to the ExpanderControl component to make the icon vertically centered and to handle non-standard themes or styling.
2. Fixed a rendering problem where the first line of the Datatable was selected if using Cmd-Tab to move back to the browser window and triggering an event in use-keyboard.js which caused this effect. Removed the "usingKeyboard", the only case I could find where this would be applicable would be using the onSelect use-case, but that still works as intended after manual testing. I would appreciate some input whether which is correct though.

Where should the reviewer start?

src/components/DataTable/ExpanderCell.js and src/components/DataTable/Body.js are the only files changed except the updated snapshot.

What testing has been done on this PR?

1. Manual testing with different themes to verify the icon's position. The snapshot changes also indicate that the only affected are vertical (flexbox) alignment.
2. Manual tests of the removal of the usingKeyboard, I might need help here to verify it's not affecting something I'm not aware of, I'm not too familiar with grommet.

How should this be manually tested?

The storybooks should suffice.

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• userEvent is used in place of fireEvent.
• asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

This partially resolved #6344

Screenshots (if appropriate)

Do the grommet docs need to be updated?

No

Should this PR be mentioned in the release notes?

No

Is this change backwards compatible or is it a breaking change?

Backwards compatible

[aheintz]

Sorry, had a bit of a git issue. Closing this and reopening.