fix(data-table): make persistent search bar keyboard accessible

[janhassel]

Closes #6573

When using persistent prop on TableToolbarSearch component, the search bar was not keyboard accessible since its tabindex was set to -1.

Changelog

Changed

• Control container and input tabindex as well as input's aria-hidden based on expanded || persistent instead of expanded in TableToolbarSearch
• Updated DataTable snapshots regarding this

Testing / Reviewing

• Testing should make sure PR has no side effects
• For review: run react storybook and change defaultExpanded to persistent in with-batch-actions.js story. Search bar should be in tab order now. For previous behaviour, refer to the code sandbox in the linked issue or change

const searchExpanded = expanded || persistent;

in TableToolbarSearch.js with

const searchExpanded = expanded;

Search bar shouldn't be in the tab order anymore then.

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 41cf276

https://deploy-preview-6574--carbon-elements.netlify.app

[netlify]

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit 41cf276

https://deploy-preview-6574--carbon-components-react.netlify.app

[tw15egan]

Thanks for taking the time to contribute a fix! I'm noticing a small issue, however. In the original issue, I do see the problem in the second search bar with persistent. However, if I switch the wording to persistant (the old, deprecated prop name), it works properly.

In this PR, it now works for persistent, but it now seems broken if I set the prop name to persistant 🤔

[janhassel]

@tw15egan True, didn't notice that earlier. Should be fixed now! 👍

[tw15egan]

Thanks for fixing that 🙏 👍 ✅

[dakahn]

Thank you so much for taking care of this 🏄