From 33823285e8975b3e483d6ab49edbbbc9735b1737 Mon Sep 17 00:00:00 2001
From: Max Yinger <max.yinger@clerk.dev>
Date: Tue, 30 Jun 2026 14:42:56 -0600
Subject: [PATCH 1/2] fix(ui): add accessible name to API Keys search input

---
 .changeset/dirty-rockets-read.md                     |  5 +++++
 packages/ui/src/components/APIKeys/APIKeys.tsx       |  1 +
 .../components/APIKeys/__tests__/APIKeys.spec.tsx    | 12 ++++++++++++
 3 files changed, 18 insertions(+)
 create mode 100644 .changeset/dirty-rockets-read.md

diff --git a/.changeset/dirty-rockets-read.md b/.changeset/dirty-rockets-read.md
new file mode 100644
index 00000000000..b60162c3c2c
--- /dev/null
+++ b/.changeset/dirty-rockets-read.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Add an accessible name to the API Keys search input so screen readers announce it correctly.
diff --git a/packages/ui/src/components/APIKeys/APIKeys.tsx b/packages/ui/src/components/APIKeys/APIKeys.tsx
index d5a5d2b2a09..0663fc559de 100644
--- a/packages/ui/src/components/APIKeys/APIKeys.tsx
+++ b/packages/ui/src/components/APIKeys/APIKeys.tsx
@@ -163,6 +163,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
           <Box elementDescriptor={descriptors.apiKeysSearchBox}>
             <InputWithIcon
               placeholder={t(localizationKeys('apiKeys.action__search'))}
+              aria-label={t(localizationKeys('apiKeys.action__search'))}
               leftIcon={
                 <Icon
                   icon={MagnifyingGlass}
diff --git a/packages/ui/src/components/APIKeys/__tests__/APIKeys.spec.tsx b/packages/ui/src/components/APIKeys/__tests__/APIKeys.spec.tsx
index b6e0a847c24..282df649758 100644
--- a/packages/ui/src/components/APIKeys/__tests__/APIKeys.spec.tsx
+++ b/packages/ui/src/components/APIKeys/__tests__/APIKeys.spec.tsx
@@ -79,4 +79,16 @@ describe('APIKeys', () => {
       expect(getByText(/No API keys found/i)).toBeVisible();
     });
   });
+
+  it('exposes an accessible label on the search input', async () => {
+    const { wrapper } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['test@clerk.com'] });
+    });
+
+    const { getByRole } = render(<APIKeys />, { wrapper });
+
+    await waitFor(() => {
+      expect(getByRole('searchbox', { name: /search keys/i })).toBeVisible();
+    });
+  });
 });

From 650911eb0f6731b07ee68484c888d5d70c9e6afa Mon Sep 17 00:00:00 2001
From: Max Yinger <max.yinger@clerk.dev>
Date: Tue, 30 Jun 2026 15:24:45 -0600
Subject: [PATCH 2/2] suppress chrome input warning. turn off autocomplete

---
 packages/ui/src/components/APIKeys/APIKeys.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/ui/src/components/APIKeys/APIKeys.tsx b/packages/ui/src/components/APIKeys/APIKeys.tsx
index 0663fc559de..bf018663e22 100644
--- a/packages/ui/src/components/APIKeys/APIKeys.tsx
+++ b/packages/ui/src/components/APIKeys/APIKeys.tsx
@@ -162,6 +162,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
         >
           <Box elementDescriptor={descriptors.apiKeysSearchBox}>
             <InputWithIcon
+              name='apiKeysSearch'
               placeholder={t(localizationKeys('apiKeys.action__search'))}
               aria-label={t(localizationKeys('apiKeys.action__search'))}
               leftIcon={
@@ -172,6 +173,7 @@ export const APIKeysPage = ({ subject, perPage, revokeModalRoot }: APIKeysPagePr
               }
               value={searchValue}
               type='search'
+              autoComplete='off'
               autoCapitalize='none'
               spellCheck={false}
               onChange={e => setSearchValue(e.target.value)}