Component

SearchBox

Package version

9.53.0

React version

17.0.1

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 45.58 GB / 63.95 GB
  Browsers:
    Edge: Chromium (127.0.2651.105)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
  npmPackages:
    @fluentui/react: 8.119.0 => 8.119.0
    @fluentui/react-charting: 5.21.22 => 5.21.22
    @fluentui/react-components: 9.53.0 => 9.53.0
    @fluentui/react-datepicker-compat: 0.4.36 => 0.4.36
    @fluentui/react-icons: 2.0.241 => 2.0.241
    @types/react: 17.0.26 => 17.0.26
    @types/react-dom: 17.0.9 => 17.0.9
    react: 17.0.1 => 17.0.1
    react-dom: 17.0.1 => 17.0.1

Current Behavior

The dismiss button is only accessible by mouse functionality and it is inaccessible when trying to access using keyboard functionality both Tab and Arrow Keys, and when adding a tab index of 0 to the dismiss property of search box the dismiss button is accessible but is not able to be activated using keyboard functionality

Expected Behavior

The dismiss button is accessible by keyboard functionality and is able to be activated using keyboard

Reproduction

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

Steps to reproduce

1. Go to the stackblitz link
2. Click on the search bar
3. Hit Tab Key
4. Observe the issue

Are you reporting an Accessibility issue?

yes

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

Microsoft Advanced Insights

Are you willing to submit a PR to fix?

no

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.