From 3eb5fb5be7a8197f9413504214d326e55c9e4a7c Mon Sep 17 00:00:00 2001
From: Ryan Lewis <93001277+rylew1@users.noreply.github.com>
Date: Tue, 28 May 2024 08:47:31 -0700
Subject: [PATCH] [Issue #50]: change SortBy to USWDS component (#52)

## Summary
Fixes #50

## Changes proposed
- switch to using USWDS `Select` component
---
 frontend/src/components/search/SearchSortBy.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/search/SearchSortBy.tsx b/frontend/src/components/search/SearchSortBy.tsx
index 5c5475534..5c4412aac 100644
--- a/frontend/src/components/search/SearchSortBy.tsx
+++ b/frontend/src/components/search/SearchSortBy.tsx
@@ -1,3 +1,4 @@
+import { Select } from "@trussworks/react-uswds";
 import { useSearchParamUpdater } from "../../hooks/useSearchParamUpdater";
 import { useState } from "react";
 
@@ -43,20 +44,22 @@ const SearchSortBy: React.FC<SearchSortByProps> = ({
 
   return (
     <div id="search-sort-by">
-      <select
-        className="usa-select"
-        name="search-sort-by"
+      <label htmlFor="search-sort-by-select" className="usa-sr-only">
+        Sort By
+      </label>
+
+      <Select
         id="search-sort-by-select"
+        name="search-sort-by"
         onChange={handleChange}
         value={sortBy}
-        aria-label="Sort By"
       >
         {SORT_OPTIONS.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}
           </option>
         ))}
-      </select>
+      </Select>
     </div>
   );
 };