pl-fe: seemingly accessibility improvements
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user