storybookjs/storybook

[Bug]: a11y ignoring SVG fill property

Open

#26,965 opened on Apr 26, 2024

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (10,058 forks)batch import
addon: a11ybughelp wantedsev:S3

Repository metrics

Stars
 (89,909 stars)
PR merge metrics
 (Avg merge 7d 22h) (184 merged PRs in 30d)

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

Contributor guide