[Bug]: InfoLabel, Popover has incorrect tab order when they are not rendered inline

[kolaps33]

Component

InfoLabel

Package version

9.61.5

React version

18.3.1

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 165H
    Memory: 31.99 GB / 63.64 GB
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Current Behavior

focus goes to the browser

Expected Behavior

focus goes to the next element in the DOM, what is button number 2

Reproduction

https://stackblitz.com/edit/pawd9zfs?file=src%2Fexample.tsx

Steps to reproduce

1. go to https://stackblitz.com/edit/pawd9zfs?file=src%2Fexample.tsx
2. Navigate on the InfoLabel icon
3. Press Enter key (info label is open and focus is set to content)
4. Press TAB key twice

Expected: focus goes to the next element in the DOM Actual: focus goes to the browser

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[sopranopillow]

This is due to the popover rendering in a portal. Infolabels should be rendered inline if possible, is there a reason why it's needed to render it in a portal?

[kolaps33]

Hi @sopranopillow

is there is reason to be rendered in the portal.

Because infoLabel need to be shown over the UI which is fixed/sticked.

If I render infoLabel inline, then it is not shown properly. I tried used high z-index, this didn't help.

[microsoft-github-policy-service[bot]]

no assignees

Gentle ping that this issue needs attention.

[mainframev]

Hi @kolaps33 👋🏻

@sopranopillow mentioned above correctly, you'd have to have it inline in the most cases. However, in you case, zIndex should work as well. Did you try something like this?

import * as React from 'react';

import {
  InfoLabel,
  InfoLabelProps,
  Link,
  makeStyles,
} from '@fluentui/react-components';

const useStyles = makeStyles({
  fixed: {
    position: 'fixed',
    top: '10px',
    height: '50px',
    zIndex: 100,
    width: '100%',
    background: 'red',
  },
  zIndex: {
    position: 'relative',
    zIndex: 101,
  },
});

export const Default = (props: Partial<InfoLabelProps>) => {
  const styles = useStyles();
  const ref = React.useRef(null);
  return (
    <>
      <div className={styles.fixed} ref={ref}>
        kek
      </div>
      <button>1</button>
      <InfoLabel
        info={{
          children: (Component, props) => (
            <Component {...props} className={styles.zIndex}>
              This is example information for an InfoLabel.{' '}
              <Link href="https://react.fluentui.dev">Learn more</Link>
            </Component>
          ),
        }}
        {...props}
      >
        Example label
      </InfoLabel>
      <button>2</button>
      <button>3</button>
    </>
  );
};

[bsunderhus]

This is also reproducible in Popover component, might need some investigation

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

[microsoft-github-policy-service[bot]]

Because this reported issue has not had any activity for over 180 days, we're automatically closing it for house-keeping reasons.

Still require assistance? Please, create a new issue with up-to date details and latest version of Fluent.