@eeacms/volto-eea-design-system 1.15.0 → 1.17.0

package/CHANGELOG.md

@@ -4,6 +4,78 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.17.0](https://github.com/eea/volto-eea-design-system/compare/1.16.0...1.17.0) - 29 August 2023
+
+#### :rocket: New Features
+
+- feat(accordion): improve a11n by providing open close support using space bar on header [David Ichim - [`ac04dbd`](https://github.com/eea/volto-eea-design-system/commit/ac04dbd8fa166a70d535354f6ab631709ee021b3)]
+
+#### :bug: Bug Fixes
+
+- fix(popup): Fix wrong placement of Popper refs #256765 #384 from eea/popper [ichim-david - [`ee69ca2`](https://github.com/eea/volto-eea-design-system/commit/ee69ca299348509f10ecd954ae4415aaef347104)]
+- fix(sharing): button placement and styling [David Ichim - [`15ecefc`](https://github.com/eea/volto-eea-design-system/commit/15ecefcb4e0a2fcc99d585bf0c913ea515b3f676)]
+
+#### :nail_care: Enhancements
+
+- change(accordion): removed listitem role from mobile accordion links [David Ichim - [`8b85dac`](https://github.com/eea/volto-eea-design-system/commit/8b85dac5451b10968275c9ed46a0b4cfc0ccd442)]
+- change(mega-menu): mobile accordions now have aria expanded support [David Ichim - [`e0dbb3f`](https://github.com/eea/volto-eea-design-system/commit/e0dbb3f533c9022308527d2d44d32831f66b389f)]
+
+#### :house: Internal changes
+
+- chore: Remove i18n.js script [Alin Voinea - [`701b82a`](https://github.com/eea/volto-eea-design-system/commit/701b82a67dc97f774c6250d45f159c61b9c7bfec)]
+
+#### :hammer_and_wrench: Others
+
+- i18n: Add en [Alin Voinea - [`4584295`](https://github.com/eea/volto-eea-design-system/commit/458429530d993c27cfb962ddfe2f376f3568bf01)]
+- Release 1.17.0 [Alin Voinea - [`e3c25ee`](https://github.com/eea/volto-eea-design-system/commit/e3c25eeeca5e863244faae396b5aa915d0702633)]
+- test: add unit tests for DS components - refs #254313 [ana-oprea - [`0c4d4d1`](https://github.com/eea/volto-eea-design-system/commit/0c4d4d118b8e13082c576dc5c2dce6a715f49006)]
+- chrore(mega-menu): mobile accordion accessibility enhancements  #385 from eea/accordion-improvements [ichim-david - [`9dd717d`](https://github.com/eea/volto-eea-design-system/commit/9dd717dc4c82a220463da16dba33c9a9d1633c47)]
+- fix popper [Dobricean Ioan Dorian - [`005f2be`](https://github.com/eea/volto-eea-design-system/commit/005f2be705136eebd5f8f4ae4dd5e27d9fbff15d)]
+- fix [Dobricean Ioan Dorian - [`615e67f`](https://github.com/eea/volto-eea-design-system/commit/615e67ff3c9a0fbd6cc7cadbb0c845bf09eec4f0)]
+- remove [Dobricean Ioan Dorian - [`bf3974b`](https://github.com/eea/volto-eea-design-system/commit/bf3974be18225c893fd09814cb2aca9a84ba0ece)]
+- fix popper [Dobricean Ioan Dorian - [`762f199`](https://github.com/eea/volto-eea-design-system/commit/762f199ff5725e7ad1fb788feb4f7b7548d1ee44)]
+- test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`b7eea21`](https://github.com/eea/volto-eea-design-system/commit/b7eea21fd4e71c4f420cd061717166483082dd6e)]
+### [1.16.0](https://github.com/eea/volto-eea-design-system/compare/1.15.0...1.16.0) - 17 August 2023
+
+#### :rocket: New Features
+
+- feat(banner): allow Banner.Action to be a link #254325 #378 from eea/banner_link [ichim-david - [`144f71f`](https://github.com/eea/volto-eea-design-system/commit/144f71fdbf24aec8c35ae7cbb93cd719271a4413)]
+- feat(accordion): eea design filtering support and theme refactoring #379 from eea/accordion-filter [ichim-david - [`7e82454`](https://github.com/eea/volto-eea-design-system/commit/7e82454490777a42bc032646483fee59e7236df4)]
+
+#### :bug: Bug Fixes
+
+- fix: use quanta-toolbar class as trigger #256275 [andreiggr - [`5ede47d`](https://github.com/eea/volto-eea-design-system/commit/5ede47dcc2bd9211ee963c7e881f9ee5663d9d1a)]
+- fix: ensure rule only on quanta-toolbar #256275 [andreiggr - [`4b3e0a4`](https://github.com/eea/volto-eea-design-system/commit/4b3e0a4b6414aac5a9c21686043bc293a194afbd)]
+- fix: teaserGrid controls move only on quanta-toolbar #256275 [andreiggr - [`90c9736`](https://github.com/eea/volto-eea-design-system/commit/90c973679e189587ed3d9afeb5e6a0eb84fa5852)]
+- fix(popup): handle click outside popup area to close the popup [David Ichim - [`a6da52d`](https://github.com/eea/volto-eea-design-system/commit/a6da52d8e03f28fa851b841397e0f896223144b8)]
+- fix(popup): ref error and make sure that all .popup-container .popup get their position fixed [David Ichim - [`4435c1f`](https://github.com/eea/volto-eea-design-system/commit/4435c1fd10f81c9366955567fc1bc6a2c5364ba7)]
+- fix(carousel): lower opacity of arrows when we don't use infinite option [David Ichim - [`b8964c0`](https://github.com/eea/volto-eea-design-system/commit/b8964c0b5637da266c42e3785cfdf3f38babcdae)]
+
+#### :nail_care: Enhancements
+
+- change(accordion): use real icons for active and inactive panel icons #380 from eea/accordion-filtering [ichim-david - [`bb9e20c`](https://github.com/eea/volto-eea-design-system/commit/bb9e20ca9b68890852baae4f7a06c35db6136286)]
+- change(accordion): simplify change of icon for filter icons [David Ichim - [`a1cb797`](https://github.com/eea/volto-eea-design-system/commit/a1cb797929ddda6513dcc7027f32ebad6992ee14)]
+- change(accordion): make use of css variables for text and background colors [David Ichim - [`a6cddd5`](https://github.com/eea/volto-eea-design-system/commit/a6cddd542abb3d1aba3e985107410a60b697744e)]
+- change(site): use css variable values for inputs for easier customization [David Ichim - [`7a085e2`](https://github.com/eea/volto-eea-design-system/commit/7a085e26496420a503ba5c21b3791e66af96c96c)]
+- change(accordion): use the right selector for accordion panels hovering [dana-cfc4 - [`3b041b2`](https://github.com/eea/volto-eea-design-system/commit/3b041b29a4c871a50844f1054c7c39d3a468a7ae)]
+- change(accordion): use a css variable for icon active and inactive [David Ichim - [`a11bf76`](https://github.com/eea/volto-eea-design-system/commit/a11bf76c8ba5d3f58f330a75e673a0eed7c10c7e)]
+- change(popup): use a functional component for popup component using react-popper [David Ichim - [`3fe2629`](https://github.com/eea/volto-eea-design-system/commit/3fe26294162966d3815d74384f5e53071ad80b26)]
+- change(carousel): modified setting of current dot based on parent li slick-active class [David Ichim - [`4ac957e`](https://github.com/eea/volto-eea-design-system/commit/4ac957ed7fcba588f56ba65f9405ad4e39b568b7)]
+
+#### :house: Internal changes
+
+- chore(accordion): Improve accordion filter styling -refs#254324 [dana-cfc4 - [`d3ca98e`](https://github.com/eea/volto-eea-design-system/commit/d3ca98e494a4e0a68880dd87ed0f90967c431d50)]
+- chore: Add filter to accordion story -refs #254324 [dana-cfc4 - [`fdc906a`](https://github.com/eea/volto-eea-design-system/commit/fdc906a2e065e250bda198311e4e3b20b0880169)]
+
+#### :house: Documentation changes
+
+- docs: add links to docusaurus and storybook - refs #253277 [ana-oprea - [`9f7ba84`](https://github.com/eea/volto-eea-design-system/commit/9f7ba848d2e54ea7cd9d9eb92a0171274077e307)]
+- docs: Cleanup Makefile, update DEVELOP documentation, i18n - refs #254894 [valentinab25 - [`df303a5`](https://github.com/eea/volto-eea-design-system/commit/df303a56e90581d6ed554e839343a359727bb166)]
+
+#### :hammer_and_wrench: Others
+
+- bump package release version [David Ichim - [`fff4264`](https://github.com/eea/volto-eea-design-system/commit/fff4264d5a91fbf2fc5fe52fb2cc530c77ea43b1)]
+- Refs #254325; allow setting a Banner.Action to be a link [Tiberiu Ichim - [`18b00bf`](https://github.com/eea/volto-eea-design-system/commit/18b00bf355d8180d7ed4f43810e95fb6cef0e95c)]
 ### [1.15.0](https://github.com/eea/volto-eea-design-system/compare/1.14.0...1.15.0) - 26 July 2023
 
 #### :rocket: New Features

package/DEVELOP.md

@@ -2,6 +2,28 @@
 
 ## Develop
 
+1. Make sure you have `docker` and `docker compose` installed and running on your machine:
+
+    ```Bash
+    git clone https://github.com/eea/volto-eea-design-system.git
+    cd volto-eea-design-system
+    git checkout -b bugfix-123456 develop
+    make
+    make start
+    ```
+
+1. Wait for `Volto started at 0.0.0.0:3000` meesage
+
+1. Go to http://localhost:3000
+
+1.  Happy hacking!
+
+    ```Bash
+    cd src/addons/volto-eea-design-system/
+    ```
+
+### Or add @eeacms/volto-eea-design-system to your Volto project
+
 Before starting make sure your development environment is properly set. See [Volto Developer Documentation](https://docs.voltocms.com/getting-started/install/)
 
 1.  Make sure you have installed `yo`, `@plone/generator-volto` and `mrs-developer`
@@ -49,3 +71,37 @@ Before starting make sure your development environment is properly set. See [Vol
 1.  Happy hacking!
 
         cd src/addons/volto-eea-design-system/
+
+## Cypress
+
+To run cypress locally, first make sure you don't have any Volto/Plone running on ports `8080` and `3000`.
+
+You don't have to be in a `clean-volto-project`, you can be in any Volto Frontend
+project where you added `volto-eea-design-system` to `mrs.developer.json`
+
+Go to:
+
+  ```BASH
+  cd src/addons/volto-eea-design-system/
+  ```
+
+Start:
+
+  ```Bash
+  make
+  make start
+  ```
+
+This will build and start with Docker a clean `Plone backend` and `Volto Frontend` with `volto-eea-design-system` block installed.
+
+Open Cypress Interface:
+
+  ```Bash
+  make cypress-open
+  ```
+
+Or run it:
+
+  ```Bash
+  make cypress-run
+  ```

package/README.md

@@ -27,10 +27,23 @@ This package provides the following features:
 
 ## Getting started
 
+### Try volto-eea-design-system with Docker
+
+      git clone https://github.com/eea/volto-eea-design-system.git
+      cd volto-eea-design-system
+      make
+      make start
+
+Go to http://localhost:3000
+
 ### Add volto-eea-design-system to your Volto project
 
 1. Make sure you have a [Plone backend](https://plone.org/download) up-and-running at http://localhost:8080/Plone
 
+   ```Bash
+   docker compose up backend
+   ```
+
 1. Start Volto frontend
 
 - If you already have a volto project, just update `package.json`:
@@ -76,6 +89,11 @@ Checkout the docs found within the [mockups](https://github.com/eea/volto-eea-de
 
 See [RELEASE.md](https://github.com/eea/volto-eea-design-system/blob/master/RELEASE.md).
 
+## Docusaurus and Storybook
+
+See [Docusaurus](https://eea.github.io/).
+See [Storybook](https://eea.github.io/eea-storybook/).
+
 ## How to contribute
 
 See [DEVELOP.md](https://github.com/eea/volto-eea-design-system/blob/develop/DEVELOP.md).

package/docker-compose.yml

@@ -0,0 +1,32 @@
+version: "3"
+services:
+  backend:
+    image: eeacms/plone-backend
+    ports:
+      - "8080:8080"
+    environment:
+      SITE: "Plone"
+      PROFILES: "eea.kitkat:testing"
+
+  frontend: 
+    build:
+      context: ./
+      dockerfile: ./Dockerfile
+      args:
+        ADDON_NAME: "${ADDON_NAME}"
+        ADDON_PATH: "${ADDON_PATH}"
+        VOLTO_VERSION: ${VOLTO_VERSION:-16}
+    ports:
+    - "3000:3000"
+    - "3001:3001"
+    depends_on:
+      - backend
+    volumes:
+      - ./:/app/src/addons/${ADDON_PATH}
+    environment:
+      CI: "true"
+      NODE_ENV: "development"
+      RAZZLE_JEST_CONFIG: "src/addons/${ADDON_PATH}/jest-addon.config.js"
+      RAZZLE_INTERNAL_API_PATH: "http://backend:8080/Plone"
+      RAZZLE_DEV_PROXY_API_PATH: "http://backend:8080/Plone"
+      HOST: "0.0.0.0"

package/locales/de/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/it/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/ro/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/volto.pot

@@ -0,0 +1,16 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.15.0",
+  "version": "1.17.0",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/helpers/index.js

@@ -1,4 +1,4 @@
-export useClickOutside from './useClickOutside';
-export usePrevious from './usePrevious';
-export useFirstVisited from './useFirstVisited';
-export handleEnterKeyPress from './eventHandlers';
+export { default as useClickOutside } from './useClickOutside';
+export { default as usePrevious } from './usePrevious';
+export { default as useFirstVisited } from './useFirstVisited';
+export { default as handleEnterKeyPress } from './eventHandlers';

package/src/helpers/useClickOutside.test.js

@@ -0,0 +1,63 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import useClickOutside from './useClickOutside';
+import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+
+jest.mock('semantic-ui-react/dist/commonjs/lib', () => ({
+  doesNodeContainClick: jest.fn(),
+}));
+
+describe('useClickOutside', () => {
+  let ref;
+  let callback;
+
+  beforeEach(() => {
+    ref = { current: {} };
+    callback = jest.fn();
+  });
+
+  it('does not call callback function when clicked inside', () => {
+    doesNodeContainClick.mockImplementation(() => true);
+
+    const { rerender } = renderHook(() =>
+      useClickOutside({ targetRefs: [ref], callback }),
+    );
+
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown'));
+    });
+
+    rerender();
+
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it('calls callback function when clicked outside', () => {
+    doesNodeContainClick.mockImplementation(() => false);
+
+    const { rerender } = renderHook(() =>
+      useClickOutside({ targetRefs: [ref], callback }),
+    );
+
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown'));
+    });
+
+    rerender();
+
+    expect(callback).toHaveBeenCalled();
+  });
+
+  it('calls callback function when clicked outside and no refs', () => {
+    doesNodeContainClick.mockImplementation(() => false);
+
+    const { rerender } = renderHook(() => useClickOutside({ callback }));
+
+    act(() => {
+      document.dispatchEvent(new MouseEvent('mousedown'));
+    });
+
+    rerender();
+
+    expect(callback).toHaveBeenCalled();
+  });
+});

package/src/helpers/useFirstVisited.test.js

@@ -0,0 +1,54 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useFirstVisited from './useFirstVisited';
+
+describe('useFirstVisited', () => {
+  let observe;
+  let unobserve;
+  let callback;
+  let disconnect;
+
+  beforeEach(() => {
+    observe = jest.fn();
+    unobserve = jest.fn();
+    disconnect = jest.fn();
+
+    window.IntersectionObserver = jest.fn(function (cb) {
+      this.observe = observe;
+      this.unobserve = unobserve;
+      this.disconnect = disconnect;
+      callback = cb;
+    });
+  });
+  it('should set intersected to true when element is intersecting', async () => {
+    const ref = { current: document.createElement('div') };
+    const { result } = renderHook(() => useFirstVisited(ref));
+    const entry = { isIntersecting: true };
+
+    expect(result.current).toBe(false); // Initial state
+    callback([entry]);
+    expect(result.current).toBe(true);
+  });
+
+  it('should unobserve and disconnect when ref changes or component unmounts', () => {
+    const ref = { current: document.createElement('div') };
+    const newRef = { current: document.createElement('div') };
+    const { unmount, rerender } = renderHook(
+      ({ ref }) => useFirstVisited(ref),
+      {
+        initialProps: { ref },
+      },
+    );
+
+    expect(unobserve).not.toHaveBeenCalled();
+    expect(disconnect).not.toHaveBeenCalled();
+
+    rerender({ ref: newRef });
+    expect(unobserve).toHaveBeenCalled();
+    expect(disconnect).toHaveBeenCalled();
+
+    unmount();
+
+    expect(unobserve).toHaveBeenCalledTimes(2);
+    expect(disconnect).toHaveBeenCalledTimes(2);
+  });
+});

package/src/ui/Accordion/Accordion.stories.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Accordion, Icon, Container } from 'semantic-ui-react';
+import { Accordion, Icon, Container, Input } from 'semantic-ui-react';
 
 export default {
   title: 'Components/Accordion',
@@ -30,11 +30,20 @@ export default {
         type: { summary: 'string' },
       },
     },
+    enable_filtering: {
+      name: 'Enable filtering',
+      defaultValue: false,
+      table: {
+        defaultValue: { summary: false },
+        type: { summary: 'boolean' },
+      },
+    },
   },
 };
 
 function AccordionContainer({ ...args }) {
   const [activeIndex, setActiveIndex] = useState([0]);
+  const [filterValue, setFilterValue] = useState('');
 
   const handleClick = (e, titleProps) => {
     const { index } = titleProps;
@@ -43,33 +52,70 @@ function AccordionContainer({ ...args }) {
     setActiveIndex(newIndex);
   };
 
+  const handleFilteredValueChange = (value) => {
+    setFilterValue(value);
+  };
+
   return (
     <Container>
       <div className="accordion-block">
-        {args.panels.map((panel, index) => {
-          return (
-            <Accordion className={args.variant} key={index}>
-              <Accordion.Title
-                index={index}
-                tabIndex={0}
-                active={activeIndex === index}
-                onClick={handleClick}
-                as={args.title_size === 'no value' ? '' : args.title_size}
-                onKeyDown={(e) => {
-                  if (e.nativeEvent.keyCode === 13) {
-                    handleClick(e, { index });
-                  }
-                }}
-              >
-                <span>{panel.title}</span>
-                <Icon className="ri-arrow-down-s-line" />
-              </Accordion.Title>
-              <Accordion.Content active={activeIndex === index}>
-                {panel.content}
-              </Accordion.Content>
-            </Accordion>
-          );
-        })}
+        {args.enable_filtering && (
+          <Accordion className={args.variant}>
+            <Accordion.Title className={'filter'}>
+              <Input
+                fluid
+                className="input-accordion-title"
+                transparent
+                placeholder="Type to filter..."
+                value={filterValue}
+                onChange={(e) => handleFilteredValueChange(e.target.value)}
+              />
+              <Icon
+                className={filterValue ? 'ri-close-line' : 'ri-filter-3-line'}
+                onClick={() => handleFilteredValueChange('')}
+              />
+            </Accordion.Title>
+          </Accordion>
+        )}
+        {args.panels
+          .filter(
+            (panel) =>
+              !args.enable_filtering ||
+              filterValue === '' ||
+              (filterValue !== '' &&
+                panel.title?.toLowerCase().includes(filterValue.toLowerCase())),
+          )
+          .map((panel, index) => {
+            const active = activeIndex === index;
+            return (
+              <Accordion className={args.variant} key={index}>
+                <Accordion.Title
+                  index={index}
+                  tabIndex={0}
+                  active={active}
+                  role="button"
+                  aria-expanded={activeIndex === index}
+                  onClick={handleClick}
+                  as={args.title_size === 'no value' ? '' : args.title_size}
+                  onKeyDown={(e) => {
+                    if (e.keyCode === 13 || e.keyCode === 32) {
+                      handleClick(e, { index });
+                    }
+                  }}
+                >
+                  <span>{panel.title}</span>
+                  <Icon
+                    className={
+                      active ? 'ri-arrow-down-s-line' : 'ri-arrow-up-s-line'
+                    }
+                  />
+                </Accordion.Title>
+                <Accordion.Content active={active}>
+                  {panel.content}
+                </Accordion.Content>
+              </Accordion>
+            );
+          })}
       </div>
     </Container>
   );
@@ -80,6 +126,7 @@ export const Default = Template.bind({});
 Default.args = {
   variant: 'secondary',
   title_size: 'no value',
+  enable_filtering: false,
   panels: [
     {
       title: 'Water and marine environment',

package/src/ui/Accordion/Accordion.stories.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { Default } from './Accordion.stories';
+import '@testing-library/jest-dom/extend-expect';
+
+describe('Default component', () => {
+  it('renders correctly and fires keyDown Enter events', () => {
+    const { getByText, getAllByText } = render(<Default {...Default.args} />);
+
+    Default.args.panels.forEach((panel) => {
+      expect(getByText(panel.title)).toBeInTheDocument();
+    });
+
+    expect(getAllByText(Default.args.panels[0].content)).toHaveLength(3);
+    fireEvent.keyDown(getByText(Default.args.panels[0].title), {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      charCode: 13,
+    });
+
+    fireEvent.keyDown(getByText(Default.args.panels[0].title), {
+      key: 'Enter',
+      code: 'Enter',
+      keyCode: 13,
+      charCode: 13,
+    });
+  });
+
+  it('renders correctly and fires keyDown A event', () => {
+    const { getByText, getAllByText } = render(
+      <Default {...Default.args} title_size={'h1'} />,
+    );
+
+    Default.args.panels.forEach((panel) => {
+      expect(getByText(panel.title)).toBeInTheDocument();
+    });
+
+    expect(getAllByText(Default.args.panels[0].content)).toHaveLength(3);
+    fireEvent.keyDown(getByText(Default.args.panels[0].title), {
+      key: 'A',
+      code: 'KeyA',
+    });
+  });
+});

package/src/ui/Banner/Banner.jsx

@@ -67,12 +67,19 @@ function Banner({ image, metadata, properties, children, ...rest }) {
 }
 
 Banner.Action = React.forwardRef(function (
-  { id, title, titleClass, icon, onClick, className, color },
+  { id, title, titleClass, icon, onClick, className, color, ...rest },
   ref,
 ) {
   return (
     <div className="action" ref={ref}>
-      <Button className={className} basic icon inverted onClick={onClick}>
+      <Button
+        className={className}
+        basic
+        icon
+        inverted
+        onClick={onClick}
+        {...rest}
+      >
         <Icon className={icon} color={color}></Icon>
         <span className={titleClass || 'mobile hidden'}>{title}</span>
       </Button>