[ic-tab] Tab behaviour when removed

[gd2910]

Summary of the bug

When the final tab is focused and then removed the selection and focus state should move to the first tab in the group. At the moment the first tab is selected but not focused.

Adding a check to the tabRemovedHandler in ic-tab-context to set focus on the first tab when the last tab is removed should fix this issue.

🪜 How to reproduce

Tell us the steps to reproduce the problem: Run react storybook and add a story with;

`export const ChangeTabs = () => { const [tabs, setTabs] = useState([ { label: "Ingredients", content: "Tab One - Ingredients" }, { label: "Method", content: "Tab Two - Method" }, { label: "History", content: "Tab Three - History" }, ]);

let childTabs = [ { label: "Ingredients", content: "Tab One - Ingredients" }, { label: "Method", content: "Tab Two - Method" }, ];

useEffect(() => { const timer = setTimeout(() => { setTabs(childTabs); }, 3000);

return () => clearTimeout(timer);

}, [childTabs]);

return ( <div style={{ margin: "2rem" }}> <IcTabContext > <IcTabGroup label="Example tab group"> {tabs.map((tab, index) => ( <IcTab key={index}>{tab.label}</IcTab> ))} </IcTabGroup> {tabs.map((tab, index) => ( <IcTabPanel key={index}>{tab.content}</IcTabPanel> ))} </IcTabContext> ); }`

When rendered select the final tab and wait for it to be removed.

🧐 Expected behaviour

The first tab should be selected and focused.

Additional info

Once fixed remove the skip flag on ic-tabs Cypress E2E tests.