Front(fix) texts and performance

app/components/forms/select/toggle/component.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
-import cx from 'classnames';
 
-import ARROW_DOWN_SVG from 'svgs/ui/arrow-down.svg?sprite';
-import Icon from 'components/icon';
+import cx from 'classnames';
 
 import THEME from 'components/forms/select/constants/theme';
-
 import { SelectToggleProps } from 'components/forms/select/types';
+import Icon from 'components/icon';
+
+import ARROW_DOWN_SVG from 'svgs/ui/arrow-down.svg?sprite';
 
 export const SelectToggle: React.FC<SelectToggleProps> = ({
   options,
@@ -25,7 +25,7 @@ export const SelectToggle: React.FC<SelectToggleProps> = ({
     return options.filter((o) => !o.disabled && o.enabled);
   }, [options]);
 
-  const labelDefaultFormatter:() => string = useCallback(() => {
+  const labelDefaultFormatter: () => string = useCallback(() => {
     if (!selectedItems.length) return placeholder;
     if (selectedItems.length === 1) return selectedItems[0].label;
     if (selectedItems.length === getEnabledOptions.length) return 'All items selected';
@@ -34,6 +34,7 @@ export const SelectToggle: React.FC<SelectToggleProps> = ({
 
   return (
     <button
+      aria-label="select"
       type="button"
       disabled={disabled}
       className={cx({

app/components/info-button/component.tsx

@@ -45,6 +45,7 @@ export const InfoButton: React.FC<InfoButtonProps> = ({
     )}
   >
     <button
+      aria-label="info-button"
       className={cx({
         'flex flex-shrink-0 items-center justify-center w-5 h-5 transition rounded-full bg-opacity-50 focus:outline-none hover:bg-opacity-75 focus:bg-opacity-90': true,
         [THEME[theme].button]: true,

app/components/map/controls/fit-bounds/component.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback } from 'react';
+
+import { ViewportProps } from 'react-map-gl';
+
 import cx from 'classnames';
 
 import Icon from 'components/icon';
 
-import { ViewportProps } from 'react-map-gl';
-
 import FIT_BOUNDS_SVG from 'svgs/map/fit-bounds.svg?sprite';
 
 export interface FitBoundsControlProps {
@@ -28,6 +29,7 @@ export const FitBoundsControl = ({
 
   return (
     <button
+      aria-label="fit-bounds"
       className={cx({
         'mb-0.5 px-0.5 py-1 rounded-4xl text-white bg-black focus:outline-none': true,
         'hover:bg-gray-700 active:bg-gray-600': !!bounds,

app/components/map/controls/zoom/component.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback } from 'react';
+
+import { ViewportProps } from 'react-map-gl';
+
 import cx from 'classnames';
 
 import Icon from 'components/icon';
 
-import { ViewportProps } from 'react-map-gl';
-
 import ZOOM_IN_SVG from 'svgs/map/zoom-in.svg?sprite';
 import ZOOM_OUT_SVG from 'svgs/map/zoom-out.svg?sprite';
 
@@ -47,6 +48,7 @@ export const ZoomControl = ({
       })}
     >
       <button
+        aria-label="zoom-in"
         className={cx({
           'mb-0.5 p-0.5 rounded-t-4xl text-white bg-black focus:outline-none': true,
           'hover:bg-gray-700 active:bg-gray-600': zoom !== maxZoom,
@@ -59,6 +61,7 @@ export const ZoomControl = ({
         <Icon icon={ZOOM_IN_SVG} />
       </button>
       <button
+        aria-label="zoom-out"
         className={cx({
           'p-0.5 rounded-b-4xl text-white bg-black focus:outline-none': true,
           'hover:bg-gray-700 active:bg-gray-600': zoom !== minZoom,

app/components/map/legend/item/component.tsx

@@ -88,6 +88,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
 
         {sortable?.handle && (
           <button
+            aria-label="drag"
             type="button"
             className="text-gray-400 cursor-pointer hover:text-white"
             {...listeners}
@@ -147,6 +148,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
                   )}
                 >
                   <button
+                    aria-label="manage-opacity"
                     type="button"
                     className={cx({
                       'block text-white': true,
@@ -175,6 +177,7 @@ export const LegendItem: React.FC<LegendItemProps> = ({
               )}
             >
               <button
+                aria-label="manage-visibility"
                 type="button"
                 onClick={onChangeVisibility}
                 className={cx({

app/components/search/component.tsx

@@ -1,17 +1,18 @@
 import React, { useRef } from 'react';
-import cx from 'classnames';
 
 // react aria
+import { useButton } from '@react-aria/button'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import { useSearchField } from '@react-aria/searchfield';
 import { useSearchFieldState } from '@react-stately/searchfield';
-import { useButton } from '@react-aria/button'; // eslint-disable-line @typescript-eslint/no-unused-vars
 
 // react types
 import { AriaSearchFieldProps } from '@react-types/searchfield';
+import cx from 'classnames';
 
 import Icon from 'components/icon';
-import SEARCH_SVG from 'svgs/ui/search.svg?sprite';
+
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import SEARCH_SVG from 'svgs/ui/search.svg?sprite';
 
 const THEME = {
   dark: 'text-white',
@@ -76,7 +77,12 @@ export const Search: React.FC<SearchProps> = ({
       />
 
       {state.value !== '' && (
-        <button className="relative flex items-center self-center justify-center w-5 h-5" type="button" {...buttonProps}>
+        <button
+          aria-label="close"
+          className="relative flex items-center self-center justify-center w-5 h-5"
+          type="button"
+          {...buttonProps}
+        >
           <Icon
             icon={CLOSE_SVG}
             className="inline-block w-2 h-2"

app/components/tabs/component.tsx

@@ -25,6 +25,7 @@ export const Tabs: React.FC<TabsProps> = ({
       {items.map((tab) => (
         <li key={tab.id}>
           <button
+            aria-label="select-tab"
             type="button"
             className={cx(
               {

app/components/toast/component.tsx

@@ -1,19 +1,18 @@
 import React, {
   useCallback, useEffect, useRef,
 } from 'react';
+
 import cx from 'classnames';
+import { motion, useAnimation } from 'framer-motion';
+
+import Icon from 'components/icon';
 
-import SUCCESS_SVG from 'svgs/notifications/success.svg?sprite';
 import ERROR_SVG from 'svgs/notifications/error.svg?sprite';
-import WARNING_SVG from 'svgs/notifications/warning.svg?sprite';
 import INFO_SVG from 'svgs/notifications/info.svg?sprite';
-
+import SUCCESS_SVG from 'svgs/notifications/success.svg?sprite';
+import WARNING_SVG from 'svgs/notifications/warning.svg?sprite';
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
 
-import Icon from 'components/icon';
-
-import { motion, useAnimation } from 'framer-motion';
-
 import { ToastProps, ToastTheme } from './types';
 
 const THEME: ToastTheme = {
@@ -127,6 +126,7 @@ export const Toast: React.FC<ToastProps> = ({
           </div>
 
           <button
+            aria-label="close"
             type="button"
             className="flex items-center justify-center flex-shrink-0 w-10 h-10 ml-5"
             onClick={handleDismiss}

app/layout/header/component.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 
 import Link from 'next/link';
 
-import { useMe } from 'hooks/me';
-
 import cx from 'classnames';
 
+import { useMe } from 'hooks/me';
+
 import MyProjects from 'layout/header/my-projects';
 import Title from 'layout/header/title';
 import User from 'layout/header/user';
@@ -37,7 +37,7 @@ const SIZE = {
   },
 };
 
-export const Header: React.FC<HeaderProps> = ({ published = false, size, theme = 'dark' }:HeaderProps) => {
+export const Header: React.FC<HeaderProps> = ({ published = false, size, theme = 'dark' }: HeaderProps) => {
   const { user } = useMe();
 
   return (

app/layout/header/user/component.tsx

@@ -65,6 +65,7 @@ export const HeaderUser: React.FC<HeaderUserProps> = () => {
           </nav>
 
           <button
+            aria-label="log-out"
             type="button"
             onClick={handleSignOut}
             className="flex w-full px-8 py-5 border-t border-gray-300 hover:underline focus:outline-none"
@@ -76,6 +77,7 @@ export const HeaderUser: React.FC<HeaderUserProps> = () => {
       )}
     >
       <button
+        aria-label="open-menu"
         type="button"
         className="flex items-center justify-start space-x-1 focus:outline-none"
         onClick={handleClick}

app/layout/help/beacon/component.tsx

@@ -11,12 +11,12 @@ import { useResizeDetector } from 'react-resize-detector';
 
 import { useRouter } from 'next/router';
 
-import { useHelp } from 'hooks/help';
-
 import type { Placement } from '@popperjs/core';
 import cx from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 
+import { useHelp } from 'hooks/help';
+
 import HelpSpotlight from 'layout/help/spotlight';
 import HelpTooltip from 'layout/help/tooltip';
 
@@ -173,6 +173,7 @@ export const HelpBeacon: React.FC<HelpBeaconProps> = ({
               {...attributes.popper}
             >
               <button
+                aria-label="manage-visibility"
                 type="button"
                 className={cx({
                   'relative beacon flex items-center justify-center w-6 h-6 bg-primary-500 border-2 border-gray-700 transition rounded-full focus:outline-none transform translate-y-3/4': true,

app/layout/me/profile/avatar/component.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
 
 import { useDropzone } from 'react-dropzone';
+
+import { motion } from 'framer-motion';
+
 import { useMe } from 'hooks/me';
 import { useToasts } from 'hooks/toast';
 
 import Avatar from 'components/avatar';
 import Icon from 'components/icon';
 
-import { motion } from 'framer-motion';
-
 import CLOSE_SVG from 'svgs/ui/close.svg?sprite';
 import IMAGE_SVG from 'svgs/ui/image.svg?sprite';
 
@@ -24,7 +25,7 @@ const toBase64 = (file) => new Promise((resolve, reject) => {
   reader.onerror = (error) => reject(error);
 });
 
-export const AvatarMe: React.FC<AvatarMeProps> = ({ value, onChange }:AvatarMeProps) => {
+export const AvatarMe: React.FC<AvatarMeProps> = ({ value, onChange }: AvatarMeProps) => {
   const { user } = useMe();
   const { addToast } = useToasts();
   const [preview, setPreview] = useState(value);
@@ -121,6 +122,7 @@ export const AvatarMe: React.FC<AvatarMeProps> = ({ value, onChange }:AvatarMePr
 
           {preview && (
             <button
+              aria-label="remove"
               type="button"
               className="absolute p-1 transform translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full top-1 right-1"
               onClickCapture={onRemove}

app/layout/partners/component.tsx

@@ -23,7 +23,7 @@ export const PartnersList: React.FC<PartnersListProps> = () => {
             <div className="grid w-full grid-cols-1 px-24 md:grid-cols-2 gap-y-20">
               {FOUNDING_LOGOS.map((fl) => (
                 <a href={fl.hyperlink} key={fl.id} rel="noreferrer" target="_blank" className="place-self-center">
-                  <img alt={fl.alt} src={fl.src} />
+                  <img alt={fl.alt} src={fl.src} height="auto" width="auto" />
                 </a>
               ))}
             </div>
@@ -36,7 +36,7 @@ export const PartnersList: React.FC<PartnersListProps> = () => {
             <div className="grid w-full grid-cols-1 md:grid-cols-2 gap-y-20">
               {PARTNERSHIP_LOGOS.map((fl) => (
                 <a href={fl.hyperlink} key={fl.id} rel="noreferrer" target="_blank" className="place-self-center">
-                  <img alt={fl.alt} src={fl.src} />
+                  <img alt={fl.alt} src={fl.src} height="auto" width="auto" />
                 </a>
               ))}
             </div>
@@ -51,7 +51,7 @@ export const PartnersList: React.FC<PartnersListProps> = () => {
             <div className="grid w-full grid-cols-1 px-32 pt-24 md:px-0 md:grid-cols-5 gap-y-24 md:gap-y-0 md:gap-x-16">
               {ADDITIONAL_SUPPORT_LOGOS.map((sl) => (
                 <a href={sl.hyperlink} key={sl.id} rel="noreferrer" target="_blank" className="place-self-center">
-                  <img alt={sl.alt} src={sl.src} />
+                  <img alt={sl.alt} src={sl.src} height="auto" width="auto" />
                 </a>
               ))}
             </div>
@@ -66,7 +66,7 @@ export const PartnersList: React.FC<PartnersListProps> = () => {
             <div className="grid w-full grid-cols-1 pt-20 md:grid-cols-1 gap-x-16">
               {INITIATIVE_LOGOS.map((sl) => (
                 <a href={sl.hyperlink} key={sl.id} rel="noreferrer" target="_blank" className="place-self-center">
-                  <img alt={sl.alt} src={sl.src} />
+                  <img alt={sl.alt} src={sl.src} height="auto" width="auto" />
                 </a>
               ))}
             </div>

app/layout/projects/new/form/planning-area-uploader/component.tsx

@@ -52,7 +52,7 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
       input.onChange(null);
       dispatch(setUploadingPlanningArea(null));
     };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const onDropAccepted = async (acceptedFiles) => {
@@ -218,6 +218,7 @@ export const PlanningAreUploader: React.FC<PlanningAreUploaderProps> = ({
                 <p className="text-sm text-blue-500">{successFile.name}</p>
               </label>
               <button
+                aria-label="remove"
                 id="cancel-shapefile-btn"
                 type="button"
                 className="flex items-center justify-center w-5 h-5 border border-white rounded-full group hover:bg-white border-opacity-20"

app/layout/projects/show/header/contributors/component.tsx

@@ -64,6 +64,7 @@ export const Contributors: React.FC<ContributorsProps> = () => {
 
               <li className="ml-3">
                 <button
+                  aria-label="add-contributor"
                   type="button"
                   onClick={() => {
                     console.info('Add contributor');

app/layout/scenarios/edit/analysis/cost-surface/component.tsx

@@ -134,6 +134,7 @@ export const ScenariosCostSurface: React.FC<ScenariosCostSurfaceProps> = ({
     >
       <header className="flex items-center pt-5 pb-1 space-x-3">
         <button
+          aria-label="return"
           type="button"
           className="flex items-center w-full space-x-2 text-left focus:outline-none"
           onClick={() => {

app/layout/scenarios/edit/analysis/gap-analysis/component.tsx

@@ -33,6 +33,7 @@ export const ScenariosGapAnalysis: React.FC<ScenariosGapAnalysisProps> = ({
     >
       <header className="flex items-center pt-5 pb-1 space-x-3">
         <button
+          aria-label="return"
           type="button"
           className="flex items-center w-full space-x-2 text-left focus:outline-none"
           onClick={() => {

app/layout/scenarios/edit/features/component.tsx

@@ -196,7 +196,7 @@ export const ScenariosSidebarEditFeatures: React.FC<ScenariosSidebarEditFeatures
                               your feature to be included in the solution.
                             </p>
                           </div>
-                          <h4 className="font-heading text-lg mb-2.5">What is the FPF?</h4>
+                          <h4 className="font-heading text-lg mt-5 mb-2.5">What is the FPF?</h4>
                           <div className="space-y-2">
                             <p>
                               FPF stands for