From 5840dd22c6873dbc25763cd287edae47b76ad7ab 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            | 52 ++++++++---
 .../components/textarea-angle-test.js         |  9 +-
 .../components/textarea-curly-test.js         |  9 +-
 7 files changed, 124 insertions(+), 36 deletions(-)

diff --git a/packages/@ember/-internals/glimmer/lib/components/input.ts b/packages/@ember/-internals/glimmer/lib/components/input.ts
index 4a168ea8a46..9d7892fbd31 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 34016cc5f92..477ae797c1e 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
@@ -225,6 +225,7 @@ moduleFor(
       this.render(
         `
       <Input @type="text" @value={{this.value}}
+        role={{this.role}}
         disabled={{this.disabled}}
         placeholder={{this.placeholder}}
         name={{this.name}}
@@ -235,6 +236,7 @@ moduleFor(
       />`,
         {
           value: 'Original value',
+          role: 'textbox',
           disabled: false,
           placeholder: 'Original placeholder',
           name: 'original-name',
@@ -247,6 +249,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');
@@ -258,6 +261,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');
@@ -267,6 +271,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');
@@ -278,6 +283,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');
@@ -287,6 +293,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');
@@ -298,6 +305,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');
@@ -311,6 +319,7 @@ moduleFor(
         () => {
           this.render(
             `<Input @type="text" @value={{this.value}}
+              @ariaRole={{this.role}}
               @disabled={{this.disabled}}
               @placeholder={{this.placeholder}}
               @name={{this.name}}
@@ -320,6 +329,7 @@ moduleFor(
               @tabindex={{this.tabindex}}/>`,
             {
               value: 'Original value',
+              role: 'textbox',
               disabled: false,
               placeholder: 'Original placeholder',
               name: 'original-name',
@@ -330,12 +340,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -347,6 +358,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');
@@ -358,6 +370,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');
@@ -367,12 +380,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertDisabled();
       this.assertValue('Updated value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Updated placeholder');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('maxlength', '11');
@@ -384,6 +398,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');
@@ -393,12 +408,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -410,6 +426,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"
@@ -421,6 +438,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');
@@ -432,6 +450,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');
@@ -445,6 +464,7 @@ moduleFor(
         () => {
           this.render(
             `<Input @type="text" @value="Original value"
+              @ariaRole="search"
               @disabled={{true}}
               @placeholder="Original placeholder"
               @name="original-name"
@@ -454,12 +474,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -471,6 +492,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');
@@ -903,11 +925,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,
@@ -917,6 +941,7 @@ moduleFor(
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
 
@@ -924,10 +949,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);
@@ -935,10 +962,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);
@@ -946,6 +975,7 @@ moduleFor(
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
     }
@@ -955,10 +985,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,
@@ -966,12 +999,13 @@ moduleFor(
             }
           );
         },
-        /Passing the `@(disabled|name|tabindex)` argument to <Input> is deprecated\./,
+        /Passing the `@(ariaRole|disabled|name|tabindex)` argument to <Input> is deprecated\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
 
@@ -979,40 +1013,45 @@ moduleFor(
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
 
       expectDeprecation(
         () => {
           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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertSingleCheckbox();
       this.assertDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('tabindex', '11');
 
       expectDeprecation(
         () => {
           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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
     }
@@ -1081,12 +1120,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');
 
@@ -1103,16 +1143,17 @@ moduleFor(
       expectDeprecation(
         () => {
           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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertSingleCheckbox();
       this.assertCheckboxIsNotChecked();
       this.assertNotDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('tabindex', '10');
       this.assertAttr('name', 'original-name');
 
@@ -1121,6 +1162,7 @@ moduleFor(
       this.assertSingleCheckbox();
       this.assertCheckboxIsNotChecked();
       this.assertNotDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('tabindex', '10');
       this.assertAttr('name', 'original-name');
     }
@@ -1135,11 +1177,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}}
@@ -1149,6 +1192,7 @@ moduleFor(
       />`,
         {
           value: null,
+          role: null,
           disabled: null,
           placeholder: null,
           name: null,
@@ -1167,6 +1211,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');
@@ -1178,6 +1223,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');
@@ -1185,6 +1231,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);
@@ -1196,6 +1243,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);
@@ -1204,12 +1252,13 @@ moduleFor(
     }
 
     ['@test [DEPRECATED] null values (named argument)']() {
-      let attributes = ['disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];
+      let attributes = ['role', 'disabled', 'placeholder', 'name', 'maxlength', 'size', 'tabindex'];
 
       expectDeprecation(
         () => {
           this.render(
             `<Input @type="text" @value={{this.value}}
+              @ariaRole={{this.role}}
               @disabled={{this.disabled}}
               @placeholder={{this.placeholder}}
               @name={{this.name}}
@@ -1218,6 +1267,7 @@ moduleFor(
               @tabindex={{this.tabindex}}/>`,
             {
               value: null,
+              role: null,
               disabled: null,
               placeholder: null,
               name: null,
@@ -1227,7 +1277,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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
@@ -1242,6 +1292,7 @@ moduleFor(
       expectDeprecation(
         () => {
           runTask(() => {
+            set(this.context, 'role', 'search');
             set(this.context, 'disabled', true);
             set(this.context, 'value', 'Updated value');
             set(this.context, 'placeholder', 'Updated placeholder');
@@ -1251,12 +1302,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertDisabled();
       this.assertValue('Updated value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Updated placeholder');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('maxlength', '11');
@@ -1266,6 +1318,7 @@ moduleFor(
       expectDeprecation(
         () => {
           runTask(() => {
+            set(this.context, 'role', null);
             set(this.context, 'disabled', null);
             set(this.context, 'value', null);
             set(this.context, 'placeholder', null);
@@ -1275,12 +1328,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       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 c9cc14e9154..28fee3d20ac 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
@@ -187,6 +187,7 @@ moduleFor(
           this.render(
             `
             {{input type="text"
+              ariaRole=this.role
               disabled=this.disabled
               value=this.value
               placeholder=this.placeholder
@@ -197,6 +198,7 @@ moduleFor(
               tabindex=this.tabindex
             }}`,
             {
+              role: 'textbox',
               disabled: false,
               value: 'Original value',
               placeholder: 'Original placeholder',
@@ -208,12 +210,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -225,6 +228,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');
@@ -235,6 +239,7 @@ moduleFor(
       expectDeprecation(
         () => {
           runTask(() => {
+            set(this.context, 'role', 'search');
             set(this.context, 'value', 'Updated value');
             set(this.context, 'disabled', true);
             set(this.context, 'placeholder', 'Updated placeholder');
@@ -245,12 +250,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertDisabled();
       this.assertValue('Updated value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Updated placeholder');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('maxlength', '11');
@@ -261,6 +267,7 @@ moduleFor(
       expectDeprecation(
         () => {
           runTask(() => {
+            set(this.context, 'role', 'textbox');
             set(this.context, 'value', 'Original value');
             set(this.context, 'disabled', false);
             set(this.context, 'placeholder', 'Original placeholder');
@@ -271,12 +278,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertNotDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'textbox');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -290,6 +298,7 @@ moduleFor(
         () => {
           this.render(`
             {{input type="text"
+              ariaRole="search"
               disabled=true
               value="Original value"
               placeholder="Original placeholder"
@@ -300,12 +309,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertDisabled();
       this.assertValue('Original value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Original placeholder');
       this.assertAttr('name', 'original-name');
       this.assertAttr('maxlength', '10');
@@ -317,6 +327,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');
@@ -747,12 +758,14 @@ moduleFor(
           this.render(
             `{{input
               type='checkbox'
+              ariaRole=this.role
               disabled=this.disabled
               name=this.name
               checked=this.checked
               tabindex=this.tabindex
             }}`,
             {
+              role: 'radio',
               disabled: false,
               name: 'original-name',
               checked: false,
@@ -760,12 +773,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
 
@@ -773,40 +787,45 @@ moduleFor(
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
 
       expectDeprecation(
         () => {
           runTask(() => {
+            set(this.context, 'role', 'checkbox');
             set(this.context, 'disabled', true);
             set(this.context, 'name', 'updated-name');
             set(this.context, 'tabindex', 11);
           });
         },
-        /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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertSingleCheckbox();
       this.assertDisabled();
+      this.assertAttr('role', 'checkbox');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('tabindex', '11');
 
       expectDeprecation(
         () => {
           runTask(() => {
+            set(this.context, 'role', 'radio');
             set(this.context, 'disabled', false);
             set(this.context, 'name', 'original-name');
             set(this.context, 'tabindex', 10);
           });
         },
-        /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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertSingleCheckbox();
       this.assertNotDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('name', 'original-name');
       this.assertAttr('tabindex', '10');
     }
@@ -878,19 +897,21 @@ moduleFor(
         () => {
           this.render(
             `{{input type="checkbox"
+              ariaRole="radio"
               disabled=false
               tabindex=10
               name="original-name"
               checked=false}}`
           );
         },
-        /Passing the `@(disabled|tabindex|name)` argument to <Input> is deprecated\./,
+        /Passing the `@(ariaRole|disabled|tabindex|name)` argument to <Input> is deprecated\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertSingleCheckbox();
       this.assertCheckboxIsNotChecked();
       this.assertNotDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('tabindex', '10');
       this.assertAttr('name', 'original-name');
 
@@ -899,6 +920,7 @@ moduleFor(
       this.assertSingleCheckbox();
       this.assertCheckboxIsNotChecked();
       this.assertNotDisabled();
+      this.assertAttr('role', 'radio');
       this.assertAttr('tabindex', '10');
       this.assertAttr('name', 'original-name');
     }
@@ -913,12 +935,13 @@ 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'];
 
       expectDeprecation(
         () => {
           this.render(
             `{{input type="text"
+              ariaRole=this.role
               disabled=this.disabled
               value=this.value
               placeholder=this.placeholder
@@ -927,6 +950,7 @@ moduleFor(
               size=this.size
               tabindex=this.tabindex}}`,
             {
+              role: null,
               disabled: null,
               value: null,
               placeholder: null,
@@ -937,7 +961,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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
@@ -952,6 +976,7 @@ moduleFor(
       expectDeprecation(
         () => {
           runTask(() => {
+            set(this.context, 'role', 'search');
             set(this.context, 'disabled', true);
             set(this.context, 'value', 'Updated value');
             set(this.context, 'placeholder', 'Updated placeholder');
@@ -961,12 +986,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       this.assertDisabled();
       this.assertValue('Updated value');
+      this.assertAttr('role', 'search');
       this.assertAttr('placeholder', 'Updated placeholder');
       this.assertAttr('name', 'updated-name');
       this.assertAttr('maxlength', '11');
@@ -976,6 +1002,7 @@ moduleFor(
       expectDeprecation(
         () => {
           runTask(() => {
+            set(this.context, 'role', null);
             set(this.context, 'disabled', null);
             set(this.context, 'value', null);
             set(this.context, 'placeholder', null);
@@ -985,12 +1012,13 @@ 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\./,
         EMBER_MODERNIZED_BUILT_IN_COMPONENTS
       );
 
       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 40ff6ac7df0..ab409e9d5f9 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
@@ -32,7 +32,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}} />`, {
@@ -49,13 +49,13 @@ 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\\.`
         );
 
         expectDeprecation(
-          () => this.render(`<Textarea @${attribute}={{this.value}} />`, { value: first }),
+          () => this.render(`<Textarea @${argument}={{this.value}} />`, { value: first }),
           deprecation,
           EMBER_MODERNIZED_BUILT_IN_COMPONENTS
         );
@@ -84,6 +84,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 8804c9620ed..339816d2447 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
@@ -32,15 +32,15 @@ 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\\.`
         );
 
         expectDeprecation(
-          () => this.render(`{{textarea ${attribute}=this.value}}`, { value: first }),
+          () => this.render(`{{textarea ${argument}=this.value}}`, { value: first }),
           deprecation,
           EMBER_MODERNIZED_BUILT_IN_COMPONENTS
         );
@@ -69,6 +69,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' },