diff --git a/src/lib/forms/AccordionField.js b/src/lib/forms/AccordionField.js
index a32e9f73..887eb1ef 100644
--- a/src/lib/forms/AccordionField.js
+++ b/src/lib/forms/AccordionField.js
@@ -5,10 +5,10 @@
// React-Invenio-Forms is free software; you can redistribute it and/or modify it
// under the terms of the MIT License; see LICENSE file for more details.
-import React, { Component } from "react";
+import React, { Component, useState } from "react";
import PropTypes from "prop-types";
import { Field, FastField } from "formik";
-import { Accordion, Container } from "semantic-ui-react";
+import { Accordion, Container, Icon } from "semantic-ui-react";
import _omit from "lodash/omit";
import _get from "lodash/get";
@@ -44,7 +44,6 @@ export class AccordionField extends Component {
key: `panel-${label}`,
title: {
content: label,
- icon: "angle right",
},
content: {
content: {children},
@@ -53,15 +52,40 @@ export class AccordionField extends Component {
];
const errorClass = hasError ? "error secondary" : "";
+ const [activeIndex, setActiveIndex] = useState(0);
+
+ const handleTitleClick = (e, { index }) => {
+ setActiveIndex(activeIndex === index ? -1 : index);
+ };
return (
+ >
+ {panels.map((panel, index) => (
+
+ {
+ if (e.key === "Enter" || e.key === " ") {
+ handleTitleClick(e, { index });
+ }
+ }}
+ tabIndex={0}
+ >
+ {panel.title.content}
+
+
+
+ {panel.content.content}
+
+
+ ))}
+
);
};