From 086bfa310ffd2fec89b60d86e2312f8be881617e Mon Sep 17 00:00:00 2001
From: Ben Phelps <ben@phelps.io>
Date: Mon, 26 Sep 2022 15:03:02 +0300
Subject: [PATCH] lighthouse requirements

---
 src/components/bookmarks/item.jsx                 | 2 +-
 src/components/color-toggle.jsx                   | 2 ++
 src/components/services/item.jsx                  | 1 +
 src/components/version.jsx                        | 4 ++--
 src/components/widgets/openweathermap/weather.jsx | 2 +-
 src/components/widgets/search/search.jsx          | 1 +
 src/components/widgets/weather/weather.jsx        | 2 +-
 src/pages/_document.jsx                           | 5 ++++-
 src/styles/manrope.css                            | 8 ++++++++
 9 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/bookmarks/item.jsx b/src/components/bookmarks/item.jsx
index b87d4a563..f3a2be533 100644
--- a/src/components/bookmarks/item.jsx
+++ b/src/components/bookmarks/item.jsx
@@ -20,7 +20,7 @@ export default function Item({ bookmark }) {
           </div>
           <div className="flex-1 flex items-center justify-between rounded-r-md ">
             <div className="flex-1 grow pl-3 py-2 text-xs">{bookmark.name}</div>
-            <div className="px-2 py-2 truncate text-theme-500 dark:text-theme-400 opacity-50 text-xs">{hostname}</div>
+            <div className="px-2 py-2 truncate text-theme-500 dark:text-theme-400 text-xs">{hostname}</div>
           </div>
         </div>
       </a>
diff --git a/src/components/color-toggle.jsx b/src/components/color-toggle.jsx
index aab94d728..29e81c0bf 100644
--- a/src/components/color-toggle.jsx
+++ b/src/components/color-toggle.jsx
@@ -45,6 +45,7 @@ export default function ColorToggle() {
             className="h-5 w-5 text-theme-800 dark:text-theme-200 transition duration-150 ease-in-out"
             aria-hidden="true"
           />
+          <span className="sr-only">Change color</span>
         </Popover.Button>
         <Transition
           as={Fragment}
@@ -67,6 +68,7 @@ export default function ColorToggle() {
                         `rounded-md w-5 h-5 border-black/50 dark:border-white/50 theme-${color} bg-theme-400`
                       )}
                     />
+                    <span className="sr-only">{color}</span>
                   </button>
                 ))}
               </div>
diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 682b694fa..de70914e4 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -93,6 +93,7 @@ export default function Item({ service }) {
               className="flex-shrink-0 flex items-center justify-center w-12 cursor-pointer"
             >
               <Status service={service} />
+              <span className="sr-only">View container stats</span>
             </button>
           )}
         </div>
diff --git a/src/components/version.jsx b/src/components/version.jsx
index 15eb68b01..b269d78b7 100644
--- a/src/components/version.jsx
+++ b/src/components/version.jsx
@@ -26,7 +26,7 @@ export default function Version() {
 
   return (
     <div className="flex flex-row items-center">
-      <span className="text-xs text-theme-500 opacity-50">
+      <span className="text-xs text-theme-500">
         {version} ({revision.substring(0, 7)}, {formatDate(buildTime)})
       </span>
       {version === "main" || version === "dev"
@@ -37,7 +37,7 @@ export default function Version() {
               href={latestRelease.html_url}
               target="_blank"
               rel="noopener noreferrer"
-              className="ml-2 text-xs text-theme-500 opacity-50 flex flex-row items-center"
+              className="ml-2 text-xs text-theme-500 flex flex-row items-center"
             >
               <MdNewReleases className="mr-1" /> {t("Update Available")}
             </a>
diff --git a/src/components/widgets/openweathermap/weather.jsx b/src/components/widgets/openweathermap/weather.jsx
index 9037eb3a8..61d6229d2 100644
--- a/src/components/widgets/openweathermap/weather.jsx
+++ b/src/components/widgets/openweathermap/weather.jsx
@@ -98,7 +98,7 @@ export default function OpenWeatherMap({ options }) {
     }
   };
 
-  if (!requesting && !location) requestLocation();
+  // if (!requesting && !location) requestLocation();
 
   if (!location) {
     return (
diff --git a/src/components/widgets/search/search.jsx b/src/components/widgets/search/search.jsx
index 1ffd6bf69..1af4b1405 100644
--- a/src/components/widgets/search/search.jsx
+++ b/src/components/widgets/search/search.jsx
@@ -81,6 +81,7 @@ export default function Search({ options }) {
         focus:ring-theme-500 dark:focus:ring-white/50"
       >
         <provider.icon className="text-white w-3 h-3" />
+        <span className="sr-only">{t("search.search")}</span>
       </button>
     </form>
   );
diff --git a/src/components/widgets/weather/weather.jsx b/src/components/widgets/weather/weather.jsx
index 1c92f839e..f13c177f5 100644
--- a/src/components/widgets/weather/weather.jsx
+++ b/src/components/widgets/weather/weather.jsx
@@ -99,7 +99,7 @@ export default function WeatherApi({ options }) {
     }
   };
 
-  if (!requesting && !location) requestLocation();
+  // if (!requesting && !location) requestLocation();
 
   if (!location) {
     return (
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index ad9ef1109..b90aa4651 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -4,7 +4,10 @@ export default function Document() {
   return (
     <Html>
       <Head>
-        <meta description="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations." />
+        <meta
+          name="description"
+          content="A highly customizable homepage (or startpage / application dashboard) with Docker and service API integrations."
+        />
       </Head>
       <body className="relative w-full h-full bg-theme-50 dark:bg-theme-800 transition duration-150 ease-in-out">
         <Main />
diff --git a/src/styles/manrope.css b/src/styles/manrope.css
index a0b253e83..ee9041880 100644
--- a/src/styles/manrope.css
+++ b/src/styles/manrope.css
@@ -8,46 +8,54 @@
   letter-spacing: 0.25px;
   font-weight: 400;
   src: local("Arial");
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Manrope";
   font-weight: 200;
   src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Manrope";
   font-weight: 300;
   src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Manrope";
   font-weight: 400;
   src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Manrope";
   font-weight: 500;
   src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Manrope";
   font-weight: 600;
   src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Manrope";
   font-weight: 700;
   src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Manrope";
   font-weight: 800;
   src: local("Manrope"), url("./font/Manrope.woff2") format("woff2");
+  font-display: swap;
 }