[Glitch] fix: Fix inaccessible "Clear search" button

Port 8ba1487f30 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
diondiondion
2025-06-24 16:36:05 +02:00
committed by Claire
parent 73f77edf40
commit e44143db8c
8 changed files with 84 additions and 64 deletions

View File

@@ -13,14 +13,13 @@ interface Props extends React.SVGProps<SVGSVGElement> {
children?: never;
id: string;
icon: IconProp;
title?: string;
}
export const Icon: React.FC<Props> = ({
id,
icon: IconComponent,
className,
title: titleProp,
'aria-label': ariaLabel,
...other
}) => {
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -34,18 +33,19 @@ export const Icon: React.FC<Props> = ({
IconComponent = CheckBoxOutlineBlankIcon;
}
const ariaHidden = titleProp ? undefined : true;
const ariaHidden = ariaLabel ? undefined : true;
const role = !ariaHidden ? 'img' : undefined;
// Set the title to an empty string to remove the built-in SVG one if any
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const title = titleProp || '';
const title = ariaLabel || '';
return (
<IconComponent
className={classNames('icon', `icon-${id}`, className)}
title={title}
aria-hidden={ariaHidden}
aria-label={ariaLabel}
role={role}
{...other}
/>

View File

@@ -48,7 +48,7 @@ export const MediaIcon: React.FC<{
className={className}
id={icon}
icon={iconComponents[icon]}
title={intl.formatMessage(messages[icon])}
aria-label={intl.formatMessage(messages[icon])}
aria-hidden='true'
/>
);

View File

@@ -318,7 +318,7 @@ const PollOption: React.FC<PollOptionProps> = (props) => {
id='check'
icon={CheckIcon}
className='poll__voted__mark'
title={intl.formatMessage(messages.voted)}
aria-label={intl.formatMessage(messages.voted)}
/>
</span>
)}

View File

@@ -61,16 +61,14 @@ class StatusIcons extends PureComponent {
className='status__reply-icon'
id='comment'
icon={ForumIcon}
aria-hidden='true'
title={intl.formatMessage(messages.inReplyTo)}
aria-label={intl.formatMessage(messages.inReplyTo)}
/>
) : null}
{settings.get('local_only') && status.get('local_only') &&
<Icon
id='home'
icon={HomeIcon}
aria-hidden='true'
title={intl.formatMessage(messages.localOnly)}
aria-label={intl.formatMessage(messages.localOnly)}
/>}
{settings.get('media') && !!mediaIcons && mediaIcons.map(icon => (<MediaIcon key={`media-icon--${icon}`} className='status__media-icon' icon={icon} />))}
{settings.get('visibility') && <VisibilityIcon visibility={status.get('visibility')} />}

View File

@@ -58,7 +58,7 @@ export const VisibilityIcon: React.FC<{ visibility: StatusVisibility }> = ({
<Icon
id={visibilityIcon.icon}
icon={visibilityIcon.iconComponent}
title={visibilityIcon.text}
aria-label={visibilityIcon.text}
className={'status__visibility-icon'}
/>
);