From aa1af635145c8fdb261144f1758fbb1132534265 Mon Sep 17 00:00:00 2001
From: Godfrey Chan <godfreykfc@gmail.com>
Date: Fri, 5 Feb 2021 20:59:17 -0800
Subject: [PATCH] [FEATURE modernized-built-in-components] Support `@ariaRole`

Part of #19270
---
 .../glimmer/lib/components/input.ts           |  2 +
 .../glimmer/lib/templates/input.hbs           |  1 +
 .../glimmer/lib/templates/textarea.hbs        |  1 +
 .../components/input-angle-test.js            | 86 +++++++++++++++----
 .../components/input-curly-test.js            | 33 +++++--
 .../components/textarea-angle-test.js         |  9 +-
 .../components/textarea-curly-test.js         |  9 +-
 7 files changed, 109 insertions(+), 32 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/lib/components/input.ts b/packages/@ember/-internals/glimmer/lib/components/input.ts
index 492d56e9d0a..3172e9547dc 100644
--- a/packages/@ember/-internals/glimmer/lib/components/input.ts
+++ b/packages/@ember/-internals/glimmer/lib/components/input.ts
@@ -647,6 +647,7 @@ if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
       'id',
       'class',
       ['class', 'classNames'],
+      ['role', 'ariaRole'],
 
       // TextSupport
       'autocapitalize',
@@ -704,6 +705,7 @@ if (EMBER_MODERNIZED_BUILT_IN_COMPONENTS) {
       'id',
       'class',
       ['class', 'classNames'],
+      ['role', 'ariaRole'],
 
       // TextSupport
       'autocapitalize',
diff --git a/packages/@ember/-internals/glimmer/lib/templates/input.hbs b/packages/@ember/-internals/glimmer/lib/templates/input.hbs
index b5481699aa3..6800489fb56 100644
--- a/packages/@ember/-internals/glimmer/lib/templates/input.hbs
+++ b/packages/@ember/-internals/glimmer/lib/templates/input.hbs
@@ -5,6 +5,7 @@
     class={{this.class}}
 
     {{!-- deprecated attribute bindings --}}
+    role={{this._ariaRole}}
     autocapitalize={{this._autocapitalize}}
     autocorrect={{this._autocorrect}}
     autofocus={{this._autofocus}}
diff --git a/packages/@ember/-internals/glimmer/lib/templates/textarea.hbs b/packages/@ember/-internals/glimmer/lib/templates/textarea.hbs
index 11cd37107ef..ef884136b36 100644
--- a/packages/@ember/-internals/glimmer/lib/templates/textarea.hbs
+++ b/packages/@ember/-internals/glimmer/lib/templates/textarea.hbs
@@ -5,6 +5,7 @@
     class={{this.class}}
 
     {{!-- deprecated attribute bindings --}}
+    role={{this._ariaRole}}
     autocapitalize={{this._autocapitalize}}
     autocorrect={{this._autocorrect}}
     autofocus={{this._autofocus}}
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
index 996d61026df..5daed326443 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/input-angle-test.js
@@ -231,6 +231,7 @@ moduleFor(
       this.render(
         `
       <Input @type="text" @value={{this.value}}
+        role={{this.role}}
         disabled={{this.disabled}}
         placeholder={{this.placeholder}}
         name={{this.name}}
@@ -241,6 +242,7 @@ moduleFor(
       />`,
         {
           value: 'Original value',
+          role: 'textbox',
           disabled: false,
           placeholder: 'Original placeholder',
           name: 'original-name',
@@ -253,6 +255,7 @@ moduleFor(
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -264,6 +267,7 @@ moduleFor(
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -273,6 +277,7 @@ moduleFor(
 
       runTask(() => {
         set(this.context, 'value', 'Updated value');
+        set(this.context, 'role', 'search');
         set(this.context, 'disabled', true);
         set(this.context, 'placeholder', 'Updated placeholder');
         set(this.context, 'name', 'updated-name');
@@ -284,6 +289,7 @@ moduleFor(
 
       this.assertDisabled();
       this.assertValue('Updated value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Updated placeholder');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('maxlength', '11');
@@ -293,6 +299,7 @@ moduleFor(
 
       runTask(() => {
         set(this.context, 'value', 'Original value');
+        set(this.context, 'role', 'textbox');
         set(this.context, 'disabled', false);
         set(this.context, 'placeholder', 'Original placeholder');
         set(this.context, 'name', 'original-name');
@@ -304,6 +311,7 @@ moduleFor(
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -318,6 +326,7 @@ moduleFor(
         () => {
           this.render(
             `<Input @type="text" @value={{this.value}}
+              @ariaRole={{this.role}}
               @disabled={{this.disabled}}
               @placeholder={{this.placeholder}}
               @name={{this.name}}
@@ -327,6 +336,7 @@ moduleFor(
               @tabindex={{this.tabindex}}/>`,
             {
               value: 'Original value',
+              role: 'textbox',
               disabled: false,
               placeholder: 'Original placeholder',
               name: 'original-name',
@@ -337,11 +347,12 @@ moduleFor(
             }
           );
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -353,6 +364,7 @@ moduleFor(
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -365,6 +377,7 @@ moduleFor(
         () => {
           runTask(() => {
             set(this.context, 'value', 'Updated value');
+            set(this.context, 'role', 'search');
             set(this.context, 'disabled', true);
             set(this.context, 'placeholder', 'Updated placeholder');
             set(this.context, 'name', 'updated-name');
@@ -374,11 +387,12 @@ moduleFor(
             // set(this.context, 'tabindex', 31); //NOTE: failing in IE (TEST_SUITE=sauce)
           });
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertDisabled();
       this.assertValue('Updated value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Updated placeholder');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('maxlength', '11');
@@ -391,6 +405,7 @@ moduleFor(
         () => {
           runTask(() => {
             set(this.context, 'value', 'Original value');
+            set(this.context, 'role', 'textbox');
             set(this.context, 'disabled', false);
             set(this.context, 'placeholder', 'Original placeholder');
             set(this.context, 'name', 'original-name');
@@ -400,11 +415,12 @@ moduleFor(
             // set(this.context, 'tabindex', 30); //NOTE: failing in IE (TEST_SUITE=sauce)
           });
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -416,6 +432,7 @@ moduleFor(
     ['@test static attributes (HTML attribute)']() {
       this.render(`
       <Input @type="text" @value="Original value"
+        role="search"
         disabled="disabled"
         placeholder="Original placeholder"
         name="original-name"
@@ -427,6 +444,7 @@ moduleFor(
 
       this.assertDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -438,6 +456,7 @@ moduleFor(
 
       this.assertDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -452,6 +471,7 @@ moduleFor(
         () => {
           this.render(
             `<Input @type="text" @value="Original value"
+              @ariaRole="search"
               @disabled={{true}}
               @placeholder="Original placeholder"
               @name="original-name"
@@ -461,11 +481,12 @@ moduleFor(
               @tabindex={{30}}/>`
           );
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -477,6 +498,7 @@ moduleFor(
 
       this.assertDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -909,11 +931,13 @@ moduleFor(
     ['@test dynamic attributes (HTML attribute)']() {
       this.render(
         `<Input @type='checkbox' @checked={{this.checked}}
+          role={{this.role}}
           disabled={{this.disabled}}
           name={{this.name}}
           tabindex={{this.tabindex}}
         />`,
         {
+          role: 'checkbox',
           disabled: false,
           name: 'original-name',
           checked: false,
@@ -923,6 +947,7 @@ moduleFor(
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
 
@@ -930,10 +955,12 @@ moduleFor(
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
 
       runTask(() => {
+        set(this.context, 'role', 'radio');
         set(this.context, 'disabled', true);
         set(this.context, 'name', 'updated-name');
         set(this.context, 'tabindex', 11);
@@ -941,10 +968,12 @@ moduleFor(
 
       this.assertSingleCheckbox();
       this.assertDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('tabindex', '11');
 
       runTask(() => {
+        set(this.context, 'role', 'checkbox');
         set(this.context, 'disabled', false);
         set(this.context, 'name', 'original-name');
         set(this.context, 'tabindex', 10);
@@ -952,6 +981,7 @@ moduleFor(
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
     }
@@ -962,10 +992,13 @@ moduleFor(
         () => {
           this.render(
             `<Input @type='checkbox' @checked={{this.checked}}
+              @ariaRole={{this.role}}
               @disabled={{this.disabled}}
               @name={{this.name}}
-              @tabindex={{this.tabindex}}/>`,
+              @tabindex={{this.tabindex}}
+            />`,
             {
+              role: 'checkbox',
               disabled: false,
               name: 'original-name',
               checked: false,
@@ -973,11 +1006,12 @@ moduleFor(
             }
           );
         },
-        /Passing the `@(disabled|name|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|name|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
 
@@ -985,6 +1019,7 @@ moduleFor(
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
 
@@ -992,16 +1027,18 @@ moduleFor(
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
         () => {
           runTask(() => {
+            set(this.context, 'role', 'radio');
             set(this.context, 'disabled', true);
             set(this.context, 'name', 'updated-name');
             set(this.context, 'tabindex', 11);
           });
         },
-        /Passing the `@(disabled|name|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|name|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertSingleCheckbox();
       this.assertDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('tabindex', '11');
 
@@ -1009,16 +1046,18 @@ moduleFor(
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
         () => {
           runTask(() => {
+            set(this.context, 'role', 'checkbox');
             set(this.context, 'disabled', false);
             set(this.context, 'name', 'original-name');
             set(this.context, 'tabindex', 10);
           });
         },
-        /Passing the `@(disabled|name|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|name|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
     }
@@ -1087,12 +1126,13 @@ moduleFor(
 
     ['@test with static values (HTML attribute)']() {
       this.render(
-        `<Input @type="checkbox" @checked={{false}} disabled={{false}} tabindex="10" name="original-name" />`
+        `<Input @type="checkbox" @checked={{false}} role="radio" disabled={{false}} tabindex="10" name="original-name" />`
       );
 
       this.assertSingleCheckbox();
       this.assertCheckboxIsNotChecked();
       this.assertNotDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('tabindex', '10');
       this.assertAttr('name', 'original-name');
 
@@ -1110,15 +1150,16 @@ moduleFor(
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
         () => {
           this.render(
-            `<Input @type="checkbox" @checked={{false}} @disabled={{false}} @tabindex={{10}} @name="original-name" />`
+            `<Input @type="checkbox" @checked={{false}} @ariaRole="radio" @disabled={{false}} @tabindex={{10}} @name="original-name" />`
           );
         },
-        /Passing the `@(disabled|tabindex|name)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|tabindex|name)` argument to <Input> is deprecated\./
       );
 
       this.assertSingleCheckbox();
       this.assertCheckboxIsNotChecked();
       this.assertNotDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('tabindex', '10');
       this.assertAttr('name', 'original-name');
 
@@ -1127,6 +1168,7 @@ moduleFor(
       this.assertSingleCheckbox();
       this.assertCheckboxIsNotChecked();
       this.assertNotDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('tabindex', '10');
       this.assertAttr('name', 'original-name');
     }
@@ -1141,11 +1183,12 @@ moduleFor(
   `Components test: <Input @type='text' />`,
   class extends InputRenderingTest {
     ['@test null values (HTML attribute)']() {
-      let attributes = ['disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];
+      let attributes = ['role', 'disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];
 
       this.render(
         `
       <Input @type="text" @value={{this.value}}
+        role={{this.role}}
         disabled={{this.disabled}}
         placeholder={{this.placeholder}}
         name={{this.name}}
@@ -1155,6 +1198,7 @@ moduleFor(
       />`,
         {
           value: null,
+          role: null,
           disabled: null,
           placeholder: null,
           name: null,
@@ -1173,6 +1217,7 @@ moduleFor(
       this.assertAllAttrs(attributes, undefined);
 
       runTask(() => {
+        set(this.context, 'role', 'search');
         set(this.context, 'disabled', true);
         set(this.context, 'value', 'Updated value');
         set(this.context, 'placeholder', 'Updated placeholder');
@@ -1184,6 +1229,7 @@ moduleFor(
 
       this.assertDisabled();
       this.assertValue('Updated value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Updated placeholder');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('maxlength', '11');
@@ -1191,6 +1237,7 @@ moduleFor(
       this.assertAttr('tabindex', '31');
 
       runTask(() => {
+        set(this.context, 'role', null);
         set(this.context, 'disabled', null);
         set(this.context, 'value', null);
         set(this.context, 'placeholder', null);
@@ -1202,6 +1249,7 @@ moduleFor(
 
       this.assertAttr('disabled', undefined);
       this.assertValue('');
+      this.assertAttr('role', undefined);
       // this.assertAttr('placeholder', undefined); //NOTE: this fails with a value of "null" (TEST_SUITE=sauce)
       // this.assertAttr('name', undefined); //NOTE: this fails with a value of "null" (TEST_SUITE=sauce)
       this.assertAttr('maxlength', undefined);
@@ -1210,13 +1258,14 @@ moduleFor(
     }
 
     ['@test [DEPRECATED] null values (named argument)']() {
-      let attributes = ['disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];
+      let attributes = ['role', 'disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];
 
       maybeExpectDeprecation(
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
         () => {
           this.render(
             `<Input @type="text" @value={{this.value}}
+              @ariaRole={{this.role}}
               @disabled={{this.disabled}}
               @placeholder={{this.placeholder}}
               @name={{this.name}}
@@ -1225,6 +1274,7 @@ moduleFor(
               @tabindex={{this.tabindex}}/>`,
             {
               value: null,
+              role: null,
               disabled: null,
               placeholder: null,
               name: null,
@@ -1234,7 +1284,7 @@ moduleFor(
             }
           );
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertValue('');
@@ -1249,6 +1299,7 @@ moduleFor(
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
         () => {
           runTask(() => {
+            set(this.context, 'role', 'search');
             set(this.context, 'disabled', true);
             set(this.context, 'value', 'Updated value');
             set(this.context, 'placeholder', 'Updated placeholder');
@@ -1258,11 +1309,12 @@ moduleFor(
             set(this.context, 'tabindex', 31);
           });
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertDisabled();
       this.assertValue('Updated value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Updated placeholder');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('maxlength', '11');
@@ -1273,6 +1325,7 @@ moduleFor(
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
         () => {
           runTask(() => {
+            set(this.context, 'role', null);
             set(this.context, 'disabled', null);
             set(this.context, 'value', null);
             set(this.context, 'placeholder', null);
@@ -1282,11 +1335,12 @@ moduleFor(
             set(this.context, 'tabindex', null);
           });
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertAttr('disabled', undefined);
       this.assertValue('');
+      this.assertAttr('role', undefined);
       // this.assertAttr('placeholder', undefined); //NOTE: this fails with a value of "null" (TEST_SUITE=sauce)
       // this.assertAttr('name', undefined); //NOTE: this fails with a value of "null" (TEST_SUITE=sauce)
       this.assertAttr('maxlength', undefined);
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
index e0485f357a8..61a0acd4933 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/input-curly-test.js
@@ -189,6 +189,7 @@ moduleFor(
           this.render(
             `
             {{input type="text"
+              ariaRole=this.role
               disabled=this.disabled
               value=this.value
               placeholder=this.placeholder
@@ -199,6 +200,7 @@ moduleFor(
               tabindex=this.tabindex
             }}`,
             {
+              role: 'textbox',
               disabled: false,
               value: 'Original value',
               placeholder: 'Original placeholder',
@@ -210,11 +212,12 @@ moduleFor(
             }
           );
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -226,6 +229,7 @@ moduleFor(
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -237,6 +241,7 @@ moduleFor(
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
         () => {
           runTask(() => {
+            set(this.context, 'role', 'search');
             set(this.context, 'value', 'Updated value');
             set(this.context, 'disabled', true);
             set(this.context, 'placeholder', 'Updated placeholder');
@@ -247,11 +252,12 @@ moduleFor(
             // set(this.context, 'tabindex', 31); //NOTE: failing in IE (TEST_SUITE=sauce)
           });
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertDisabled();
       this.assertValue('Updated value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Updated placeholder');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('maxlength', '11');
@@ -263,6 +269,7 @@ moduleFor(
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
         () => {
           runTask(() => {
+            set(this.context, 'role', 'textbox');
             set(this.context, 'value', 'Original value');
             set(this.context, 'disabled', false);
             set(this.context, 'placeholder', 'Original placeholder');
@@ -273,11 +280,12 @@ moduleFor(
             // set(this.context, 'tabindex', 30); //NOTE: failing in IE (TEST_SUITE=sauce)
           });
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -292,6 +300,7 @@ moduleFor(
         () => {
           this.render(`
             {{input type="text"
+              ariaRole="search"
               disabled=true
               value="Original value"
               placeholder="Original placeholder"
@@ -302,11 +311,12 @@ moduleFor(
               tabindex=30
             }}`);
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|minlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -318,6 +328,7 @@ moduleFor(
 
       this.assertDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -914,13 +925,14 @@ moduleFor(
   `Components test: {{input type='text'}}`,
   class extends InputRenderingTest {
     ['@test [DEPRECATED] null values']() {
-      let attributes = ['disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];
+      let attributes = ['role', 'disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];
 
       maybeExpectDeprecation(
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
         () => {
           this.render(
             `{{input type="text"
+              ariaRole=this.role
               disabled=this.disabled
               value=this.value
               placeholder=this.placeholder
@@ -929,6 +941,7 @@ moduleFor(
               size=this.size
               tabindex=this.tabindex}}`,
             {
+              role: null,
               disabled: null,
               value: null,
               placeholder: null,
@@ -939,7 +952,7 @@ moduleFor(
             }
           );
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertValue('');
@@ -954,6 +967,7 @@ moduleFor(
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
         () => {
           runTask(() => {
+            set(this.context, 'role', 'search');
             set(this.context, 'disabled', true);
             set(this.context, 'value', 'Updated value');
             set(this.context, 'placeholder', 'Updated placeholder');
@@ -963,11 +977,12 @@ moduleFor(
             set(this.context, 'tabindex', 31);
           });
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertDisabled();
       this.assertValue('Updated value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Updated placeholder');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('maxlength', '11');
@@ -978,6 +993,7 @@ moduleFor(
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
         () => {
           runTask(() => {
+            set(this.context, 'role', null);
             set(this.context, 'disabled', null);
             set(this.context, 'value', null);
             set(this.context, 'placeholder', null);
@@ -987,11 +1003,12 @@ moduleFor(
             set(this.context, 'tabindex', null);
           });
         },
-        /Passing the `@(disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
+        /Passing the `@(ariaRole|disabled|placeholder|name|maxlength|size|tabindex)` argument to <Input> is deprecated\./
       );
 
       this.assertAttr('disabled', undefined);
       this.assertValue('');
+      this.assertAttr('role', undefined);
       // this.assertAttr('placeholder', undefined); //NOTE: this fails with a value of "null" (TEST_SUITE=sauce)
       // this.assertAttr('name', undefined); //NOTE: this fails with a value of "null" (TEST_SUITE=sauce)
       this.assertAttr('maxlength', undefined);
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
index 4f22f6f4188..78cddea5abf 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-angle-test.js
@@ -39,7 +39,7 @@ class BoundTextAreaAttributes {
     this.cases = cases;
   }
 
-  generate({ attribute, first, second }) {
+  generate({ attribute, argument = attribute, first, second }) {
     return {
       [`@test ${attribute} (HTML attribute)`]() {
         this.render(`<Textarea ${attribute}={{this.value}} />`, {
@@ -56,14 +56,14 @@ class BoundTextAreaAttributes {
         this.assertTextArea({ attrs: { [attribute]: first } });
       },
 
-      [`@test [DEPRECATED] @${attribute} (named argument)`]() {
+      [`@test [DEPRECATED] @${argument} (named argument)`]() {
         let deprecation = new RegExp(
-          `Passing the \`@${attribute}\` argument to <Textarea> is deprecated\\.`
+          `Passing the \`@${argument}\` argument to <Textarea> is deprecated\\.`
         );
 
         maybeExpectDeprecation(
           EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
-          () => this.render(`<Textarea @${attribute}={{this.value}} />`, { value: first }),
+          () => this.render(`<Textarea @${argument}={{this.value}} />`, { value: first }),
           deprecation
         );
         this.assertTextArea({ attrs: { [attribute]: first } });
@@ -91,6 +91,7 @@ class BoundTextAreaAttributes {
 applyMixins(
   TextAreaRenderingTest,
   new BoundTextAreaAttributes([
+    { attribute: 'role', argument: 'ariaRole', first: 'textbox', second: 'search' },
     { attribute: 'placeholder', first: 'Stuff here', second: 'Other stuff' },
     { attribute: 'name', first: 'Stuff here', second: 'Other stuff' },
     { attribute: 'title', first: 'Stuff here', second: 'Other stuff' },
diff --git a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
index fd0b9ae752d..39231dcc222 100644
--- a/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
+++ b/packages/@ember/-internals/glimmer/tests/integration/components/textarea-curly-test.js
@@ -39,16 +39,16 @@ class BoundTextAreaAttributes {
     this.cases = cases;
   }
 
-  generate({ attribute, first, second }) {
+  generate({ attribute, argument = attribute, first, second }) {
     return {
-      [`@test [DEPRECATED] ${attribute}`]() {
+      [`@test [DEPRECATED] ${argument}`]() {
         let deprecation = new RegExp(
-          `Passing the \`@${attribute}\` argument to <Textarea> is deprecated\\.`
+          `Passing the \`@${argument}\` argument to <Textarea> is deprecated\\.`
         );
 
         maybeExpectDeprecation(
           EMBER_MODERNIZED_BUILT_IN_COMPONENTS,
-          () => this.render(`{{textarea ${attribute}=this.value}}`, { value: first }),
+          () => this.render(`{{textarea ${argument}=this.value}}`, { value: first }),
           deprecation
         );
         this.assertTextArea({ attrs: { [attribute]: first } });
@@ -76,6 +76,7 @@ class BoundTextAreaAttributes {
 applyMixins(
   TextAreaRenderingTest,
   new BoundTextAreaAttributes([
+    { attribute: 'role', argument: 'ariaRole', first: 'textbox', second: 'search' },
     { attribute: 'placeholder', first: 'Stuff here', second: 'Other stuff' },
     { attribute: 'name', first: 'Stuff here', second: 'Other stuff' },
     { attribute: 'title', first: 'Stuff here', second: 'Other stuff' },