matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: make search clear/submit button accessible

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-31 14:08:22 +01:00
parent e1986fb670
commit 8b670c4528
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/pl-fe/src/components/search-input.tsx
View File

@ -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>
);

10
packages/pl-fe/src/pages/search/search.tsx
View File

@ -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>
);