不要在扣眼中的手风琴下方显示边框

问题描述

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

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

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

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

解决方法

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

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

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

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