fix(uishell): provide tabindex as a named prop

[tay1orjones]

Surfaced in slack:

We have a situation where this component is usually hidden, and it’s an accessibility issue for tab navigation to traverse this element while it’s hidden. Therefore, we’d like to set its tabindex to -1 when it’s hidden.

This just moves the tabindex to be set before ...rest so it can be overridden This makes tabIndex a named and configurable prop.

Changelog

Changed

• provide tabIndex as a prop for SwitcherItem and HeaderMenuItem

Testing / Reviewing

• The component should still be navigable as it was before
• Adding tabindex=-1 should prevent it from being in the tab order

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 223da3f

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/622bdbb2dc34250009872b54

😎 Browse the preview: https://deploy-preview-10900--carbon-react-next.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!

🔨 Explore the source changes: 223da3f

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/622bdbb2f006a700091700a5

😎 Browse the preview: https://deploy-preview-10900--carbon-components-react.netlify.app

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 223da3f

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/622bdbb262f8e500086ee4b1

😎 Browse the preview: https://deploy-preview-10900--carbon-elements.netlify.app

[joshblack]

For situations like this, would it be helpful if our convention was to make this an explicit/named prop?

This would allow us to safely override things that we need to control and allow a way to add in support for things over time. There are definitely things that should always be configurable (like tabindex) that we should straighten out but figured this could be a good heuristic going forward. Curious what you think

[JohnWColby]

Is it possible to make a similar change here? We're running into the same issue trying to override the tabIndex for this component: https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/UIShell/HeaderMenuItem.js#L37

[tay1orjones]

@joshblack Great point, I made them named props.

@ColbyJohnIBM I also made the update in HeaderMenuItem