Skip to content

[Bug]: Focus ring broken with portal compat #24411

@ling1726

Description

@ling1726

Library

React Components / v9 (@fluentui/react-components)

System Info

System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
    Memory: 1018.01 MB / 15.42 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Browsers:
    Chrome: 101.0.4951.54

Are you reporting Accessibility issue?

yes

Reproduction

https://codesandbox.io/s/hungry-easley-4k6ovf?file=/example.tsx >= 9.2.0
https://codesandbox.io/s/throbbing-rgb-tqu2ey?file=/package.json < 9.2.0

Bug Description

The portal compat registration forwards all CSS variables but does not forward data-keyboard-nav in < 9.2.0

For > 9.2.0 portal compat was overlooked (😔🙇‍♂️🙇‍♂️)

Actual Behavior

Focus ring does not appear for v9 components in v0 portal

Expected Behavior

Focus ring appears for v9 components in v0 portal

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions