[Bug]: Visual focus indicators (VFIs) aren't visible in high contrast mode

[amarhefka-artech]

Describe the bug

Several of the elements in the Storybook UI use a CSS box-shadow to render their focus state (the state that's shown when you tab to the item with a keyboard). These box-shadows do not appear in High Contrast Mode—or what are called "Contrast themes" in modern Windows system settings—so there's no way for a keyboard user to tell when they receive focus.

To Reproduce

Windows 11 / Chrome

1. Navigate through the interactive elements in the Storybook UI using a keyboard; press the tab key and confirm there's a visible focus indicator for each element that receives focus.
2. Enable a "Contrast theme" in Windows settings.
3. Repeat step 1. Do the VFIs consistently appear, or are some of them missing?

System

No response

Additional context

No response

[onyxolu]

New to storybook, will pick this up as my first issue. Details looks clear and straightforward

[Tomsxmart]

Removing outline on focused elements might not be the best idea for focus states since when windows high contrast mode is on browsers will override CSS properties and ignore box-shadows

A potential fix would be adding the following CSS properties on focus

// button styles
outline-color: transparent;
outline-width: 1px;
outline-style: solid;

This would insure highlighting on high contrast across browsers. I'm unable to do the PR since storybook does not support windows development (WSL did not work either).

[StefanFeser]

When testing our Storybook (v.8.0.6) in High Contrast mode (force-colors: active) it also seems like some controls in the args could need some style improvements. Mainly the textareas, switch toggles & selects:

[kawaljen]

Hello can i work on this one ?