From 25126660df290bb5ab541f6eda7ed2d914fe45ae Mon Sep 17 00:00:00 2001
From: Siddharth Singh <me@shantaram.xyz>
Date: Sat, 12 Apr 2025 05:06:48 +0530
Subject: [PATCH] add aria-label to FuzzySearchInput

---
 src/components/fuzzy-search-input.tsx | 12 ++++++++++--
 src/features/admin/policy-manager.tsx |  2 ++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/fuzzy-search-input.tsx b/src/components/fuzzy-search-input.tsx
index 50008e463..41ed04b60 100644
--- a/src/components/fuzzy-search-input.tsx
+++ b/src/components/fuzzy-search-input.tsx
@@ -1,9 +1,13 @@
 import FuzzySearch from 'fuzzy-search';
 import React, { useState, useRef, useCallback, useEffect, useId } from 'react';
-import { useIntl, MessageDescriptor } from 'react-intl';
+import { useIntl, MessageDescriptor, defineMessages } from 'react-intl';
 
 import Input from 'soapbox/components/ui/input.tsx';
 
+const messages = defineMessages({
+  defaultAriaLabel: { id: 'soapbox.fuzzy_search_input.default_aria_label', defaultMessage: 'Fuzzy search input field.' },
+});
+
 type PlaceholderText = string | MessageDescriptor;
 
 interface FuzzySearchInputProps<T> {
@@ -19,6 +23,8 @@ interface FuzzySearchInputProps<T> {
   placeholder?: PlaceholderText;
   /** Optional: Array of placeholders to rotate through. Takes precedence over placeholder if both are provided. */
   placeholders?: PlaceholderText[];
+  /** Optional, but strongly recommended: aria-label text for the element's placeholder. Use if no label for the field is given. */
+  ariaLabel?: PlaceholderText;
   /** Optional: Interval in milliseconds to change placeholders. Defaults to 5000ms (5 seconds). */
   placeholderChangeInterval?: number;
   /**
@@ -64,6 +70,7 @@ function FuzzySearchInput<T extends Record<string, any> | string>({
   className = '',
   baseId,
   inputClassName = '',
+  ariaLabel = messages.defaultAriaLabel,
   renderSuggestion: FuzzySearchSuggestion,
 }: FuzzySearchInputProps<T>) {
   const intl = useIntl();
@@ -76,7 +83,7 @@ function FuzzySearchInput<T extends Record<string, any> | string>({
   const [currentPlaceholder, setCurrentPlaceholder] = useState<string>(
     typeof placeholder === 'string' ? placeholder : intl.formatMessage(placeholder),
   );
-  const placeholderIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const placeholderIntervalRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const containerRef = useRef<HTMLDivElement>(null);
   // Generate unique IDs for ARIA attributes if no baseId is provided
@@ -241,6 +248,7 @@ function FuzzySearchInput<T extends Record<string, any> | string>({
         onBlur={handleBlur}
         placeholder={currentPlaceholder}
         autoComplete='off'
+        aria-label={ariaLabel}
         aria-autocomplete='list'
         aria-controls={showSuggestions && suggestions.length > 0 ? listboxId : undefined}
         aria-expanded={showSuggestions && suggestions.length > 0}
diff --git a/src/features/admin/policy-manager.tsx b/src/features/admin/policy-manager.tsx
index c62acd355..1e91cbf75 100644
--- a/src/features/admin/policy-manager.tsx
+++ b/src/features/admin/policy-manager.tsx
@@ -27,6 +27,7 @@ const messages = defineMessages({
   helpButton: { id: 'admin.policies.help.button', defaultMessage: 'Help' },
   okay: { id: 'admin.policies.help.okay', defaultMessage: 'Okay' },
   policyExists: { id: 'admin.policies.policy_exists', defaultMessage: 'Policy already exists!' },
+  searchFieldLabel: { id: 'admin.policies.search_label', defaultMessage: 'Policy search field' },
 });
 
 const PolicySuggestion: FC<{ item: PolicyItem }> = ({ item }) => {
@@ -292,6 +293,7 @@ const PolicyManager: FC = () => {
           onSelection={handleSelection}
           displayKey='name'
           placeholders={dynamicPlaceholders}
+          ariaLabel={messages.searchFieldLabel}
           className='w-full'
           renderSuggestion={PolicySuggestion}
         />