不要在索环中的手风琴下方显示边框

Question

我正在为我的网络应用程序使用 grommet 库。我想知道如何避免在 FormFields 和其他控件（例如 Accordions）下方显示边框。

我创建了一个沙箱来演示问题并允许测试任何建议。

https://codesandbox.io/s/grommet-accordion-issue-v7u5y?file=/index.js

我已经将 Accordion 主题值设置为隐藏边框，但我仍然看到并且在 FormField 上看不到这样的设置。

Answer 1

由于 Accordion 和 FormField 都被认为是可以通过键盘访问的交互式元素，因此在关注该元素时需要底部边框作为可访问性指示（焦点指示是您在使用 Tab 键盘时看到的绿色边框）在用户界面之间或元素具有焦点时导航）。

也就是说，您始终可以将边框的颜色设置为 'transparent'，这样它就不会可见，这将保持组件的可访问性标准，但边框本身不会是可见的在 UI.

我在您的代码片段中尝试了以下主题，它似乎达到了预期的效果：

const theme = deepMerge(grommet, {
  accordion: {
    panel: {
      border: {
        color: "transparent"
      }
    },
    border: {
      color: "transparent"
    }
  },
  formField: {
    border: {
      color: "transparent"
    }
  }
});

不要在索环中的手风琴下方显示边框

Don't show border below accordion in grommet

reactjs

grommet