ui: added toggle and keyboard focus for accordion

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";
 
@@ -39,29 +39,55 @@ export class AccordionField extends Component {
     const hasError = status
       ? this.hasError(status)
       : this.hasError(errors) || this.hasError(initialErrors, initialValues, values);
-    const panels = [
-      {
-        key: `panel-${label}`,
-        title: {
-          content: label,
-          icon: "angle right",
+      const panels = [
+        {
+          key: `panel-${label}`,
+          title: {
+            content: label,
+          },
+          content: {
+            content: <Container>{children}</Container>,
+          },
         },
-        content: {
-          content: <Container>{children}</Container>,
-        },
-      },
-    ];
+      ]; 
 
     const errorClass = hasError ? "error secondary" : "";
+    const [activeIndex, setActiveIndex] = useState(0);
 
+    const handleTitleClick = (e, { index }) => {
+      setActiveIndex(activeIndex === index ? -1 : index);
+    };
+
     return (
       <Accordion
-        defaultActiveIndex={active ? 0 : null}
-        panels={panels}
         inverted
         className={`invenio-accordion-field ${errorClass}`}
         {...uiProps}
-      />
+      >
+        {panels.map((panel, index) => (
+          <React.Fragment key={panel.key}>
+            <Accordion.Title
+              active={activeIndex === index}
+              index={index}
+              onClick={handleTitleClick}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  handleTitleClick(e, { index });
+                }
+              }}
+              tabIndex={0}
+            >
+              {panel.title.content}
+              <Icon name={'angle right'} />
+            </Accordion.Title>
+            <Accordion.Content 
+              active={activeIndex === index}
+            >
+              {panel.content.content}
+            </Accordion.Content>
+          </React.Fragment>
+        ))}
+      </Accordion>
     );
   };