pl-fe: more alike input improvements

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/location-search.tsx

@@ -13,6 +13,7 @@ const noOp = () => {};
 
 const messages = defineMessages({
   placeholder: { id: 'location_search.placeholder', defaultMessage: 'Find an address' },
+  clear: { id: 'search.clear', defaultMessage: 'Clear input' },
 });
 
 interface ILocationSearch {
@@ -66,10 +67,16 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
         searchTokens={[]}
         onKeyDown={handleKeyDown}
       />
-      <div role='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}>
+      <button
+        disabled={empty}
+        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={intl.formatMessage(messages.clear)}
+      >
         <Icon src={require('@phosphor-icons/core/regular/magnifying-glass.svg')} className={clsx('size-5 text-gray-600', { 'hidden': !empty })} />
-        <Icon src={require('@phosphor-icons/core/regular/backspace.svg')} className={clsx('size-5 text-gray-600', { 'hidden': empty })} aria-label={intl.formatMessage(messages.placeholder)} />
+        <Icon src={require('@phosphor-icons/core/regular/backspace.svg')} className={clsx('size-5 text-gray-600', { 'hidden': empty })} />
-      </div>
+      </button>
     </div>
   );
 };

packages/pl-fe/src/features/compose/components/language-dropdown.tsx

@@ -27,6 +27,7 @@ const messages = defineMessages({
   languageSuggestion: { id: 'compose.language_dropdown.suggestion', defaultMessage: '{language} (detected)' },
   multipleLanguages: { id: 'compose.language_dropdown.more_languages', defaultMessage: '{count, plural, one {# more language} other {# more languages}}' },
   search: { id: 'compose.language_dropdown.search', defaultMessage: 'Search language…' },
+  clear: { id: 'search.clear', defaultMessage: 'Clear input' },
   addLanguage: { id: 'compose.language_dropdown.add_language', defaultMessage: 'Add language' },
   deleteLanguage: { id: 'compose.language_dropdown.delete_language', defaultMessage: 'Delete language' },
 });
@@ -147,7 +148,7 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
 
   return (
     <>
-      <label className='relative block grow p-2 pt-1'>
+      <label className='relative m-2 mt-1 block grow'>
         <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
 
         <Input
@@ -158,13 +159,17 @@ const getLanguageDropdown = (composeId: string): React.FC<ILanguageDropdown> =>
           outerClassName='mt-0'
           placeholder={intl.formatMessage(messages.search)}
         />
-        <div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-5 rtl:left-0 rtl:right-auto' onClick={handleClear}>
+        <button
+          tabIndex={0}
+          className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-2 rtl:left-0 rtl:right-auto'
+          onClick={handleClear}
+          title={isSearching ? intl.formatMessage(messages.clear) : intl.formatMessage(messages.search)}
+        >
           <Icon
             className='size-5 text-gray-600'
             src={isSearching ? require('@phosphor-icons/core/regular/backspace.svg') : require('@phosphor-icons/core/regular/magnifying-glass.svg')}
-            aria-label={intl.formatMessage(messages.search)}
           />
-        </div>
+        </button>
       </label>
       <div className='-mb-1 h-96 w-full overflow-auto' ref={node} tabIndex={-1}>
         {results.map(([code, name]) => {

packages/pl-fe/src/pages/settings/aliases.tsx

@@ -27,6 +27,7 @@ const messages = defineMessages({
   add: { id: 'aliases.account.add', defaultMessage: 'Create alias' },
   search: { id: 'aliases.search', defaultMessage: 'Search your old account' },
   searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },
+  clear: { id: 'search.clear', defaultMessage: 'Clear input' },
 });
 
 interface IAccount {
@@ -93,6 +94,7 @@ const Search: React.FC<IAliasesSearch> = ({ onSubmit }) => {
   };
 
   const handleClear = () => {
+    setValue('');
     onSubmit('');
   };
 
@@ -112,9 +114,14 @@ const Search: React.FC<IAliasesSearch> = ({ onSubmit }) => {
           placeholder={intl.formatMessage(messages.search)}
         />
 
-        <div role='button' tabIndex={hasValue ? 0 : -1} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
+        <button
-          <Icon src={require('@phosphor-icons/core/regular/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('size-5 text-gray-600', { 'hidden': !hasValue })} />
+          disabled={!hasValue}
-        </div>
+          className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto'
+          onClick={handleClear}
+          title={intl.formatMessage(messages.clear)}
+        >
+          <Icon src={require('@phosphor-icons/core/regular/backspace.svg')} className={clsx('size-5 text-gray-600', { 'hidden': !hasValue })} />
+        </button>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
     </div>
@@ -130,7 +137,7 @@ const AliasesPage = () => {
   const { data: searchAccountIds = [], isFetched } = useSearchAccounts(query);
   const { mutate: deleteAccountAlias } = useDeleteAccountAlias();
 
-  const handleAliasDelete: React.MouseEventHandler<HTMLDivElement> = e => {
+  const handleAliasDelete: React.MouseEventHandler<HTMLButtonElement> = e => {
     deleteAccountAlias(e.currentTarget.dataset.value as string);
   };
 
@@ -168,10 +175,12 @@ const AliasesPage = () => {
                 {' '}
                 <Text tag='span'>{alias}</Text>
               </div>
-              <div className='flex items-center' role='button' tabIndex={0} onClick={handleAliasDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
+              <button onClick={handleAliasDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
-                <Icon className='mr-1.5' src={require('@phosphor-icons/core/regular/x.svg')} />
+                <Text theme='muted' className='flex items-center gap-1'>
-                <Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
+                  <Icon src={require('@phosphor-icons/core/regular/x.svg')} />
-              </div>
+                  <FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' />
+                </Text>
+              </button>
             </HStack>
           ))}
         </ScrollableList>