Remove redundant "select a city" label

index.html

@@ -74,15 +74,13 @@
     <header>
       <div class="navigation">
         <span class="site-title">Parking Lot Map</span>
-        <fieldset id="city-dropdown">
-          <label for="city-choice">Select a city: </label>
-          <select
-            single
-            name="city-choice"
-            class="city-choice"
-            id="city-choice"
-          ></select>
-        </fieldset>
+        <select
+          single
+          name="city-dropdown"
+          class="city-dropdown"
+          id="city-dropdown"
+          aria-label="select the city"
+        ></select>
       </div>
       <div class="header-icons">
         <div class="header-about-icon">

src/css/_about.scss

@@ -19,7 +19,7 @@ div.about-text-popup {
 }
 
 div.about-text-popup svg.fa-circle-xmark {
-  color: #4d4d4d;
+  color: colors.$gray-light;
 }
 
 div.about-text-container {

src/css/_header.scss

@@ -49,14 +49,9 @@ header {
     align-items: center;
     gap: 0.7em;
     height: 40px;
-    margin-bottom: 6px;
   }
 }
 
-#city-dropdown label {
-  font-weight: normal;
-}
-
 .choices__inner {
   border: 2px solid colors.$black-translucent;
   border-radius: 10px;

src/js/dropdown.ts

@@ -3,7 +3,7 @@ import "choices.js/public/assets/styles/choices.css";
 import scoreCardsData from "../../data/score-cards.json";
 import { CityId, ScoreCardDetails, dropdownChoice } from "./types";
 
-export const DROPDOWN = new Choices("#city-choice", {
+export const DROPDOWN = new Choices("#city-dropdown", {
   allowHTML: false,
   itemSelectText: "Select",
   searchEnabled: true,

src/js/setUpSite.ts

@@ -231,7 +231,7 @@ const setUpCitiesLayer = async (
   allBoundaries.addTo(map);
 
   // Set up map to update when city selection changes.
-  const cityToggleElement = document.getElementById("city-choice");
+  const cityToggleElement = document.getElementById("city-dropdown");
   if (cityToggleElement instanceof HTMLSelectElement) {
     cityToggleElement.addEventListener("change", async () => {
       const cityId = cityToggleElement.value;
@@ -260,7 +260,7 @@ const setUpCitiesLayer = async (
     snapToCity(map, cities[cityId].layer);
     setScorecard(cityId, cities[cityId]);
   } else {
-    throw new Error("#city-choice is not a select element");
+    throw new Error("#city-dropdown is not a select element");
   }
 };
 

tests/app/setUpSite.test.ts

@@ -59,7 +59,7 @@ test("correctly load the city score card", async ({ page }) => {
 
   const [content, cityToggleValue] = await page.evaluate(() => {
     const cityChoice: HTMLSelectElement | null =
-      document.querySelector("#city-choice");
+      document.querySelector("#city-dropdown");
     const cityToggle = cityChoice?.value;
 
     const detailsTitles = Array.from(
@@ -138,7 +138,7 @@ test.describe("the share feature", () => {
       );
       const title = titlePopup?.textContent;
       const cityChoice: HTMLSelectElement | null =
-        document.querySelector("#city-choice");
+        document.querySelector("#city-dropdown");
       const cityToggle = cityChoice?.value;
       return [title, cityToggle];
     });
@@ -161,7 +161,7 @@ test.describe("the share feature", () => {
 
       const title = titlePopup?.textContent;
       const cityChoiceSelector: HTMLSelectElement | null =
-        document.querySelector("#city-choice");
+        document.querySelector("#city-dropdown");
       const cityToggle = cityChoiceSelector?.value;
       return [title, cityToggle];
     });
@@ -257,7 +257,7 @@ test("scorecard pulls up city closest to center", async ({ page }) => {
     const titlePopup = document.querySelector(".leaflet-popup-content .title");
     const title = titlePopup?.textContent;
     const cityChoice: HTMLSelectElement | null =
-      document.querySelector("#city-choice");
+      document.querySelector("#city-dropdown");
     return [title, cityChoice?.value];
   });
   expect(scoreCardTitle).toEqual("Birmingham, AL");