fix: add ariaLabelledBy attribute

qonto · Jul 2, 2024 · 177d055 · 177d055
1 parent ed16c4a
commit 177d055
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/ember-amount-input/src/components/amount-input.hbs b/ember-amount-input/src/components/amount-input.hbs
@@ -14,6 +14,7 @@
     placeholder={{this.placeholder}}
     disabled={{@disabled}}
     readonly={{@readonly}}
+    aria-labelledby={{@ariaLabelledBy}}
     {{on 'keydown' this.onKeyDown}}
     {{on 'input' this.onInput}}
     {{on 'paste' this.onPaste}}

diff --git a/ember-amount-input/src/components/amount-input.ts b/ember-amount-input/src/components/amount-input.ts
@@ -7,6 +7,11 @@ const KEY_FULLSTOP = '.';
 const KEY_COMMA = ',';
 
 export interface AmountInputArgs {
+  /**
+   * The arial label for the input
+   */
+  ariaLabelledBy?: string;
+
   /**
    * The currency displayed in the input
    */

diff --git a/test-app/tests/integration/components/amount-input/component-test.ts b/test-app/tests/integration/components/amount-input/component-test.ts
@@ -44,7 +44,8 @@ module('Integration | Component | amount-input', function (hooks) {
         @value={{this.value}}
         @min={{5}}
         @max={{10}}
-        @update={{fn (mut this.value)}} />
+        @update={{fn (mut this.value)}}
+        @ariaLabelledBy="foo" />
     `);
 
     assert.dom('.amount-input__currency').hasText('USD');
@@ -59,6 +60,7 @@ module('Integration | Component | amount-input', function (hooks) {
     assert.dom('input').hasAttribute('placeholder', '1.000.000');
     assert.dom('input').hasAttribute('min', '5');
     assert.dom('input').hasAttribute('max', '10');
+    assert.dom('input').hasAttribute('aria-labelledby', 'foo');
   });
 
   test('uses named property declared (even if undefined) instead of defaults', async function (this: TestContext, assert) {