pl-fe: seemingly accessibility improvements

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-01-06 04:45:27 +01:00
parent 4e91d696c7
commit f84cfd3c5f
19 changed files with 38 additions and 37 deletions

View File

@ -134,6 +134,8 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia, isLast }) =>
'hidden': visible,
'rounded-br-md': isLast,
})}
aria-label={!visible ? attachment.description : undefined}
aria-hidden={visible}
/>
{visible && thumbnail}
{!visible && icon}

View File

@ -77,13 +77,12 @@ const SearchInput: React.FC<ISearchInput> = ({ className, placeholder, query })
<div
className={clsx('z-10 w-full bg-white/90 backdrop-blur backdrop-saturate-200 black:bg-black/75 dark:bg-primary-900/90', className)}
>
<label htmlFor='search' className='sr-only'>{placeholder || intl.formatMessage(messages.placeholder)}</label>
<div className='relative'>
<Input
type='text'
id='search'
placeholder={placeholder || intl.formatMessage(messages.placeholder)}
aria-label={placeholder || intl.formatMessage(messages.placeholder)}
value={value}
onChange={handleChange}
onKeyDown={handleKeyDown}

View File

@ -102,9 +102,7 @@ const Search: React.FC<IAliasesSearch> = ({ onSubmit }) => {
return (
<div className='flex items-center gap-1'>
<label className='relative grow'>
<span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
<label className='relative grow' title={intl.formatMessage(messages.search)}>
<input
className='block w-full rounded-full focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
type='text'
@ -120,7 +118,7 @@ const Search: React.FC<IAliasesSearch> = ({ onSubmit }) => {
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 })} />
<Icon src={require('@phosphor-icons/core/regular/backspace.svg')} className={clsx('size-5 text-gray-600', { 'hidden': !hasValue })} aria-hidden />
</button>
</label>
<Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>