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-front/src/modules/navigation/components/MobileNavigationBar.tsx

@@ -1,3 +1,5 @@
+import { useLingui } from '@lingui/react/macro';
+
 import { useSwitchToNewAiChat } from '@/ai/hooks/useSwitchToNewAiChat';
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
@@ -27,6 +29,7 @@ import { PermissionFlagType } from '~/generated-metadata/graphql';
 type NavigationBarItemName = 'main' | 'search' | 'newAiChat';
 
 export const MobileNavigationBar = () => {
+  const { t } = useLingui();
   const navigate = useNavigate();
   const { defaultHomePagePath } = useDefaultHomePagePath();
   const isSidePanelOpened = useAtomStateValue(isSidePanelOpenedState);
@@ -56,11 +59,13 @@ export const MobileNavigationBar = () => {
 
   const items: {
     name: NavigationBarItemName;
+    label: string;
     Icon: IconComponent;
     onClick: () => void;
   }[] = [
     {
       name: 'main',
+      label: t`Main navigation`,
       Icon: IconList,
       onClick: () => {
         closeSidePanelMenu();
@@ -80,6 +85,7 @@ export const MobileNavigationBar = () => {
     },
     {
       name: 'search',
+      label: t`Search`,
       Icon: IconSearch,
       onClick: () => {
         setIsNavigationDrawerExpanded(false);
@@ -102,6 +108,7 @@ export const MobileNavigationBar = () => {
       ? [
           {
             name: 'newAiChat' as const,
+            label: t`New AI chat`,
             Icon: IconMessageCirclePlus,
             onClick: () => {
               setIsNavigationDrawerExpanded(false);

packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/__stories__/NavigationBar.stories.tsx

@@ -16,10 +16,25 @@ const meta: Meta<typeof NavigationBar> = {
   args: {
     activeItemName: 'main',
     items: [
-      { name: 'main', Icon: IconList, onClick: () => undefined },
-      { name: 'search', Icon: IconSearch, onClick: () => undefined },
-      { name: 'tasks', Icon: IconCheckbox, onClick: () => undefined },
-      { name: 'settings', Icon: IconSettings, onClick: () => undefined },
+      { name: 'main', label: 'Main', Icon: IconList, onClick: () => undefined },
+      {
+        name: 'search',
+        label: 'Search',
+        Icon: IconSearch,
+        onClick: () => undefined,
+      },
+      {
+        name: 'tasks',
+        label: 'Tasks',
+        Icon: IconCheckbox,
+        onClick: () => undefined,
+      },
+      {
+        name: 'settings',
+        label: 'Settings',
+        Icon: IconSettings,
+        onClick: () => undefined,
+      },
     ],
   },
 };