Add ability to pass form props to KeywordSearchWidget

Author: valentinogagliardi

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.0.3-0] (beta) - 2023-13-02
+
+## Added
+
+- ability to pass form props to `KeywordSearchWidget`
+
 ## [3.0.2-0] (beta) - 2023-13-02
 
 ## Added

cypress/component/KeywordSearchWidget.cy.tsx

@@ -50,10 +50,15 @@ describe('<KeywordSearchWidget />', () => {
         <KeywordSearchWidget
           categories={categories}
           onKeywordSelection={cy.stub().as('onKeywordSelection')}
+          formProps={{
+            'aria-label': 'Filter by'
+          }}
         />
       </StyledTestWrapper>
     )
 
+    cy.findByLabelText('Filter by')
+
     cy.findByText('Spatial coverage').click()
     cy.findByText(/Global/i).click()
     cy.findByText(/Europe/i)

src/widgets/KeywordSearchWidget.tsx

@@ -25,6 +25,11 @@ export interface KeywordSearchWidgetProps {
    * A custom transformer for the query parameter. Defaults to using encodeURIComponent.
    */
   keywordQueryParamTransformer?: (category: string, keyword: string) => string
+
+  /**
+   * Optional intrinsic props for the wrapper form.
+   */
+  formProps?: JSX.IntrinsicElements['form']
 }
 
 type Selections = Record<string, string[]>
@@ -37,7 +42,8 @@ const KeywordSearchWidget = ({
   categories,
   onKeywordSelection,
   keywordQueryParam = 'kw',
-  keywordQueryParamTransformer
+  keywordQueryParamTransformer,
+  formProps
 }: KeywordSearchWidgetProps) => {
   /**
    * Keep track of the selected keywords. This is used to preserve selections when accordions are closed and subsequently opened.
@@ -99,6 +105,7 @@ const KeywordSearchWidget = ({
         ev.stopPropagation()
         onKeywordSelection?.(getSelectedKeywordsAsQueryParams(selections))
       }}
+      {...formProps}
     >
       {categories.map(cat => {
         const { category } = cat