feat: remove excessive description from "Add a secret" dialog (#491)

* feat: remove excessive description from "Add a secret" dialog

note: the description is an accessibility requirement for screen
readers and our tests will fail without it, because radix ui issues
console warnings for it, and we fail our tests on console warnings.

this behavior makes sense, so instead of disabling it, I decided to
keep the description for screen readers (hence the sr-only class).

In order to make the behavior less confusing when refactoring/debugging
this area of the app, I also added a test case that verifies the
screen-reader behavior.

* replicate the same behavior for editing secrets

* refactor

* reduce distance between header and form in "add a secret"

Author: kantord

renderer/src/features/secrets/components/dialog-form-secret.tsx

@@ -86,7 +86,7 @@ export function DialogFormSecret({
       >
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>
+          <DialogDescription className="sr-only">
             {secretKey
               ? 'Update the secret value below.'
               : 'Enter a name and value for your new secret.'}
@@ -116,7 +116,7 @@ function SecretForm({ form, isEditMode, onSubmit, onCancel }: SecretFormProps) {
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(handleFormSubmit)}>
-        <div className="space-y-4 py-8">
+        <div className="space-y-4 pt-4 pb-8">
           {!isEditMode && (
             <FormField
               control={form.control}

renderer/src/routes/__tests__/secrets.test.tsx

@@ -50,13 +50,22 @@ it('renders add secret dialog when clicking add secret button', async () => {
   const addSecretButton = screen.getByRole('button', { name: /add secret/i })
   await userEvent.click(addSecretButton)
 
-  expect(
-    screen.getByText('Enter a name and value for your new secret.')
-  ).toBeInTheDocument()
   expect(screen.getByPlaceholderText('Name')).toBeInTheDocument()
   expect(screen.getByPlaceholderText('Secret')).toBeInTheDocument()
   expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument()
   expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument()
+
+  // Accessibility: check sr-only description and aria-describedby
+  const dialog = screen.getByRole('dialog')
+  const srDescription = Array.from(dialog.querySelectorAll('p,div,span')).find(
+    (el) =>
+      el.className.includes('sr-only') &&
+      el.textContent?.includes('Enter a name and value for your new secret.')
+  )
+  expect(srDescription).toBeTruthy()
+  const ariaDescribedBy = dialog.getAttribute('aria-describedby')
+  expect(ariaDescribedBy).toBeTruthy()
+  expect(srDescription?.id).toBe(ariaDescribedBy)
 })
 
 it('renders edit secret dialog when clicking edit from dropdown', async () => {
@@ -78,4 +87,16 @@ it('renders edit secret dialog when clicking edit from dropdown', async () => {
   expect(screen.getByPlaceholderText('Secret')).toBeInTheDocument()
   expect(screen.getByRole('button', { name: /update/i })).toBeInTheDocument()
   expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument()
+
+  // Accessibility: check sr-only and aria-describedby
+  const dialog = screen.getByRole('dialog')
+  const srDescription = Array.from(dialog.querySelectorAll('p,div,span')).find(
+    (el) =>
+      el.className.includes('sr-only') &&
+      el.textContent?.includes('Update the secret value below.')
+  )
+  expect(srDescription).toBeTruthy()
+  const ariaDescribedBy = dialog.getAttribute('aria-describedby')
+  expect(ariaDescribedBy).toBeTruthy()
+  expect(srDescription?.id).toBe(ariaDescribedBy)
 })