@open-mercato/ui 0.7.1-develop.7148.1.3076e5ccf7 → 0.7.1-develop.7149.1.7efa6e1612

package/dist/backend/views/ViewChip.js

@@ -28,51 +28,59 @@ function ViewChip({
   const t = useT();
   if (isRenaming) {
     const renameTrimmed = renameValue.trim();
-    return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1 rounded-md border border-primary bg-primary/5 px-3 h-8", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          value: renameValue,
-          onChange: (e) => onRenameValueChange(e.target.value),
-          className: "w-24 bg-transparent text-sm outline-none",
-          autoFocus: true,
-          onKeyDown: (e) => {
-            if (e.key === "Enter") onRenameConfirm();
-            if (e.key === "Escape") onRenameCancel();
-          }
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "xs",
-          className: "h-auto",
-          onClick: onRenameConfirm,
-          disabled: !renameTrimmed,
-          "aria-label": t("ui.perspectives.rename.confirm", "Confirm rename"),
-          children: /* @__PURE__ */ jsx(Check, { className: `size-4 ${renameTrimmed ? "text-brand-violet" : "text-muted-foreground opacity-50"}` })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "xs",
-          className: "h-auto",
-          onClick: onRenameCancel,
-          "aria-label": t("ui.perspectives.rename.cancel", "Cancel rename"),
-          children: /* @__PURE__ */ jsx(X, { className: "size-4 text-muted-foreground hover:text-destructive" })
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-active": isActive ? "true" : "false",
+        className: "inline-flex items-center gap-1 rounded-md border border-primary bg-primary/5 px-3 h-8",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: renameValue,
+              onChange: (e) => onRenameValueChange(e.target.value),
+              className: "w-24 bg-transparent text-sm outline-none",
+              autoFocus: true,
+              onKeyDown: (e) => {
+                if (e.key === "Enter") onRenameConfirm();
+                if (e.key === "Escape") onRenameCancel();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "xs",
+              className: "h-auto",
+              onClick: onRenameConfirm,
+              disabled: !renameTrimmed,
+              "aria-label": t("ui.perspectives.rename.confirm", "Confirm rename"),
+              children: /* @__PURE__ */ jsx(Check, { className: `size-4 ${renameTrimmed ? "text-brand-violet" : "text-muted-foreground opacity-50"}` })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "xs",
+              className: "h-auto",
+              onClick: onRenameCancel,
+              "aria-label": t("ui.perspectives.rename.cancel", "Cancel rename"),
+              children: /* @__PURE__ */ jsx(X, { className: "size-4 text-muted-foreground hover:text-destructive" })
+            }
+          )
+        ]
+      }
+    );
   }
   const showUsersIcon = kind === "role" || isShared;
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-active": isActive ? "true" : "false",
       className: `inline-flex items-center gap-0.5 rounded-md border h-8 text-sm ${isActive ? "bg-brand-violet/10 border-brand-violet/30 font-medium text-brand-violet" : "border-border"}`,
       children: [
         /* @__PURE__ */ jsxs(
@@ -84,6 +92,7 @@ function ViewChip({
             className: "h-auto px-3 py-0 text-sm hover:bg-transparent",
             onClick: onActivate,
             disabled,
+            "aria-current": isActive ? "true" : void 0,
             children: [
               showUsersIcon ? /* @__PURE__ */ jsx(Users, { className: "size-3 mr-1 opacity-50" }) : null,
               label

package/dist/backend/views/ViewChip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/views/ViewChip.tsx"],
-  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { Check, X, Users } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport { ViewChipMenu } from './ViewChipMenu'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\ntype Props = {\n  id: string\n  label: string\n  kind: 'personal' | 'role'\n  isActive: boolean\n  disabled: boolean\n  isShared: boolean\n  isRenaming: boolean\n  renameValue: string\n  canApplyToRoles: boolean\n  deleting: boolean\n  onActivate: () => void\n  onRenameValueChange: (value: string) => void\n  onRenameConfirm: () => void\n  onRenameCancel: () => void\n  onRenameStart?: () => void\n  onClone: () => void\n  onShareStart?: () => void\n  onDelete: () => void\n}\n\nexport function ViewChip({\n  id,\n  label,\n  kind,\n  isActive,\n  disabled,\n  isShared,\n  isRenaming,\n  renameValue,\n  canApplyToRoles,\n  deleting,\n  onActivate,\n  onRenameValueChange,\n  onRenameConfirm,\n  onRenameCancel,\n  onRenameStart,\n  onClone,\n  onShareStart,\n  onDelete,\n}: Props) {\n  const t = useT()\n\n  if (isRenaming) {\n    const renameTrimmed = renameValue.trim()\n    return (\n      <div className=\"inline-flex items-center gap-1 rounded-md border border-primary bg-primary/5 px-3 h-8\">\n        <input\n          value={renameValue}\n          onChange={(e) => onRenameValueChange(e.target.value)}\n          className=\"w-24 bg-transparent text-sm outline-none\"\n          autoFocus\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') onRenameConfirm()\n            if (e.key === 'Escape') onRenameCancel()\n          }}\n        />\n        <IconButton\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"xs\"\n          className=\"h-auto\"\n          onClick={onRenameConfirm}\n          disabled={!renameTrimmed}\n          aria-label={t('ui.perspectives.rename.confirm', 'Confirm rename')}\n        >\n          <Check className={`size-4 ${renameTrimmed ? 'text-brand-violet' : 'text-muted-foreground opacity-50'}`} />\n        </IconButton>\n        <IconButton\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"xs\"\n          className=\"h-auto\"\n          onClick={onRenameCancel}\n          aria-label={t('ui.perspectives.rename.cancel', 'Cancel rename')}\n        >\n          <X className=\"size-4 text-muted-foreground hover:text-destructive\" />\n        </IconButton>\n      </div>\n    )\n  }\n\n  const showUsersIcon = kind === 'role' || isShared\n\n  return (\n    <div\n      className={`inline-flex items-center gap-0.5 rounded-md border h-8 text-sm ${\n        isActive\n          ? 'bg-brand-violet/10 border-brand-violet/30 font-medium text-brand-violet'\n          : 'border-border'\n      }`}\n    >\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"h-auto px-3 py-0 text-sm hover:bg-transparent\"\n        onClick={onActivate}\n        disabled={disabled}\n      >\n        {showUsersIcon ? <Users className=\"size-3 mr-1 opacity-50\" /> : null}\n        {label}\n      </Button>\n      <ViewChipMenu\n        kind={kind}\n        canApplyToRoles={canApplyToRoles}\n        deleting={deleting}\n        onRenameStart={onRenameStart}\n        onClone={onClone}\n        onShareStart={onShareStart}\n        onDelete={onDelete}\n      />\n    </div>\n  )\n}\n"],
-  "mappings": ";AAsDM,SACE,KADF;AApDN,SAAS,OAAO,GAAG,aAAa;AAChC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AAuBd,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAU;AACR,QAAM,IAAI,KAAK;AAEf,MAAI,YAAY;AACd,UAAM,gBAAgB,YAAY,KAAK;AACvC,WACE,qBAAC,SAAI,WAAU,yFACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,oBAAoB,EAAE,OAAO,KAAK;AAAA,UACnD,WAAU;AAAA,UACV,WAAS;AAAA,UACT,WAAW,CAAC,MAAM;AAChB,gBAAI,EAAE,QAAQ,QAAS,iBAAgB;AACvC,gBAAI,EAAE,QAAQ,SAAU,gBAAe;AAAA,UACzC;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS;AAAA,UACT,UAAU,CAAC;AAAA,UACX,cAAY,EAAE,kCAAkC,gBAAgB;AAAA,UAEhE,8BAAC,SAAM,WAAW,UAAU,gBAAgB,sBAAsB,kCAAkC,IAAI;AAAA;AAAA,MAC1G;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS;AAAA,UACT,cAAY,EAAE,iCAAiC,eAAe;AAAA,UAE9D,8BAAC,KAAE,WAAU,uDAAsD;AAAA;AAAA,MACrE;AAAA,OACF;AAAA,EAEJ;AAEA,QAAM,gBAAgB,SAAS,UAAU;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,kEACT,WACI,4EACA,eACN;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS;AAAA,YACT;AAAA,YAEC;AAAA,8BAAgB,oBAAC,SAAM,WAAU,0BAAyB,IAAK;AAAA,cAC/D;AAAA;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["\"use client\"\nimport * as React from 'react'\nimport { Check, X, Users } from 'lucide-react'\nimport { Button } from '../../primitives/button'\nimport { IconButton } from '../../primitives/icon-button'\nimport { ViewChipMenu } from './ViewChipMenu'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\ntype Props = {\n  id: string\n  label: string\n  kind: 'personal' | 'role'\n  isActive: boolean\n  disabled: boolean\n  isShared: boolean\n  isRenaming: boolean\n  renameValue: string\n  canApplyToRoles: boolean\n  deleting: boolean\n  onActivate: () => void\n  onRenameValueChange: (value: string) => void\n  onRenameConfirm: () => void\n  onRenameCancel: () => void\n  onRenameStart?: () => void\n  onClone: () => void\n  onShareStart?: () => void\n  onDelete: () => void\n}\n\nexport function ViewChip({\n  id,\n  label,\n  kind,\n  isActive,\n  disabled,\n  isShared,\n  isRenaming,\n  renameValue,\n  canApplyToRoles,\n  deleting,\n  onActivate,\n  onRenameValueChange,\n  onRenameConfirm,\n  onRenameCancel,\n  onRenameStart,\n  onClone,\n  onShareStart,\n  onDelete,\n}: Props) {\n  const t = useT()\n\n  if (isRenaming) {\n    const renameTrimmed = renameValue.trim()\n    return (\n      <div\n        data-active={isActive ? 'true' : 'false'}\n        className=\"inline-flex items-center gap-1 rounded-md border border-primary bg-primary/5 px-3 h-8\"\n      >\n        <input\n          value={renameValue}\n          onChange={(e) => onRenameValueChange(e.target.value)}\n          className=\"w-24 bg-transparent text-sm outline-none\"\n          autoFocus\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') onRenameConfirm()\n            if (e.key === 'Escape') onRenameCancel()\n          }}\n        />\n        <IconButton\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"xs\"\n          className=\"h-auto\"\n          onClick={onRenameConfirm}\n          disabled={!renameTrimmed}\n          aria-label={t('ui.perspectives.rename.confirm', 'Confirm rename')}\n        >\n          <Check className={`size-4 ${renameTrimmed ? 'text-brand-violet' : 'text-muted-foreground opacity-50'}`} />\n        </IconButton>\n        <IconButton\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"xs\"\n          className=\"h-auto\"\n          onClick={onRenameCancel}\n          aria-label={t('ui.perspectives.rename.cancel', 'Cancel rename')}\n        >\n          <X className=\"size-4 text-muted-foreground hover:text-destructive\" />\n        </IconButton>\n      </div>\n    )\n  }\n\n  const showUsersIcon = kind === 'role' || isShared\n\n  return (\n    <div\n      data-active={isActive ? 'true' : 'false'}\n      className={`inline-flex items-center gap-0.5 rounded-md border h-8 text-sm ${\n        isActive\n          ? 'bg-brand-violet/10 border-brand-violet/30 font-medium text-brand-violet'\n          : 'border-border'\n      }`}\n    >\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"h-auto px-3 py-0 text-sm hover:bg-transparent\"\n        onClick={onActivate}\n        disabled={disabled}\n        aria-current={isActive ? 'true' : undefined}\n      >\n        {showUsersIcon ? <Users className=\"size-3 mr-1 opacity-50\" /> : null}\n        {label}\n      </Button>\n      <ViewChipMenu\n        kind={kind}\n        canApplyToRoles={canApplyToRoles}\n        deleting={deleting}\n        onRenameStart={onRenameStart}\n        onClone={onClone}\n        onShareStart={onShareStart}\n        onDelete={onDelete}\n      />\n    </div>\n  )\n}\n"],
+  "mappings": ";AAsDM,SAIE,KAJF;AApDN,SAAS,OAAO,GAAG,aAAa;AAChC,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AAuBd,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAU;AACR,QAAM,IAAI,KAAK;AAEf,MAAI,YAAY;AACd,UAAM,gBAAgB,YAAY,KAAK;AACvC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa,WAAW,SAAS;AAAA,QACjC,WAAU;AAAA,QAEV;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,oBAAoB,EAAE,OAAO,KAAK;AAAA,cACnD,WAAU;AAAA,cACV,WAAS;AAAA,cACT,WAAW,CAAC,MAAM;AAChB,oBAAI,EAAE,QAAQ,QAAS,iBAAgB;AACvC,oBAAI,EAAE,QAAQ,SAAU,gBAAe;AAAA,cACzC;AAAA;AAAA,UACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,cACT,UAAU,CAAC;AAAA,cACX,cAAY,EAAE,kCAAkC,gBAAgB;AAAA,cAEhE,8BAAC,SAAM,WAAW,UAAU,gBAAgB,sBAAsB,kCAAkC,IAAI;AAAA;AAAA,UAC1G;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,cACT,cAAY,EAAE,iCAAiC,eAAe;AAAA,cAE9D,8BAAC,KAAE,WAAU,uDAAsD;AAAA;AAAA,UACrE;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,QAAM,gBAAgB,SAAS,UAAU;AAEzC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,WAAW,SAAS;AAAA,MACjC,WAAW,kEACT,WACI,4EACA,eACN;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS;AAAA,YACT;AAAA,YACA,gBAAc,WAAW,SAAS;AAAA,YAEjC;AAAA,8BAAgB,oBAAC,SAAM,WAAU,0BAAyB,IAAK;AAAA,cAC/D;AAAA;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.7.1-develop.7148.1.3076e5ccf7",
+  "version": "0.7.1-develop.7149.1.7efa6e1612",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,14 +155,14 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.7.1-develop.7148.1.3076e5ccf7",
+    "@open-mercato/shared": "0.7.1-develop.7149.1.7efa6e1612",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
-    "@open-mercato/shared": "0.7.1-develop.7148.1.3076e5ccf7",
+    "@open-mercato/shared": "0.7.1-develop.7149.1.7efa6e1612",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.1",

package/src/backend/__tests__/ViewChip.activeState.test.tsx

@@ -0,0 +1,76 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { screen } from '@testing-library/react'
+import { ViewChip } from '../views/ViewChip'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+
+// Coverage for issue #5846: the chip's "this view is active" state used to live
+// only in its Tailwind classes (`bg-brand-violet/10 border-brand-violet/30 ...`),
+// so the only way to assert it was to string-match `className` on `.parentElement`.
+// That broke on any restyle and left the state invisible to assistive technology.
+// The chip now carries `data-active` on its root and `aria-current` on the button
+// the user actually activates, mirroring how `pagination.tsx` marks the current page.
+
+type ChipProps = React.ComponentProps<typeof ViewChip>
+
+function renderChip(overrides: Partial<ChipProps> = {}) {
+  const props: ChipProps = {
+    id: 'view-1',
+    label: 'My view',
+    kind: 'personal',
+    isActive: false,
+    disabled: false,
+    isShared: false,
+    isRenaming: false,
+    renameValue: '',
+    canApplyToRoles: false,
+    deleting: false,
+    onActivate: jest.fn(),
+    onRenameValueChange: jest.fn(),
+    onRenameConfirm: jest.fn(),
+    onRenameCancel: jest.fn(),
+    onClone: jest.fn(),
+    onDelete: jest.fn(),
+    ...overrides,
+  }
+  return renderWithProviders(<ViewChip {...props} />, { dict: {} })
+}
+
+describe('ViewChip active-state hook', () => {
+  it('marks the active chip with data-active="true" and aria-current on its activate button', () => {
+    const { container } = renderChip({ isActive: true, label: 'Active view' })
+
+    expect(container.querySelector('[data-active="true"]')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Active view' })).toHaveAttribute('aria-current', 'true')
+  })
+
+  it('marks an inactive chip with data-active="false" and omits aria-current entirely', () => {
+    const { container } = renderChip({ isActive: false, label: 'Inactive view' })
+
+    expect(container.querySelector('[data-active="false"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-active="true"]')).toBeNull()
+    expect(screen.getByRole('button', { name: 'Inactive view' })).not.toHaveAttribute('aria-current')
+  })
+
+  it('exposes the active state without depending on the chip styling', () => {
+    const { container } = renderChip({ isActive: true, label: 'Styled view' })
+
+    const chip = container.querySelector('[data-active]') as HTMLElement
+    expect(chip).toBeInTheDocument()
+
+    // Strip every class off the chip: the semantic hook must survive a restyle
+    // that drops or renames the `border-brand-violet/30` marker the old assertion read.
+    chip.className = ''
+    expect(chip.getAttribute('data-active')).toBe('true')
+    expect(screen.getByRole('button', { name: 'Styled view' })).toHaveAttribute('aria-current', 'true')
+  })
+
+  it('keeps the hook on the chip root while the view is being renamed', () => {
+    const { container } = renderChip({ isActive: true, isRenaming: true, renameValue: 'Draft name' })
+
+    expect(container.querySelector('[data-active="true"]')).toBeInTheDocument()
+  })
+})

package/src/backend/views/ViewChip.tsx

@@ -52,7 +52,10 @@ export function ViewChip({
   if (isRenaming) {
     const renameTrimmed = renameValue.trim()
     return (
-      <div className="inline-flex items-center gap-1 rounded-md border border-primary bg-primary/5 px-3 h-8">
+      <div
+        data-active={isActive ? 'true' : 'false'}
+        className="inline-flex items-center gap-1 rounded-md border border-primary bg-primary/5 px-3 h-8"
+      >
         <input
           value={renameValue}
           onChange={(e) => onRenameValueChange(e.target.value)}
@@ -92,6 +95,7 @@ export function ViewChip({
 
   return (
     <div
+      data-active={isActive ? 'true' : 'false'}
       className={`inline-flex items-center gap-0.5 rounded-md border h-8 text-sm ${
         isActive
           ? 'bg-brand-violet/10 border-brand-violet/30 font-medium text-brand-violet'
@@ -105,6 +109,7 @@ export function ViewChip({
         className="h-auto px-3 py-0 text-sm hover:bg-transparent"
         onClick={onActivate}
         disabled={disabled}
+        aria-current={isActive ? 'true' : undefined}
       >
         {showUsersIcon ? <Users className="size-3 mr-1 opacity-50" /> : null}
         {label}