[material-ui][Button] Provide an accessible focus alternative when disableRipple prop is set

q43xntqr 于 6个月前发布在其他

关注(0)|答案(4)|浏览(65)

当你在 theme.components 上使用 disableRipple: true 属性时，例如：

MuiButtonBase: {
      defaultProps: {
        disableRipple: true,
      },
    },

那么所有依赖于 Mui-focusVisible 类的涟漪样式组件都变得无法访问。当你用键盘聚焦它们时，什么都不会发生，你无法知道它们是否被聚焦。
| Ripple | Disabled Ripple |
| ------------ | ------------ |
|

|

|

需要有一种某种回退方案。我在我的应用中这样做了，并且一段时间内一直困惑不解，为什么什么都不起作用，包括：

我在我的应用中所做的是一个全局样式到：

.Mui-focusVisible: {
outline: 2px solid #000
}

应该有一些回退方案。

我不了解MUI的内部，应该有更多知识的人提出一个解决方案。我对我的应用提出的解决方案是我在 "What are our options? 💡" 部分中写的内容。

4条答案

抱歉，这个问题有些枯燥。但是，为什么要禁用标准的涟漪效果，而不是根据我们的需求自定义它呢？

这里有一个简单的例子：

$x_{1}e^{0}f_{1}x$

对不起，这个问题可能有些枯燥，但是为什么我们要禁用标准的涟漪效果，而不是根据我们的需要定制它呢？

@kachar 涟漪控制了点击涟漪和焦点涟漪。通常情况下，我们不希望有点击涟漪，但是这样做会使使用焦点涟漪的所有内容都无法访问。

看起来，它似乎在Button Base的API中有说明：https://mui.com/material-ui/api/button-base/#props。

如您所见，这是一个预期的且已记录的行为。如果您禁用了波纹效果，那么您必须为焦点状态提供自己的样式。
在v5中，我们对此无能为力，因为这可能会破坏依赖于此的用户，但我们将在v6中进行更改(通过用不同的背景阴影替换焦点波纹效果)。