Improve semantics/a11y to MobileFiltersMenu

GeotrekCE · May 17, 2024 · 444175f · 444175f
1 parent b637070
commit 444175f
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 43 deletions.
diff --git a/frontend/src/components/MobileFilterMenu/MobileFilterMenu.tsx b/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;

diff --git a/frontend/src/components/MobileFilterMenu/MobileFilterMenuSection/index.tsx b/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>
   );
 };
diff --git a/frontend/src/components/pages/search/components/FilterBar/MobileBottomClear.tsx b/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;
diff --git a/frontend/src/translations/ca.json b/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": {

diff --git a/frontend/src/translations/de.json b/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": {

diff --git a/frontend/src/translations/en.json b/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": {

diff --git a/frontend/src/translations/es.json b/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": {

diff --git a/frontend/src/translations/fr.json b/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": {

diff --git a/frontend/src/translations/it.json b/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": {