[a11y]: Data table, keyboard tab selecting Search field even though Batch action bar is covering it

[shixiedesign]

Package

@carbon/react

Browser

No response

Operating System

No response

Package version

1.51.0

React version

No response

Automated testing tool and ruleset

Manual testing

Assistive technology

No response

Description

Currently, in data table with batch action, when batch action bar appears, it covers the search field. The problem is: while we cannot show both bars at the same time in the UI, it is possible to navigate to to both of them by using keyboard tab key. Which is a concerning accessibility issue because there is no visual indication on what is in focus in the UI (Read Success Criterion 2.4.12 Focus Not Obscured and Success Criterion 2.4.13 Focus Appearance).

Credit goes to Rahul Sivananda for uncovering it. Slack discussion here: https://ibm-cio.slack.com/archives/C03HBU0F9J5/p1708590978617919

See screen recording:

https://github.com/carbon-design-system/carbon/assets/15144993/7f2aea16-e20e-4943-82f9-1f7624a735d0

WCAG 2.1 Violation

No response

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-datatable-batch-actions--playground

Steps to reproduce

See screen recording attached above.

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems