Merge pull request #11227 from rwjblue/fix-aria-role

[BUGFIX beta] Ensure role attribute is applied to views if present.

packages/ember-htmlbars/tests/integration/component_invocation_test.js

@@ -233,6 +233,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);

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
+});

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.

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

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');
+});