将按钮渲染为 div 以避免继承按钮样式

Question

我们在我们的网站中嵌入了 React 组件。有一些适用于我们的按钮的基本样式，它们来自用户代理（例如焦点轮廓）和我们嵌入 React 组件的 HTML/CSS 环境。我们希望我们的 React 组件风格独立。由于我们也在小部件中使用我们的组件，因此我们无法真正控制外部环境。一种解决方案是渲染我们的基本 Button 元素，<div role="button" ...而不是实际的按钮元素。是否有任何理由避免这种做法，例如浏览器支持、功能等？

Answer 1

不要这样做。不。这是可访问性地狱。<button>是互动的。<div>不是。这是最糟糕的做法。

正如您所评论的，焦点也不可用在 a 上<div role="button" ...>，它很好地融入了<button>.

Answer 2

尝试使用这个（您可以将其添加到您的reset.css）：

    *:focus { outline-width: 0px !important; }

这应该完全消除任何可见的轮廓，无论元素的类名称如何（或者如果它没有类名称）。

如果在某个时候您需要返回大纲，您可以将其直接添加到您的自定义类中。