From 50bc7c415933f25c751654f0ef3e6b96f131c9c7 Mon Sep 17 00:00:00 2001
From: "Gabriel A. Devenyi" <gdevenyi@gmail.com>
Date: Mon, 9 Nov 2026 23:16:57 -0500
Subject: [PATCH] fix(Form): use the visible label as the accessible name of
 the submit and reset buttons

The buttons had hard-coded aria-label values ("Submit", "Reset"). These
overrode a custom submitBtnLabel and the translated default labels.

Closes #108

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01W53iUP9ECVtoteopM7QtC7
---
 src/components/Form/Form.test.tsx | 34 +++++++++++++++++++++++++++++--
 src/components/Form/Form.tsx      |  3 ---
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/components/Form/Form.test.tsx b/src/components/Form/Form.test.tsx
index be37550..11f187e 100644
--- a/src/components/Form/Form.test.tsx
+++ b/src/components/Form/Form.test.tsx
@@ -258,8 +258,6 @@ describe('Form', () => {
       return screen.getByLabelText<HTMLInputElement>('Name');
     };
 
-    // The button is identified by its aria-label, so the query does not depend on the resolved
-    // translation for the visible text.
     const getResetButton = () => screen.getByRole('button', { name: 'Reset' });
 
     afterEach(() => {
@@ -399,4 +397,36 @@ describe('Form', () => {
       expect(onSubmit).toHaveBeenCalledWith({ symptoms: new Set(['none']) });
     });
   });
+
+  describe('button accessible names', () => {
+    const renderForm = (props?: { resetBtn?: boolean; submitBtnLabel?: string }) => {
+      render(
+        <Form
+          content={{ name: { kind: 'string', label: 'Name', variant: 'input' } }}
+          data-testid={testid}
+          validationSchema={z.object({ name: z.string() })}
+          onSubmit={onSubmit}
+          {...props}
+        />
+      );
+    };
+
+    it('should name the submit button after its default visible label', () => {
+      renderForm();
+      expect(screen.getByRole('button', { name: 'Submit' })).toHaveAttribute('type', 'submit');
+    });
+
+    it('should name the submit button after a custom submitBtnLabel', () => {
+      renderForm({ submitBtnLabel: 'Save' });
+      expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute('type', 'submit');
+      expect(screen.queryByRole('button', { name: 'Submit' })).not.toBeInTheDocument();
+    });
+
+    it('should not override the visible text of either button with an aria-label', () => {
+      renderForm({ resetBtn: true });
+      for (const button of screen.getAllByRole('button')) {
+        expect(button).not.toHaveAttribute('aria-label');
+      }
+    });
+  });
 });
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index ae2472d..753e0ea 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -251,9 +251,7 @@ const Form = <TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['
       {fieldsFooter}
       <div className="flex w-full gap-3">
         {additionalButtons?.left}
-        {/** Note - aria-label is used for testing in downstream packages */}
         <Button
-          aria-label="Submit"
           className={cn('flex w-full items-center justify-center gap-2', customStyles?.submitBtn)}
           disabled={readOnly || isSuspended}
           type="submit"
@@ -277,7 +275,6 @@ const Form = <TSchema extends ZodTypeLike<FormDataType>, TData extends TSchema['
         </Button>
         {resetBtn && (
           <Button
-            aria-label="Reset"
             className={cn('block w-full', customStyles?.resetBtn)}
             disabled={readOnly}
             type="button"