fix(a11y): correct call-control aria + picker/recorder/live-chip UX (DP7-DP12)

DP7: fix inverted Deafen/Undeafen aria-label on the sound button so it
  matches the action and tooltip.
DP8: add aria-pressed to Sound/Video/ScreenShare toggles and align the
  Microphone toggle to the same "pressed = feature on/active" semantic.
DP9: return focus to the trigger when the GifPicker closes and cap its
  fixed width to min(312px, calc(100vw - 16px)) so it can't overflow
  narrow viewports.
DP10: drop redundant mouse-only clear onClick nested inside the search
  filter Chip buttons (parent chip/menu already performs the clear);
  the cross icons are now purely decorative.
DP11: constrain the voice recorder widget and let the waveform shrink so
  it fits a narrow composer, and expose the live duration as a role="timer"
  snapshot instead of spamming a screen reader every 100ms.
DP12: announce the live-call participant count via a visually-hidden
  role="status" region.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/message-search/SearchFilters.tsx

@@ -643,18 +643,7 @@ function DateRangeButton({ fromTs, toTs, onChange }: DateRangeButtonProps) {
         variant={hasRange ? 'Primary' : 'SurfaceVariant'}
         radii="Pill"
         before={<Icon size="100" src={Icons.RecentClock} />}
-        after={
-          hasRange ? (
-            <Icon
-              size="50"
-              src={Icons.Cross}
-              onClick={(e) => {
-                e.stopPropagation();
-                onChange(undefined, undefined);
-              }}
-            />
-          ) : undefined
-        }
+        after={hasRange ? <Icon size="50" src={Icons.Cross} /> : undefined}
         onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
           setMenuAnchor(e.currentTarget.getBoundingClientRect())
         }
@@ -795,18 +784,7 @@ export function SearchFilters({
           radii="Pill"
           aria-pressed={!!containsUrl}
           before={<Icon size="100" src={Icons.Link} />}
-          after={
-            containsUrl ? (
-              <Icon
-                size="50"
-                src={Icons.Cross}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onContainsUrlChange(undefined);
-                }}
-              />
-            ) : undefined
-          }
+          after={containsUrl ? <Icon size="50" src={Icons.Cross} /> : undefined}
           onClick={() => onContainsUrlChange(containsUrl ? undefined : true)}
         >
           <Text size="T200">Has link</Text>
@@ -821,18 +799,7 @@ export function SearchFilters({
               radii="Pill"
               aria-pressed={active}
               before={<Icon size="100" src={icon} />}
-              after={
-                active ? (
-                  <Icon
-                    size="50"
-                    src={Icons.Cross}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onToggleMsgTypeFilter(msgType);
-                    }}
-                  />
-                ) : undefined
-              }
+              after={active ? <Icon size="50" src={Icons.Cross} /> : undefined}
               onClick={() => onToggleMsgTypeFilter(msgType)}
             >
               <Text size="T200">{label}</Text>
@@ -845,18 +812,7 @@ export function SearchFilters({
           radii="Pill"
           aria-pressed={pinnedOnly}
           before={<Icon size="100" src={Icons.Pin} />}
-          after={
-            pinnedOnly ? (
-              <Icon
-                size="50"
-                src={Icons.Cross}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onTogglePinnedOnly();
-                }}
-              />
-            ) : undefined
-          }
+          after={pinnedOnly ? <Icon size="50" src={Icons.Cross} /> : undefined}
           onClick={onTogglePinnedOnly}
         >
           <Text size="T200">Pinned</Text>