From 8b670c4528186f8911d1044292fb70792dfc003a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Fri, 31 Oct 2025 14:08:22 +0100
Subject: [PATCH] pl-fe: make search clear/submit button accessible
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/search-input.tsx | 10 +++++-----
 packages/pl-fe/src/pages/search/search.tsx     | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/pl-fe/src/components/search-input.tsx b/packages/pl-fe/src/components/search-input.tsx
index 26fbb0a8a..860ef8c02 100644
--- a/packages/pl-fe/src/components/search-input.tsx
+++ b/packages/pl-fe/src/components/search-input.tsx
@@ -13,6 +13,7 @@ import type { History } from 'pl-fe/types/history';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
+  clear: { id: 'search.clear', defaultMessage: 'Clear input' },
   action: { id: 'search.action', defaultMessage: 'Search for “{query}”' },
 });
 
@@ -38,7 +39,7 @@ const SearchInput = React.memo(() => {
     setValue(value);
   };
 
-  const handleClear = (event: React.MouseEvent<HTMLDivElement>) => {
+  const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {
     setValue('');
   };
 
@@ -90,11 +91,11 @@ const SearchInput = React.memo(() => {
           className='pr-10 rtl:pl-10 rtl:pr-3'
         />
 
-        <div
-          role='button'
+        <button
           tabIndex={0}
           className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto'
           onClick={handleClear}
+          title={hasValue ? intl.formatMessage(messages.clear) : intl.formatMessage(messages.placeholder)}
         >
           <SvgIcon
             src={require('@phosphor-icons/core/regular/magnifying-glass.svg')}
@@ -104,9 +105,8 @@ const SearchInput = React.memo(() => {
           <SvgIcon
             src={require('@phosphor-icons/core/regular/x.svg')}
             className={clsx('size-4 text-gray-600', { hidden: !hasValue })}
-            aria-label={intl.formatMessage(messages.placeholder)}
           />
-        </div>
+        </button>
       </div>
     </div>
   );
diff --git a/packages/pl-fe/src/pages/search/search.tsx b/packages/pl-fe/src/pages/search/search.tsx
index 8f232b91a..4cbdf6864 100644
--- a/packages/pl-fe/src/pages/search/search.tsx
+++ b/packages/pl-fe/src/pages/search/search.tsx
@@ -19,6 +19,7 @@ type SearchFilter = 'accounts' | 'hashtags' | 'statuses' | 'links';
 const messages = defineMessages({
   heading: { id: 'column.search', defaultMessage: 'Search' },
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
+  clear: { id: 'search.clear', defaultMessage: 'Clear input' },
   accounts: { id: 'search_results.accounts', defaultMessage: 'People' },
   statuses: { id: 'search_results.statuses', defaultMessage: 'Posts' },
   hashtags: { id: 'search_results.hashtags', defaultMessage: 'Hashtags' },
@@ -45,7 +46,7 @@ const SearchInput: React.FC<ISearchInput> = ({ placeholder }) => {
     setValue(value);
   };
 
-  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
 
     if (params.get('q') === value) {
@@ -87,17 +88,16 @@ const SearchInput: React.FC<ISearchInput> = ({ placeholder }) => {
           className='pr-10 rtl:pl-10 rtl:pr-3'
         />
 
-        <div
-          role='button'
+        <button
           tabIndex={0}
           className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto'
           onClick={handleClick}
+          title={params.get('q') === value ? intl.formatMessage(messages.clear) : intl.formatMessage(messages.placeholder)}
         >
           {params.get('q') === value ? (
             <SvgIcon
               src={require('@phosphor-icons/core/regular/x.svg')}
               className='size-4 text-gray-600'
-              aria-label={intl.formatMessage(messages.placeholder)}
             />
           ) : (
             <SvgIcon
@@ -105,7 +105,7 @@ const SearchInput: React.FC<ISearchInput> = ({ placeholder }) => {
               className='size-4 text-gray-600'
             />
           )}
-        </div>
+        </button>
       </div>
     </div>
   );