diff --git a/packages/ember-htmlbars/tests/integration/component_invocation_test.js b/packages/ember-htmlbars/tests/integration/component_invocation_test.js
index 665a3ef3f56..a3500638897 100644
--- a/packages/ember-htmlbars/tests/integration/component_invocation_test.js
+++ b/packages/ember-htmlbars/tests/integration/component_invocation_test.js
@@ -196,6 +196,21 @@ QUnit.test('[DEPRECATED] block with properties on self', function() {
equal(jQuery('#qunit-fixture').text(), 'In layout - someProp: something here - In template');
});
+QUnit.test('with ariaRole specified', function() {
+ expect(1);
+
+ registry.register('template:components/aria-test', compile('Here!'));
+
+ view = EmberView.extend({
+ template: compile('{{aria-test id="aria-test" ariaRole="main"}}'),
+ container: container
+ }).create();
+
+ runAppend(view);
+
+ equal(view.$('#aria-test').attr('role'), 'main', 'role attribute is applied');
+});
+
if (Ember.FEATURES.isEnabled('ember-views-component-block-info')) {
QUnit.test('hasBlock is true when block supplied', function() {
expect(1);
diff --git a/packages/ember-views/lib/mixins/aria_role_support.js b/packages/ember-views/lib/mixins/aria_role_support.js
new file mode 100644
index 00000000000..93bd8601217
--- /dev/null
+++ b/packages/ember-views/lib/mixins/aria_role_support.js
@@ -0,0 +1,29 @@
+/**
+ @module ember
+ @submodule ember-views
+ */
+
+import { Mixin } from "ember-metal/mixin";
+
+/**
+ @class AriaRoleSupport
+ @namespace Ember
+ */
+export default Mixin.create({
+ attributeBindings: ['ariaRole:role'],
+
+ /**
+ The WAI-ARIA role of the control represented by this view. For example, a
+ button may have a role of type 'button', or a pane may have a role of
+ type 'alertdialog'. This property is used by assistive software to help
+ visually challenged users navigate rich web applications.
+
+ The full list of valid WAI-ARIA roles is available at:
+ [http://www.w3.org/TR/wai-aria/roles#roles_categorization](http://www.w3.org/TR/wai-aria/roles#roles_categorization)
+
+ @property ariaRole
+ @type String
+ @default null
+ */
+ ariaRole: null
+});
diff --git a/packages/ember-views/lib/mixins/visibility_support.js b/packages/ember-views/lib/mixins/visibility_support.js
index b5c466a0022..d9dd20d7f96 100644
--- a/packages/ember-views/lib/mixins/visibility_support.js
+++ b/packages/ember-views/lib/mixins/visibility_support.js
@@ -1,7 +1,7 @@
/**
-@module ember
-@submodule ember-views
-*/
+ @module ember
+ @submodule ember-views
+ */
import {
Mixin,
observer
@@ -12,9 +12,9 @@ import run from "ember-metal/run_loop";
function K() { return this; }
/**
- @class VisibilitySupport
- @namespace Ember
-*/
+ @class VisibilitySupport
+ @namespace Ember
+ */
var VisibilitySupport = Mixin.create({
/**
If `false`, the view will appear hidden in DOM.
diff --git a/packages/ember-views/lib/views/view.js b/packages/ember-views/lib/views/view.js
index 2ef44a6e871..39b7e783b0f 100644
--- a/packages/ember-views/lib/views/view.js
+++ b/packages/ember-views/lib/views/view.js
@@ -32,6 +32,7 @@ import TemplateRenderingSupport from "ember-views/mixins/template_rendering_supp
import ClassNamesSupport from "ember-views/mixins/class_names_support";
import LegacyViewSupport from "ember-views/mixins/legacy_view_support";
import InstrumentationSupport from "ember-views/mixins/instrumentation_support";
+import AriaRoleSupport from "ember-views/mixins/aria_role_support";
import VisibilitySupport from "ember-views/mixins/visibility_support";
import CompatAttrsProxy from "ember-views/compat/attrs-proxy";
@@ -665,6 +666,7 @@ Ember.TEMPLATES = {};
@uses Ember.LegacyViewSupport
@uses Ember.InstrumentationSupport
@uses Ember.VisibilitySupport
+ @uses Ember.AriaRoleSupport
*/
// jscs:disable validateIndentation
var View = CoreView.extend(
@@ -676,7 +678,8 @@ var View = CoreView.extend(
LegacyViewSupport,
InstrumentationSupport,
VisibilitySupport,
- CompatAttrsProxy, {
+ CompatAttrsProxy,
+ AriaRoleSupport, {
concatenatedProperties: ['attributeBindings'],
/**
@@ -1229,21 +1232,6 @@ var View = CoreView.extend(
@private
*/
- /**
- The WAI-ARIA role of the control represented by this view. For example, a
- button may have a role of type 'button', or a pane may have a role of
- type 'alertdialog'. This property is used by assistive software to help
- visually challenged users navigate rich web applications.
-
- The full list of valid WAI-ARIA roles is available at:
- [http://www.w3.org/TR/wai-aria/roles#roles_categorization](http://www.w3.org/TR/wai-aria/roles#roles_categorization)
-
- @property ariaRole
- @type String
- @default null
- */
- ariaRole: null,
-
/**
Normally, Ember's component model is "write-only". The component takes a
bunch of attributes that it got passed in, and uses them to render its
diff --git a/packages/ember-views/tests/views/view/attribute_bindings_test.js b/packages/ember-views/tests/views/view/attribute_bindings_test.js
index e65e9425882..a83a24af734 100644
--- a/packages/ember-views/tests/views/view/attribute_bindings_test.js
+++ b/packages/ember-views/tests/views/view/attribute_bindings_test.js
@@ -448,3 +448,21 @@ QUnit.test("attributeBindings should be overridable", function() {
equal(view.$().attr('href'), "a new href", "expect value from subclass attribute binding");
});
+
+QUnit.test("role attribute is included if provided as ariaRole", function() {
+ view = EmberView.create({
+ ariaRole: 'main'
+ });
+
+ appendView();
+
+ equal(view.$().attr('role'), "main");
+});
+
+QUnit.test("role attribute is not included if not provided", function() {
+ view = EmberView.create();
+
+ appendView();
+
+ ok(!view.element.hasAttribute('role'), 'role attribute is not present');
+});