KeyValueInputs AddRowButton - Translate strings (HDS-6114)

.changeset/all-frogs-walk.md

@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+<!-- START components/form/key-value-inputs -->
+`KeyValueInputs` - Translated strings for the KeyValueInputs AddRowButton ariaLabel and description text.
+<!-- END -->

packages/components/src/components/hds/form/key-value-inputs/add-row-button.gts

@@ -2,24 +2,49 @@
  * Copyright IBM Corp. 2021, 2025
  * SPDX-License-Identifier: MPL-2.0
  */
+
 import Component from '@glimmer/component';
 import { on } from '@ember/modifier';
+import { service } from '@ember/service';
 
 import HdsButton from '../../button/index.gts';
 
+import type HdsIntlService from '../../../../services/hds-intl.ts';
+
 import type { HdsButtonSignature } from '../../button/index.gts';
 
 export interface HdsFormKeyValueInputsAddRowButtonSignature {
   Args: {
+    ariaLabel?: string;
     onClick?: () => void;
     text?: HdsButtonSignature['Args']['text'];
   };
   Element: HdsButtonSignature['Element'];
 }
 
 export default class HdsFormKeyValueInputsAddRowButton extends Component<HdsFormKeyValueInputsAddRowButtonSignature> {
+  @service declare readonly hdsIntl: HdsIntlService;
+
+  get ariaDescription(): string {
+    return this.hdsIntl.t(
+      'hds.components.form.key-value-inputs.add-row-button.aria-description',
+      {
+        default:
+          'Adds a new row of one or more inputs at the end of the form field. Press shift tab to move focus back to the newly added row.',
+      }
+    );
+  }
+
   get text(): string {
-    return this.args.text ?? 'Add row';
+    return (
+      this.args.text ??
+      this.hdsIntl.t(
+        'hds.components.form.key-value-inputs.add-row-button.text',
+        {
+          default: 'Add row',
+        }
+      )
+    );
   }
 
   onClick = (): void => {
@@ -38,7 +63,7 @@ export default class HdsFormKeyValueInputsAddRowButton extends Component<HdsForm
       @icon="plus"
       @iconPosition="leading"
       class="hds-form-key-value-inputs__add-row-button"
-      aria-description="Adds a new row of one or more inputs at the end of the form field. Press shift tab to move focus back to the newly added row."
+      aria-description={{this.ariaDescription}}
       {{on "click" this.onClick}}
       ...attributes
     />

showcase/tests/integration/components/hds/form/key-value-inputs/add-row-button-test.gts

@@ -92,8 +92,8 @@ module(
         .dom('#test-form-key-value-add-row-button')
         .hasAttribute(
           'aria-description',
-          /.+/,
-          'aria-description should not be empty',
+          'Adds a new row of one or more inputs at the end of the form field. Press shift tab to move focus back to the newly added row.',
+          'aria-description contains the default value',
         );
     });
   },