From e44143db8c99acddfd94bf188cd061ba670d9e69 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Tue, 24 Jun 2025 16:36:05 +0200
Subject: [PATCH] [Glitch] fix: Fix inaccessible "Clear search" button

Port 8ba1487f30685fff4555a7537d3e6c765c73a07c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../flavours/glitch/components/icon.tsx       |  8 +-
 .../flavours/glitch/components/media_icon.tsx |  2 +-
 .../flavours/glitch/components/poll.tsx       |  2 +-
 .../glitch/components/status_icons.jsx        |  6 +-
 .../glitch/components/visibility_icon.tsx     |  2 +-
 .../components/account_header.tsx             |  2 +-
 .../features/compose/components/search.tsx    | 44 +++++++---
 .../flavours/glitch/styles/components.scss    | 82 ++++++++++---------
 8 files changed, 84 insertions(+), 64 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/icon.tsx b/app/javascript/flavours/glitch/components/icon.tsx
index 052833fedd..c122796103 100644
--- a/app/javascript/flavours/glitch/components/icon.tsx
+++ b/app/javascript/flavours/glitch/components/icon.tsx
@@ -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}
     />
diff --git a/app/javascript/flavours/glitch/components/media_icon.tsx b/app/javascript/flavours/glitch/components/media_icon.tsx
index 61082fa243..2702d2fc8e 100644
--- a/app/javascript/flavours/glitch/components/media_icon.tsx
+++ b/app/javascript/flavours/glitch/components/media_icon.tsx
@@ -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'
     />
   );
diff --git a/app/javascript/flavours/glitch/components/poll.tsx b/app/javascript/flavours/glitch/components/poll.tsx
index 18d5be1ff1..c7de102a12 100644
--- a/app/javascript/flavours/glitch/components/poll.tsx
+++ b/app/javascript/flavours/glitch/components/poll.tsx
@@ -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>
         )}
diff --git a/app/javascript/flavours/glitch/components/status_icons.jsx b/app/javascript/flavours/glitch/components/status_icons.jsx
index cceffd78cc..63f443952e 100644
--- a/app/javascript/flavours/glitch/components/status_icons.jsx
+++ b/app/javascript/flavours/glitch/components/status_icons.jsx
@@ -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')} />}
diff --git a/app/javascript/flavours/glitch/components/visibility_icon.tsx b/app/javascript/flavours/glitch/components/visibility_icon.tsx
index 1ae2c24272..a909c86706 100644
--- a/app/javascript/flavours/glitch/components/visibility_icon.tsx
+++ b/app/javascript/flavours/glitch/components/visibility_icon.tsx
@@ -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'}
     />
   );
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx b/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx
index 71ef726ca1..9fdee48394 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/account_header.tsx
@@ -772,7 +772,7 @@ export const AccountHeader: React.FC<{
       <Icon
         id='lock'
         icon={LockIcon}
-        title={intl.formatMessage(messages.account_locked)}
+        aria-label={intl.formatMessage(messages.account_locked)}
       />
     );
   }
diff --git a/app/javascript/flavours/glitch/features/compose/components/search.tsx b/app/javascript/flavours/glitch/features/compose/components/search.tsx
index cb94930ffc..4001ba73ef 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search.tsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search.tsx
@@ -29,6 +29,7 @@ import { HASHTAG_REGEX } from 'flavours/glitch/utils/hashtags';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
+  clearSearch: { id: 'search.clear', defaultMessage: 'Clear search' },
   placeholderSignedIn: {
     id: 'search.search_or_paste',
     defaultMessage: 'Search or paste URL',
@@ -50,6 +51,34 @@ const unfocus = () => {
   document.querySelector('.ui')?.parentElement?.focus();
 };
 
+const ClearButton: React.FC<{
+  onClick: () => void;
+  hasValue: boolean;
+}> = ({ onClick, hasValue }) => {
+  const intl = useIntl();
+
+  return (
+    <div
+      className={classNames('search__icon-wrapper', { 'has-value': hasValue })}
+    >
+      <Icon id='search' icon={SearchIcon} className='search__icon' />
+      <button
+        type='button'
+        onClick={onClick}
+        className='search__icon search__icon--clear-button'
+        tabIndex={hasValue ? undefined : -1}
+        aria-hidden={!hasValue}
+      >
+        <Icon
+          id='times-circle'
+          icon={CancelIcon}
+          aria-label={intl.formatMessage(messages.clearSearch)}
+        />
+      </button>
+    </div>
+  );
+};
+
 interface SearchOption {
   key: string;
   label: React.ReactNode;
@@ -380,6 +409,7 @@ export const Search: React.FC<{
     setValue('');
     setQuickActions([]);
     setSelectedOption(-1);
+    unfocus();
   }, [setValue, setQuickActions, setSelectedOption]);
 
   const handleKeyDown = useCallback(
@@ -474,19 +504,7 @@ export const Search: React.FC<{
         onBlur={handleBlur}
       />
 
-      <button type='button' className='search__icon' onClick={handleClear}>
-        <Icon
-          id='search'
-          icon={SearchIcon}
-          className={hasValue ? '' : 'active'}
-        />
-        <Icon
-          id='times-circle'
-          icon={CancelIcon}
-          className={hasValue ? 'active' : ''}
-          aria-label={intl.formatMessage(messages.placeholder)}
-        />
-      </button>
+      <ClearButton hasValue={hasValue} onClick={handleClear} />
 
       <div className='search__popout'>
         {!hasValue && (
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 86a05d9b31..916805c11f 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -5907,18 +5907,47 @@ a.status-card {
   }
 }
 
-.search__icon {
-  background: transparent;
-  border: 0;
-  padding: 0;
+.search__icon-wrapper {
   position: absolute;
-  top: 12px + 2px;
-  cursor: default;
-  pointer-events: none;
+  top: 14px;
+  display: grid;
   margin-inline-start: 16px - 2px;
   width: 20px;
   height: 20px;
 
+  .icon {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:not(.has-value) {
+    pointer-events: none;
+  }
+}
+
+.search__icon {
+  grid-area: 1 / 1;
+  transition: all 100ms linear;
+  transition-property: transform, opacity;
+  color: $darker-text-color;
+}
+
+.search__icon.icon-search {
+  .has-value & {
+    pointer-events: none;
+    opacity: 0;
+    transform: rotate(90deg);
+  }
+}
+
+.search__icon--clear-button {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+
   &::-moz-focus-inner {
     border: 0;
   }
@@ -5928,39 +5957,14 @@ a.status-card {
     outline: 0 !important;
   }
 
-  .icon {
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
+  &:focus-visible {
+    box-shadow: 0 0 0 2px $ui-button-focus-outline-color;
+  }
+
+  &[aria-hidden='true'] {
+    pointer-events: none;
     opacity: 0;
-    transition: all 100ms linear;
-    transition-property: transform, opacity;
-    width: 20px;
-    height: 20px;
-    color: $darker-text-color;
-
-    &.active {
-      pointer-events: auto;
-      opacity: 1;
-    }
-  }
-
-  .icon-search {
-    transform: rotate(90deg);
-
-    &.active {
-      pointer-events: none;
-      transform: rotate(0deg);
-    }
-  }
-
-  .icon-times-circle {
-    transform: rotate(0deg);
-    cursor: pointer;
-
-    &.active {
-      transform: rotate(90deg);
-    }
+    transform: rotate(-90deg);
   }
 }