Open
Description
Describe the bug
Shows an "Incomplete" case for SVG <text/>
element with a valid contrast ratio defined in fill
property
Elements must meet minimum color contrast ratio thresholds
But it's ok if I set style.color
of the same value, although it does not affect the text render.
To Reproduce
Fails contrast test
<svg>
<text fill='#000'>Contrast</text>
</svg>
Passes contrast test
<svg>
<text fill='#000' style={{color: '#000}}>Contrast</text>
</svg>
System
Storybook Environment Info:
System:
OS: macOS 14.2.1
CPU: (8) arm64 Apple M1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
Yarn: 1.22.17 - /opt/homebrew/bin/yarn
npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm <----- active
Browsers:
Chrome: 124.0.6367.92
Edge: 124.0.2478.51
Safari: 17.2.1
npmPackages:
@storybook/addon-a11y: ^8.0.9 => 8.0.9
@storybook/addon-essentials: ^8.0.8 => 8.0.8
@storybook/addon-interactions: ^8.0.8 => 8.0.8
@storybook/addon-links: ^8.0.8 => 8.0.8
@storybook/addon-onboarding: ^8.0.8 => 8.0.8
@storybook/addon-styling-webpack: ^1.0.0 => 1.0.0
@storybook/addon-themes: ^8.0.8 => 8.0.8
@storybook/blocks: ^8.0.8 => 8.0.8
@storybook/nextjs: ^8.0.8 => 8.0.8
@storybook/react: ^8.0.8 => 8.0.8
@storybook/test: ^8.0.8 => 8.0.8
chromatic: ^11.3.0 => 11.3.0
eslint-plugin-storybook: ^0.8.0 => 0.8.0
storybook: ^8.0.8 => 8.0.8
storybook-addon-pseudo-states: ^3.0.1 => 3.0.1
Additional context
No response