Added placeholders on dropdown for accessibility

Author: AlexVOiceover

src/components/ui/Dropdown.tsx

@@ -4,13 +4,15 @@ interface DropdownProps {
   options: string[];
   onSelect: (value: string) => void;
   includeAll?: boolean;
+  placeholder?: string;
 }
 
 const Dropdown: React.FC<DropdownProps> = ({
   label,
   options,
   onSelect,
   includeAll = false,
+  placeholder,
 }) => {
   const displayedOptions = includeAll ? ['All', ...options] : options;
 
@@ -24,7 +26,13 @@ const Dropdown: React.FC<DropdownProps> = ({
       <select
         className='w-full p-2 border bg-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-black'
         onChange={(e) => onSelect(e.target.value)}
+        defaultValue=''
       >
+        {placeholder && (
+          <option value='' disabled>
+            {placeholder}
+          </option>
+        )}
         {displayedOptions.map((option) => (
           <option key={option} value={option}>
             {option}

src/components/ui/SubjectDropdown.tsx

@@ -5,12 +5,14 @@ interface SubjectDropdownProps {
   subject: string;
   descriptors: string[];
   onSelect: (value: string) => void;
+  placeholder?: string;
 }
 
 const SubjectDropdown: React.FC<SubjectDropdownProps> = ({
   subject,
   descriptors,
   onSelect,
+  placeholder,
 }) => {
   // Build the final options array:
   // ["Bob", "Bob's social media presence", "Bob's coffee addiction", ...]
@@ -19,7 +21,13 @@ const SubjectDropdown: React.FC<SubjectDropdownProps> = ({
     ...descriptors.map((desc) => `${subject}'s ${desc}`),
   ];
 
-  return <Dropdown options={dropdownOptions} onSelect={onSelect} />;
+  return (
+    <Dropdown
+      options={dropdownOptions}
+      onSelect={onSelect}
+      placeholder={placeholder}
+    />
+  );
 };
 
 export default SubjectDropdown;

src/pages/employees/EmployeesDetails.tsx

@@ -85,19 +85,8 @@ const EmployeesDetails: React.FC = () => {
           <Dropdown
             options={employers.map((employer) => employer.company)}
             onSelect={(value) => setEmployer(value)}
+            placeholder='Select Employer'
           />
-          {/* <select
-            value={employer}
-            onChange={(e) => setEmployer(e.target.value)}
-            className='w-full border border-gray-400 rounded px-2 py-1  bg-gray-900 text-white'
-          >
-            <option value=''>-- Choose an employer --</option>
-            {employers.map((employer) => (
-              <option key={employer.company} value={employer.company}>
-                {employer.company}
-              </option>
-            ))}
-          </select> */}
         </div>
 
         {/* Next Button */}

src/pages/employees/SentenceBuilder.tsx

@@ -73,6 +73,7 @@ const SentenceBuilderPage: React.FC = () => {
                 subject: value,
               }));
             }}
+            placeholder='Choose Subject'
           />
           {/* <SentenceButton
             defaultValue='Choose Subject'