Accessibility guardrails and component hardening for twenty-ui (#21848)

Builds on twenty-ui's existing runtime axe gate by adding a static
enforcement layer and fixing accessibility gaps in shared components.
Color contrast is intentionally out of scope (still deferred via
`A11Y_DEFER_COLOR_CONTRAST`).

## What changed
- **Static guardrails:** enabled oxlint's `jsx-a11y` plugin
(keyboard-operability rules at `error`), and added a custom
`twenty/no-storybook-a11y-disable` rule that blocks `a11y: { test: 'off'
| 'todo' }` so the axe gate can't be silently disabled again.
- **Focus visibility:** wired the existing `focus-ring` mixin into all
buttons for real `:focus-visible` rings (was `outline: none`).
- **Decorative icons:** `aria-hidden` on icons inside labeled buttons
(added to `IconComponentProps` + render sites).
- **Inputs:** accessible-name support on `SearchInput` and `Checkbox`.
- **Interactive components:** `Tag` renders a real `<button>` when
clickable; the non-semantic clickable `div`s (`Avatar`, `Status`,
`ColorSchemeCard`, `NavigationBarItem`, etc.) are now keyboard-operable
via a shared `handleClickableElementKeyDown` helper, role and accessible
name.

## Notes for reviewers
- Two `oxlint-disable` lines remain on genuine non-interactive capture
wrappers (`CodeEditor`, `OverflowingTextWithTooltip`).
- 8 lint warnings remain by design: conditional-interactivity
`no-static-element-interactions` and legitimate `autoFocus` on
`SearchInput`.
- `NavigationBarItem` gained a required `ariaLabel`; its only consumer
(`MobileNavigationBar`) is updated with translated labels.

## Follow-ups (separate PRs)
- Enforced accessible names on icon-only buttons
(`IconButton`/`LightIconButton`) — breaking, ~128 call sites.
- `aria-activedescendant` wiring for the dropdown/listbox keyboard
layer.

<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21848?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

packages/twenty-ui/src/input/SearchInput/SearchInput.tsx

@@ -1,6 +1,6 @@
 import { Input } from '@base-ui/react/input';
 import { clsx } from 'clsx';
-import { type ReactNode, useContext, useState } from 'react';
+import { type ReactNode, useContext, useId, useState } from 'react';
 
 import { IconFilter, IconSearch } from '@ui/icon';
 import { IconButton } from '@ui/input/IconButton/IconButton';
@@ -16,6 +16,10 @@ export type SearchInputProps = {
   autoFocus?: boolean;
   disabled?: boolean;
   className?: string;
+  id?: string;
+  filterButtonAriaLabel?: string;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
 };
 
 export const SearchInput = ({
@@ -26,11 +30,23 @@ export const SearchInput = ({
   autoFocus,
   disabled,
   className,
+  id,
+  filterButtonAriaLabel = 'Filter',
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
 }: SearchInputProps) => {
   const { theme } = useContext(ThemeContext);
   const [isFocused, setIsFocused] = useState(false);
+  const generatedId = useId();
+  const inputId = id ?? generatedId;
 
-  const filterButton = <IconButton Icon={IconFilter} variant="secondary" />;
+  const filterButton = (
+    <IconButton
+      Icon={IconFilter}
+      variant="secondary"
+      ariaLabel={filterButtonAriaLabel}
+    />
+  );
 
   return (
     <div className={clsx(styles.wrapper, className)}>
@@ -38,10 +54,12 @@ export const SearchInput = ({
         <div
           className={styles.iconContainer}
           data-focused={isFocused || undefined}
+          aria-hidden
         >
           <IconSearch size={theme.icon.size.md} />
         </div>
         <Input
+          id={inputId}
           className={styles.input}
           value={value}
           onValueChange={(newValue) => onChange(newValue)}
@@ -50,6 +68,8 @@ export const SearchInput = ({
           placeholder={placeholder}
           autoFocus={autoFocus}
           disabled={disabled}
+          aria-label={ariaLabelledby ? undefined : (ariaLabel ?? placeholder)}
+          aria-labelledby={ariaLabelledby}
         />
       </div>
       {filterDropdown && filterDropdown(filterButton)}