carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.73k stars 1.79k forks source link

[Bug]: Wrong focus style on DataTable batch actions toolbar #17000

Open AlanGreene opened 1 month ago

AlanGreene commented 1 month ago

Package

@carbon/react

Browser

Chrome, Safari, Firefox, Edge

Package version

v1.62.0

React version

v17.0.2, v18.3.1

Description

Slack thread: https://my.slack.com/archives/C2K6RFJ1G/p1721303885253669 @tay1orjones fyi

When using the dark themes (g90, g100), the focus outline on the DataTable's batch actions toolbar uses a dark colour after briefly flashing the expected light colour.

This is due to its use of --cds-layer for the outline colour.

Reproduction/example

https://react.carbondesignsystem.com/?path=/story/components-datatable-batch-actions--default&globals=theme:g90

Steps to reproduce

  1. Load the DataTable batch actions story using one of the dark themes
  2. Select a row in the table
  3. Tab through the batch actions toolbar
  4. Observe the focus outline briefly flashes a light colour, before settling to a dark colour

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

tay1orjones commented 1 month ago

Thanks for opening this, I looked all the way back to the first v11 releases and this issue has been present for all of v11.