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

Question

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

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

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

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

Answer 1

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

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

我在您的代码 sn-p 上尝试了以下主题，它似乎按预期完成了任务：

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