feat: add accessible country selector

country-explorer/src/components/App.css

@@ -1,19 +1 @@
-.country-selection {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  margin: 1rem;
-}
-
-.country-selection select {
-  min-width: 0;
-  max-width: 100%;
-  padding: 0.5rem;
-  font: inherit;
-  color: var(--text-h);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-}
+/* Main layout styles go here. */

country-explorer/src/components/App.tsx

@@ -2,6 +2,7 @@ import './App.css';
 import { useState } from 'react';
 import { useCountries } from '../hooks/useCountries';
 import CountryCard from './CountryCard';
+import CountrySelector from './CountrySelector';
 import Loading from './Loading';
 import ErrorMessage from './ErrorMessage';
 import NavigationControls from './NavigationControls';
@@ -40,22 +41,12 @@ function App() {
         <section aria-labelledby="controls-heading">
           <h2 id="controls-heading">Filters and selection</h2>
           {/* RegionFilter and SortSelector go here */}
-          <div className="country-selection">
-            <label htmlFor="country-select">Country</label>
-            <select
-              id="country-select"
-              value={activeCountryCode ?? ''}
-              onChange={(event) => setSelectedCountryCode(event.target.value)}
-              disabled={isLoading || isError || countries.length === 0}
-            >
-              {countries.length === 0 && <option value="">No countries available</option>}
-              {countries.map((country) => (
-                <option key={country.code} value={country.code}>
-                  {country.name || country.code}
-                </option>
-              ))}
-            </select>
-          </div>
+          <CountrySelector
+            countries={countries}
+            selectedCountryCode={activeCountryCode}
+            onSelectCountry={setSelectedCountryCode}
+            disabled={isLoading || isError}
+          />
         </section>
 
         <section aria-labelledby="country-heading">

country-explorer/src/components/CountrySelector.css

@@ -0,0 +1,24 @@
+.country-selection {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin: 1rem;
+}
+
+.country-selection select {
+  min-width: 0;
+  max-width: 100%;
+  padding: 0.5rem;
+  font: inherit;
+  color: var(--text-h);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+
+.country-selection select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}

country-explorer/src/components/CountrySelector.tsx

@@ -0,0 +1,46 @@
+import { useId } from 'react';
+import type { Country } from '../types/country';
+import './CountrySelector.css';
+
+interface CountrySelectorProps {
+  countries: Country[];
+  selectedCountryCode: string | null;
+  onSelectCountry: (code: string) => void;
+  disabled?: boolean;
+}
+
+function CountrySelector({
+  countries,
+  selectedCountryCode,
+  onSelectCountry,
+  disabled = false,
+}: CountrySelectorProps) {
+  const selectId = useId();
+
+  return (
+    <div className="country-selection">
+      <label htmlFor={selectId}>Country</label>
+      <select
+        id={selectId}
+        value={selectedCountryCode ?? ''}
+        onChange={(event) => onSelectCountry(event.target.value)}
+        disabled={disabled || countries.length === 0}
+      >
+        {countries.length === 0 ? (
+          <option value="">No countries available</option>
+        ) : (
+          <>
+            {selectedCountryCode === null && <option value="">Select a country</option>}
+            {countries.map((country) => (
+              <option key={country.code} value={country.code}>
+                {country.name || country.code}
+              </option>
+            ))}
+          </>
+        )}
+      </select>
+    </div>
+  );
+}
+
+export default CountrySelector;