fix(tabs): L3-4707 Remove Focus Border From Tabs on Click

[adietrich3074]

Jira ticket

L3-4707

Screenshots

Before	After

Summary

Fixed tabbing functionality and corrected focus styles

Change List (describe the changes made to the files)

• Adjusted padding for tab content
• Added tabIndex to TabTrigger component

Acceptance Test (how to verify the PR)

• Verify that outline only shows when tabbing through tabs and not on click of the tab

Things to look for during review

• PR title should correctly describe the most significant type of commit. I.e. feat(scope): ... if a minor release should be triggered.
• All commit messages follow convention and are appropriate for the changes
• All references to phillips class prefix are using the prefix variable
• All major areas have a data-testid attribute.
• Document all props with jsdoc comments
• All strings should be translatable.
• Unit tests should be written and should have a coverage of 90% or higher in all areas.

New Components

• Are there any accessibility considerations that need to be taken into account and tested?
• Default story called "Playground" should be created for all new components
• Create a jsdoc comment that has an Overview section and a link to the Figma design for the component
• Export the component and its typescript type from the index.ts file
• Import the component scss file into the componentStyles.scss file.

[netlify]

✅ Deploy Preview for phillips-seldon ready!

Name	Link
🔨 Latest commit	499468e
🔍 Latest deploy log	https://app.netlify.com/sites/phillips-seldon/deploys/6797cffa02f9f00008c9d004
😎 Deploy Preview	https://deploy-preview-484--phillips-seldon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[scottdickerson]

the keyboard navigation here isn't quite right. Hitting tab again should not change to the next

<Key presses>
Tab : When focus moves to the tabs-widget, the active tab-element gets focus. 
When the focus is in the tab-element, the focus moves to the next focusable item (so, not to the next tab).
 This can mean either item in the active tab panel or first thing outside the widget.
Left Arrow: When the focus is on the active tab-element, the focus moves to the next tab on the list. If on the last tab, focus moves to the first tab. If tabs are automatically activated, activates the focused tab.
Right Arrow: When the focus is on the active tab-element, the focus moves to the previous tab on the list. If on the first item, moves focus to the last tab. If tabs are automatically activated, activates the focused tab.

https://dev.to/eevajonnapanula/keyboard-accessible-tabs-with-react-5ch4

[scottdickerson]

LGTM

[davidicus]

🎉 This issue has been resolved in version 1.109.1 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀