Improve mobile filters menu

frontend/src/components/Header/BurgerMenu/__tests__/__snapshots__/BurgerMenu.test.tsx.snap

@@ -277,6 +277,7 @@ Object {
                 class="bm-cross"
                 fill="none"
                 height="24"
+                style="width: 100%; height: 100%;"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -567,6 +568,7 @@ Object {
               class="bm-cross"
               fill="none"
               height="24"
+              style="width: 100%; height: 100%;"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -982,6 +984,7 @@ Object {
                 class="bm-cross"
                 fill="none"
                 height="24"
+                style="width: 100%; height: 100%;"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -1340,6 +1343,7 @@ Object {
               class="bm-cross"
               fill="none"
               height="24"
+              style="width: 100%; height: 100%;"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"

frontend/src/components/Icons/Bin/index.tsx

@@ -1,21 +1,14 @@
-import React from 'react';
 import { GenericIconProps } from '../types';
 
-export const Bin: React.FC<GenericIconProps> = ({
-  color = 'currentColor',
-  opacity,
-  className,
-  size,
-}) => {
+export const Bin: React.FC<GenericIconProps> = ({ color = 'currentColor', size, ...props }) => {
   return (
     <svg
       width={size}
       height={size}
       viewBox="0 0 16 16"
-      className={className}
-      opacity={opacity}
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <path
         d="M2 4.00033H3.33333H14"

frontend/src/components/Icons/Cross/index.tsx

@@ -1,21 +1,14 @@
-import React from 'react';
 import { GenericIconProps } from '../types';
 
-export const Cross: React.FC<GenericIconProps> = ({
-  color = 'currentColor',
-  opacity,
-  className,
-  size,
-}) => {
+export const Cross: React.FC<GenericIconProps> = ({ color = 'currentColor', size, ...props }) => {
   return (
     <svg
       width={size}
       height={size}
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      opacity={opacity}
+      {...props}
     >
       <path
         fillRule="evenodd"

frontend/src/components/MobileFilterMenu/CloseButton/index.tsx

@@ -2,12 +2,14 @@ interface Props {
   onClick: () => void;
   icon: React.ReactNode;
   className?: string;
+  children?: React.ReactNode;
 }
 
-export const CloseButton: React.FC<Props> = ({ icon, ...props }) => {
+export const CloseButton: React.FC<Props> = ({ icon, children, ...props }) => {
   return (
     <button type="button" {...props}>
       {icon}
+      {children}
     </button>
   );
 };

frontend/src/components/MobileFilterMenu/MobileFilterMenu.tsx

@@ -1,5 +1,4 @@
 import MobileBottomClear from 'components/pages/search/components/FilterBar/MobileBottomClear';
-import React from 'react';
 // @ts-expect-error Not official but useful to reduce bundle size
 import Slide from 'react-burger-menu/lib/menus/slide';
 
@@ -44,21 +43,29 @@ export const MobileFilterMenu: React.FC<Props> = ({
      * the content and imperatively closes the drawer.
      */
     <Slide
-      isOpen={true}
+      isOpen
       onClose={handleClose}
       right
       customBurgerIcon={false}
       customCrossIcon={false}
       burgerBarClassName="bg-white"
       menuClassName="bg-white p-4"
-      width={'80vw'}
+      width="80vw"
     >
-      <div className="relative text-center w-full pb-4 font-bold border-b border-solid border-greySoft outline-none">
-        <CloseButton onClick={handleClose} className="absolute left-0" icon={<Cross size={24} />} />
+      <div className="flex flex-col relative text-center w-full pb-4 font-bold border-b border-solid border-greySoft outline-none">
+        <CloseButton
+          onClick={handleClose}
+          className="absolute left-0"
+          icon={<Cross size={24} aria-hidden />}
+        >
+          <span className="sr-only">
+            <FormattedMessage id={'search.closeFilters'} />
+          </span>
+        </CloseButton>
         <span>{title}</span>
       </div>
 
-      <div>
+      <div className="pb-20">
         {filtersList.map(item => {
           if (treksCount === 0 && item.id === PRACTICE_ID) return null;
           if (touristicContentsCount === 0 && item.id === CATEGORY_ID) return null;

frontend/src/components/MobileFilterMenu/MobileFilterMenuSection/index.tsx

@@ -1,5 +1,4 @@
 import { ChevronDown } from 'components/Icons/ChevronDown';
-import React from 'react';
 
 export interface Props {
   title: string | React.ReactElement;
@@ -19,22 +18,28 @@ export const MobileFilterMenuSection: React.FC<Props> = ({
   }`;
 
   return (
-    <div
+    <button
       onClick={onClick}
-      className="pt-4 pb-4 outline-none border-b border-solid border-greySoft flex items-center"
+      className="pt-4 pb-4 outline-none border-b border-solid border-greySoft flex items-center w-full text-left"
+      type="button"
     >
       {numberSelected > 0 && (
-        <div
-          className="bg-primary1 text-white rounded-full h-6 w-6 flex items-center justify-center font-bold mr-2"
+        <span
+          className="bg-primary1 text-white text-center rounded-full size-6 font-bold mr-2"
           style={{ backgroundColor: color }}
         >
           {numberSelected}
-        </div>
+        </span>
       )}
-      <div className={classNameSectionName} style={{ color }}>
+      <span className={classNameSectionName} style={{ color }}>
         {title}
-      </div>
-      <ChevronDown className={`-rotate-90 text-primary1`} size={24} color={color} />
-    </div>
+      </span>
+      <ChevronDown
+        className="-rotate-90 text-primary1 ml-auto"
+        size={24}
+        color={color}
+        aria-hidden
+      />
+    </button>
   );
 };

frontend/src/components/pages/search/components/FilterBar/MobileBottomClear.tsx

@@ -1,8 +1,5 @@
-import { Bin } from 'components/Icons/Bin';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import styled from 'styled-components';
-import { colorPalette } from 'stylesheet';
+import { Bin } from 'components/Icons/Bin';
 
 interface Props {
   resultsNumber: number;
@@ -11,35 +8,21 @@ interface Props {
 
 const MobileBottomClear: React.FC<Props> = ({ resultsNumber, resetFilter }) => {
   return (
-    <BottomContainer className="shadow-lg bg-white">
-      <div
+    <div className="flex w-[80vw] h-8 items-center fixed shadow-lg bg-white right-0 bottom-0">
+      <button
+        type="button"
         onClick={resetFilter}
-        className="text-primary1 font-bold text-P2 cursor-pointer flex items-center w-1/2 justify-center"
+        className="text-primary1 font-bold text-P2 flex items-center w-1/2 justify-center"
       >
-        <Bin size={12} className="mr-2" />
+        <Bin size={12} className="mr-2" aria-hidden />
         <FormattedMessage id={'search.filters.clearAll'} />
-      </div>
+      </button>
 
-      <ClearContainer className="w-1/2">
+      <div className="w-1/2 border-l border-solid border-greySoft text-center ">
         <FormattedMessage values={{ count: resultsNumber }} id="search.resultsFoundShort" />
-      </ClearContainer>
-    </BottomContainer>
+      </div>
+    </div>
   );
 };
 
-const BottomContainer = styled.div`
-  display: flex !important;
-  align-items: center;
-  position: fixed;
-  width: 80vw;
-  height: 32px;
-  bottom: 0;
-  right: 0;
-`;
-
-const ClearContainer = styled.div`
-  border-left: 1px solid ${colorPalette.greySoft.DEFAULT};
-  text-align: center;
-`;
-
 export default MobileBottomClear;

frontend/src/translations/ca.json

@@ -45,6 +45,7 @@
     "forThe": "Per a",
     "seeMap": "mostra el mapa",
     "filter": "Filtrar",
+    "closeFilters": "Tanca els filtres",
     "reload": "Tornar a carregar",
     "anErrorOccured": "S’ha produït un error",
     "filters": {

frontend/src/translations/de.json

@@ -45,6 +45,7 @@
     "forThe": "Für das",
     "seeMap": "Siehe die Karte",
     "filter": "Filter",
+    "closeFilters": "Filter schließen",
     "reload": "Neuladen",
     "anErrorOccured": "Ein Fehler ist aufgetreten",
     "filters": {

frontend/src/translations/en.json

@@ -48,6 +48,7 @@
     "forThe": "For the",
     "seeMap": "Display Map",
     "filter": "Filter",
+    "closeFilters": "Close filters",
     "reload": "Reload",
     "anErrorOccured": "An error occured",
     "filters": {

frontend/src/translations/es.json

@@ -45,6 +45,7 @@
     "forThe": "Para",
     "seeMap": "mostrar el mapa",
     "filter": "Filtrar",
+    "closeFilters": "Cerrar filtros",
     "reload": "Volver a cargar",
     "anErrorOccured": "Se ha producido un error",
     "filters": {

frontend/src/translations/fr.json

@@ -48,6 +48,7 @@
     "forThe": "Pour le",
     "seeMap": "Voir la carte",
     "filter": "Filtrer",
+    "closeFilters": "Fermer les filtres",
     "reload": "Recharger",
     "anErrorOccured": "Une erreur est survenue",
     "filters": {

frontend/src/translations/it.json

@@ -48,6 +48,7 @@
     "forThe": "Per il",
     "seeMap": "Vedere la mappa",
     "filter": "Filtro",
+    "closeFilters": "Chiudere i filtri",
     "reload": "Ricaricare",
     "anErrorOccured": "C'è stato un errore",
     "filters": {