Merge pull request #1768 from kaliber5/modal-title-id

Fix broken aria-labelledby attribute of modals

addon/components/bs-modal/dialog.js

@@ -5,6 +5,7 @@ import { next } from '@ember/runloop';
 import deprecateSubclassing from 'ember-bootstrap/utils/deprecate-subclassing';
 import { ref } from 'ember-ref-bucket';
 import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
 
 /**
  Internal component for modal's markup and event handling. Should not be used directly.
@@ -64,7 +65,7 @@ export default class ModalDialog extends Component {
         nodeId = titleNode.id;
         if (!nodeId) {
           //no title id so we set one
-          nodeId = `${this.id}-title`;
+          nodeId = `${guidFor(this)}-title`;
           titleNode.id = nodeId;
         }
       }

tests/integration/components/bs-modal-simple-test.js

@@ -611,10 +611,11 @@ module('Integration | Component | bs-modal-simple', function (hooks) {
     assert.dom('.modal-dialog').hasClass('modal-dialog-centered');
   });
 
-  test('Modal has accesibility attributes with default title', async function (assert) {
+  test('Modal has accessibility attributes with default title', async function (assert) {
     await render(hbs`<BsModalSimple @open={{true}} @title="Simple Dialog">Hello world!</BsModalSimple>`);
 
     const modalTitleId = document.getElementsByClassName('modal-title')[0].id;
+    assert.notOk(modalTitleId.includes('undefined'), 'Should have a proper ID');
     assert.dom('.modal').exists({ count: 1 }, 'Modal exists.');
     assert.dom('.modal').hasAttribute('role', 'dialog');
     assert.dom('.modal-dialog').hasAttribute('role', 'document');