feat: remove warnings, accessibility

src/app/layout.tsx

@@ -27,9 +27,6 @@ export const metadata: Metadata = {
     apple: { url: '/favicon/apple-touch-icon.png', sizes: '180x180' },
   },
   manifest: '/favicon/site.webmanifest',
-  appleWebApp: {
-    title: 'HungerMap',
-  },
 };
 
 export const viewport: Viewport = {

src/components/Accordions/AccordionBoxItems.tsx

@@ -72,7 +72,12 @@ export default function AccordionBoxItems({
                   <Popover>
                     <PopoverTrigger>
                       {item.infoIcon && (
-                        <Button isIconOnly className="w-[37px] h-[37px] p-[5.5px]" variant="light">
+                        <Button
+                          aria-label="More info"
+                          isIconOnly
+                          className="w-[37px] h-[37px] p-[5.5px]"
+                          variant="light"
+                        >
                           {item.infoIcon}
                         </Button>
                         //   <div

src/components/Charts/LineChart.tsx

@@ -3,6 +3,7 @@
 import { Button } from '@nextui-org/button';
 import { useDisclosure } from '@nextui-org/modal';
 import Highcharts from 'highcharts';
+import highchartsAccessibility from 'highcharts/modules/accessibility';
 import HighchartsReact from 'highcharts-react-official';
 import { Maximize4 } from 'iconsax-react';
 import { useTheme } from 'next-themes';
@@ -18,6 +19,8 @@ import { LineChartData } from '@/domain/entities/charts/LineChartData';
 import LineChartProps from '@/domain/props/LineChartProps';
 import LineChartOperations from '@/operations/charts/LineChartOperations';
 
+highchartsAccessibility(Highcharts);
+
 /**
  * The LineChart component is a box that primarily renders a title, description text, and a line chart.
  * This component has a width of 100%, so it adjusts to the width of its parent element in which it is used.

src/components/Charts/LineChartModal.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@nextui-org/button';
 import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@nextui-org/modal';
 import Highcharts from 'highcharts';
+import highchartsAccessibility from 'highcharts/modules/accessibility';
 import HighchartsReact from 'highcharts-react-official';
 import { Minus } from 'iconsax-react';
 import { useRef } from 'react';
@@ -12,6 +13,8 @@ import LineChartXAxisSlider from '@/components/Charts/helpers/LineChartXAxisSlid
 import { Tooltip } from '@/components/Tooltip/Tooltip';
 import LineChartModalProps from '@/domain/props/LineChartModalProps';
 
+highchartsAccessibility(Highcharts);
+
 /**
  * This component is tied to the `LineChart` component and should not be used independently.
  * It renders the modal, which can be opened by the user from the `LineChart` to display the chart

src/components/Chatbot/Chatbot.tsx

@@ -195,6 +195,7 @@ export default function HungerMapChatbot() {
       {!isOpen && (
         <Tooltip text={TRIGGER_CHAT}>
           <Button
+            aria-label="Open Chatbot"
             onClick={toggleChat}
             className="
             relative flex items-center justify-center min-w-12 h-12 px-1 rounded-full bg-content1 hover:bg-content2 shadow-md"

src/components/Legend/LegendContainer.tsx

@@ -42,6 +42,7 @@ export default function LegendContainer({ items, loading = false }: LegendContai
         <Tooltip text={items.length > 1 ? 'Legends Information' : 'Legend Information'}>
           <Button
             onClick={() => setInfoPopup(true)}
+            aria-label="Map legend"
             className="
         relative flex items-center justify-center min-w-10 h-10 px-1 rounded-full bg-content1 shadow-md"
           >

src/components/Map/Alerts/CountryAlerts/PulsingAlertMarker.tsx

@@ -18,5 +18,5 @@ export function PulsingAlertMarker({ countryAlert }: { countryAlert: CountryAler
       }),
     [countryAlert]
   );
-  return <Marker interactive={false} position={countryAlert.position} icon={icon} />;
+  return <Marker title="Country alert" interactive={false} position={countryAlert.position} icon={icon} />;
 }

src/components/Map/Alerts/HazardMarker.tsx

@@ -19,7 +19,7 @@ export function HazardMarker({ hazard }: { hazard: Hazard }) {
     [hazard]
   );
   return (
-    <Marker position={[hazard.latitude, hazard.longitude]} icon={icon}>
+    <Marker position={[hazard.latitude, hazard.longitude]} icon={icon} title="Hazard alert">
       <Popup className="hazardMarkerPopup">
         <div className="flex gap-4 items-center">
           <img

src/components/Map/Map.tsx

@@ -188,9 +188,6 @@ export default function Map({ countries, disputedAreas, fcsData, alertData }: Ma
           style={disputedAreaStyle}
         />
       </Pane>
-
-      <ZoomControl threshold={5} callback={onZoomThresholdReached} />
-      <BackToGlobalButton />
     </MapContainer>
   );
 }

src/components/Map/ZoomControl.tsx

@@ -36,6 +36,7 @@ export default function ZoomControl({ threshold, callback }: ZoomControlProps) {
     <div className="absolute right-4 bottom-7 z-9999 flex flex-col shadow-lg">
       <Button
         isDisabled={zoomLevel === MAP_MAX_ZOOM}
+        aria-label="Zoom in"
         size="sm"
         onClick={() => map.zoomIn()}
         color="default"
@@ -45,6 +46,7 @@ export default function ZoomControl({ threshold, callback }: ZoomControlProps) {
       </Button>
       <Button
         isDisabled={zoomLevel === MAP_MIN_ZOOM}
+        aria-label="Zoom out"
         size="sm"
         onClick={() => map.zoomOut()}
         className="rounded-b-md px-2 min-w-0 rounded-t-none z-9999 bg-content1 hover:bg-content2"