Bandaid Ember 3.1.0-beta.1 role attribute binding changes

See emberjs/ember.js#16379.

CHANGELOG.md

@@ -7,6 +7,7 @@ See [changes since release][HEAD].
 * Add "aria-live" to tablists for reporting tab changes to the user.
 * Add optional "aria-label" to tablists to improve screenreader reporting.
 * Give active tabpanels tabindex 0 to allow keyboard navigation to the active panel content.
+* Use a temporary "presentation" role for tablists until tabs are inserted and the "tablist" role is then allowed. See emberjs/ember.js#16379.
 
 ## [3.2.0][] / 2018-03-07
 

addon/components/ivy-tabs-tablist.js

@@ -84,6 +84,12 @@ export default Component.extend({
   ariaRole: computed('isEmpty', function() {
     if (!this.get('isEmpty')) {
       return 'tablist';
+    } else {
+      // FIXME: Ember 3.1.0-beta.1 introduced a bug which does not bind/watch
+      // ariaRole changes if it's initially falsy. This sets a non-falsy,
+      // "safe" value for ariaRole until it can be a "tablist" when Tabs are
+      // added.
+      return 'presentation';
     }
   }).readOnly(),
 

tests/acceptance/dynamic-tabs-test.js

@@ -11,7 +11,7 @@ module('Acceptance | dynamic tabs', function(hooks) {
 
     const tablist = find('#dynamic-tablist');
     assert.equal(tablist.getAttribute('aria-multiselectable'), null);
-    assert.equal(tablist.getAttribute('role'), null);
+    assert.equal(tablist.getAttribute('role'), 'presentation');
 
     await click(findButtonByText('Add an Item'));
 
@@ -21,7 +21,7 @@ module('Acceptance | dynamic tabs', function(hooks) {
     await click(findTab('Item 1').querySelector('.close'));
 
     assert.equal(tablist.getAttribute('aria-multiselectable'), null);
-    assert.equal(tablist.getAttribute('role'), null);
+    assert.equal(tablist.getAttribute('role'), 'presentation');
   });
 
   test('the first tab added should be selected', async function(assert) {