fix(ui): add accessible name to API Keys search input

.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.

packages/ui/src/components/APIKeys/APIKeys.tsx

@@ -162,7 +162,9 @@ 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={
                 <Icon
                   icon={MagnifyingGlass}
@@ -171,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)}

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();
+    });
+  });
 });