From a1593966a38affefb8e2d9dfb5baea21043d25bc Mon Sep 17 00:00:00 2001
From: Ojas Atkar <oatkar@asu.edu>
Date: Thu, 9 Jan 2025 15:22:11 -0700
Subject: [PATCH] fix(app-webdir-ui): duplicate Aria labels in "Sort by"
 dropdown menu

---
 packages/app-webdir-ui/src/SearchPage/components/sort.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/app-webdir-ui/src/SearchPage/components/sort.js b/packages/app-webdir-ui/src/SearchPage/components/sort.js
index 39aa3ee7a4..734ac0d69b 100644
--- a/packages/app-webdir-ui/src/SearchPage/components/sort.js
+++ b/packages/app-webdir-ui/src/SearchPage/components/sort.js
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useId } from "react";
 
 import { trackGAEvent } from "../../../../../shared";
 import { SortLayout } from "./index.styles";
@@ -16,7 +16,7 @@ import { SortLayout } from "./index.styles";
 
 const SortPicker = ({ sort, onChange, customSortOptions }) => {
   const [defaultSortValue, setDefaultSortValue] = useState(sort);
-
+  const sortLabelId = useId();
   const sortOptions = customSortOptions || [
     { value: "_score_desc", label: "Relevancy" },
     { value: "last_name_asc", label: "Last Name (ascending)" },
@@ -76,10 +76,10 @@ const SortPicker = ({ sort, onChange, customSortOptions }) => {
     <SortLayout>
       <form className="uds-form sort-form faculty-sort">
         <div className="form-group">
-          <label htmlFor="sortBySelect">Sort by</label>
+          <label htmlFor={sortLabelId}>Sort by</label>
           <select
             className="form-select"
-            id="sortBySelect"
+            id={sortLabelId}
             onChange={event => {
               updateSort(event.target.value);
               setDefaultSortValue(event.target.value);