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

Question

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

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

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

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

Answer 1

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

话虽如此，您始终可以将边框的颜色设置为“透明”，使其不可见，这将保持组件的可访问性标准，但边框本身不会在 UI 上显示。

我在您的代码片段上尝试了以下主题，它似乎按预期完成了这个技巧：

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