Я использую библиотеку grommet для своего веб-приложения. Я хочу знать, как избежать отображения границ под FormFields и другими элементами управления, такими как Accordions.
Я создал песочницу, которая демонстрирует проблему и позволяет протестировать любые рекомендации.
https://codesandbox.io/s/grommet-accordion-issue-v7u5y?file=/index.js
Я установил значение темы Accordion, чтобы скрыть границу, но я все еще вижу и не вижу такой настройки в FormField.
Поскольку и Accordion, и FormField считаются интерактивными элементами, которые должны быть доступны с клавиатуры, нижняя граница необходима для индикации доступности при фокусировании на элементе (индикатор фокуса — это зеленая рамка, которую вы видите при использовании клавиатуры Tab при переходе между пользовательским интерфейсом). или когда элемент имеет фокус).
При этом вы всегда можете установить цвет границы на «прозрачный», чтобы она не была видна, это сохранит стандарты доступности компонентов, но сама граница не будет видна в пользовательском интерфейсе.
Я попробовал следующую тему в вашем фрагменте кода, и, похоже, он делает свое дело, как и ожидалось:
const theme = deepMerge(grommet, {
accordion: {
panel: {
border: {
color: "transparent"
}
},
border: {
color: "transparent"
}
},
formField: {
border: {
color: "transparent"
}
}
});
