Unable unset focus outline

[MichailShcherbakov]

Environment

• Operating System: Linux
• Node Version: v22.13.1
• Nuxt Version: 3.16.1
• CLI Version: 3.23.1
• Nitro Version: 2.11.8
• Package Manager: yarn@4.8.1
• Builder: -
• User Config: compatibilityDate, imports, components, devtools, modules, css, fonts, ui
• Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/fonts@0.11.0, @nuxt/image@1.10.0, @nuxt/test-utils@3.17.2, @nuxt/ui@3.0.2
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.0.2

Reproduction

https://github.com/nuxt/ui/blob/v3/src/theme/button.ts

Description

Some button variants have focus:outline-none by default, so it's impossible to unset it. It's reduces accessibility

Additional context

No response

Logs

[benjamincanac]

Yes this is intended. How is this reducing accessibility, would you mind elaborating?

[MichailShcherbakov]

@benjamincanac for example, you can navigate to a solid button and you will see an outline, but when you navigate to a soft button you will not see any visual changes. The soft button just does not have any visual difference when it has focus-visibility.

The solid button:

The soft button:

About accessibility

[benjamincanac]

It does actually, the background changes 🤔