Skip to content

[Bug]: a11y ignoring SVG fill property #26965

Open
@levchenkod

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

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions