Updated tab item focus to wait for the next frame

[AndrewMusgrave]

WHY are these changes introduced?

Fixes #11829

WHAT is this pull request doing?

Using the same pattern as popover overlay to delay focusing to the next frame (for measuring/positioning)

Giphy

Before

Monosnap.screencast.2024-07-03.16-41-53.mp4

After

Monosnap.screencast.2024-07-03.16-41-16.mp4

How to 🎩

Playground code ⬇️

import React, {useState} from 'react';

import {Page, Box, Tabs} from '../src';

const tabs = [
  {content: 'Hello1', id: '1'},
  {content: 'Hello2', id: '2'},
  {content: 'Hello3', id: '3'},
  {content: 'Hello4', id: '4'},
  {content: 'Hello5', id: '5'},
  {content: 'Hello6', id: '6'},
  {content: 'Hello7', id: '7'},
  {content: 'Hello8', id: '8'},
  {content: 'Hello9', id: '9'},
  {content: 'Hello10', id: '10'},
  {content: 'Hello11', id: '11'},
  {content: 'Hello12', id: '12'},
  {content: 'Hello13', id: '13'},
  {content: 'Hello14', id: '14'},
  {content: 'Hello15', id: '15'},
];

export const Playground = {
  tags: ['skip-tests'],
  render() {
    const [selected, setSelected] = useState(0);

    return (
      <Page narrowWidth>
        <Box background="avatar-five-bg-fill" minHeight="4000px" />
        <Tabs tabs={tabs} selected={selected} onSelect={setSelected} />
      </Page>
    );
  },
};

Notes

While tophatting I noticed some odd behavior with how the focus styles are applied. We're using the focus visible selector, but manually sending focus. This is causing the browser to sometimes not display the focus ring - I noticed it the most on firefox.

🎩 checklist

• Tested a snapshot
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[AndrewMusgrave]

/snapit

[github-actions]

🫰✨ Thanks @AndrewMusgrave! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20240703204424"

[AndrewMusgrave]

This is needed to keep the variable within scope for the RAF

[AndrewMusgrave]

Seems to be the same issue as popover overlay

[lgriffee]

Tophat and code LGTM! 🎩✨ Thanks for much for this fix Andrew! Let me just tag one more Polaris dev for a second review since Chloe is out for a bit.

While tophatting I noticed some odd behavior with how the focus styles are applied. We're using the focus visible selector, but manually sending focus. This is causing the browser to sometimes not display the focus ring - I noticed it the most on firefox.

I wasn't able to reproduce this while tophatting 🤔 Would you mind adding a video to a new issue so I can try to reproduce this? And was this happening prior to your fix? If so, we can keep this separate from these changes.

[AndrewMusgrave]

@lgriffee I wish I did take a video, I'm having trouble reproducing it again! However, it was on main. The core of the issue was we're manually setting focus, and whatever heuristic the focus-visible selector is using wasn't met.