0

I am using grommet library for my web app. I want to know how can I avoid showing borders below FormFields and other controls such as Accordions.

I have created a sandbox that demonstrates the problem and allows for testing any recommendations.

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

I have set the Accordion theme value to hide the border but I still see and I see no such setting on a FormField.

Varun Gupta
  • 2,870
  • 6
  • 33
  • 73

1 Answers1

2

Since both Accordion and FormField are considered interactive elements that should be accessible via keyboard, the bottom border is needed for accessibility indication when focusing on the element (focus indication is the green border you see as you use the Tab keyboard through navigating between the user interface or when the element has focus).

That being said, you can always set the color of the border to 'transparent' so it won't be visible, this will maintain the accessibility standards of the components yet the border itself wouldn't be visual on the UI.

I tried the following theme on your code snippet and it seems to do the trick as expected:

const theme = deepMerge(grommet, {
  accordion: {
    panel: {
      border: {
        color: "transparent"
      }
    },
    border: {
      color: "transparent"
    }
  },
  formField: {
    border: {
      color: "transparent"
    }
  }
});
Shimi
  • 1,178
  • 8
  • 18