Skip to content

[Bug]:ArgsTable border visibility is poor in dark and high contrast modes #34691

@prisha-sh

Description

@prisha-sh

Describe the bug

Describe the bug
The border of the ArgsTable component is not clearly visible in dark mode and high contrast settings. This makes it difficult to visually distinguish table boundaries and reduces readability, especially for accessibility-focused users.


To Reproduce

  1. Open Storybook with a component that uses ArgsTable
  2. Enable dark mode or high contrast mode
  3. Navigate to Docs tab
  4. Observe the table borders

Expected behavior
Table borders should be clearly visible and maintain sufficient contrast across all themes, including dark and high contrast modes.


Code snippets
Not required


System

  • Storybook version: latest
  • Framework: React / any
  • Browser: Chrome

Additional context
There are already accessibility-related issues in Storybook, which indicates a need for better visual consistency and contrast handling across UI components.


🔥 Why this works:

  • Specific component (ArgsTable)
  • Clear UI issue
  • Reproducible
  • Accessibility angle = maintainers care

Reproduction link

https://storybook.new

Reproduction steps

No response

System

Environment Info:

  System:
    OS: Linux (Ubuntu 22.04)
    CPU: (8) x64
  Binaries:
    Node: 18.x
    npm: 9.x
  Browsers:
    Chrome: latest
  npmPackages:
    @storybook/react: latest
    @storybook/addon-essentials: latest

Additional context

No response

Metadata

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