♿️ Dialog: handle id with aria-labels

src/Dialog/Dialog.vue

@@ -1,18 +1,18 @@
 <template>
-  <aside id="mdc-dialog-with-list"
+  <aside :id="id"
          style="visibility:hidden"
          class="mdc-dialog"
          role="alertdialog"
-         aria-labelledby="mdc-dialog-with-list-label"
-         aria-describedby="mdc-dialog-with-list-description">
+         :aria-labelledby="labelId"
+         :aria-describedby="descriptionId">
     <div class="mdc-dialog__surface" ref="surface">
       <header class="mdc-dialog__header">
         <slot name="header">
-          <h2 id="mdc-dialog-with-list-label"
+          <h2 :id="labelId"
               class="mdc-dialog__header__title">{{ title }}</h2>
         </slot>
       </header>
-      <section id="mdc-dialog-with-list-description"
+      <section :id="descriptionId"
                :class="bodyClasses"
                class="mdc-dialog__body">
         <slot></slot>
@@ -46,6 +46,7 @@ export default {
     title: String,
     acceptText: String,
     cancelText: String,
+    id: [String, Boolean],
   },
 
   computed: {
@@ -54,6 +55,12 @@ export default {
         'mdc-dialog__body--scrollable': this.scrollable,
       }
     },
+    labelId () {
+      return this.id ? `${this.id}__label` : false
+    },
+    descriptionId () {
+      return this.id ? `${this.id}__description` : false
+    },
   },
 
   mounted () {

test/specs/Dialog.spec.js

@@ -250,4 +250,48 @@ describe('Dialog', function () {
     })
     vm.$('.mdc-dialog__header__title').should.exist.and.have.text('Custom')
   })
+
+  it('should not have an id by default', function () {
+    const vm = createVM(this, function (h) {
+      return (
+        <div>
+          <Dialog ref='dialog'>
+            Dialog content
+          </Dialog>
+          <button onClick={() => this.$refs.dialog.open()}>Open</button>
+        </div>
+      )
+    })
+    vm.$('.mdc-dialog__header__title').should.not.have.attr('id')
+    vm.$('.mdc-dialog__body').should.not.have.attr('id')
+    vm.$refs.dialog.$el.should.not.have.attr('id')
+  })
+
+  it('should propagate id to aria labels', function (done) {
+    const vm = createVM(this, function (h) {
+      return (
+        <div>
+          <Dialog ref='dialog' id={this.id}>
+            Dialog content
+          </Dialog>
+          <button onClick={() => this.$refs.dialog.open()}>Open</button>
+        </div>
+      )
+    }, {
+      data: {
+        id: 'my-dialog',
+      },
+    })
+    vm.$('.mdc-dialog__header__title').should.have.id('my-dialog__label')
+    vm.$('.mdc-dialog__body').should.have.id('my-dialog__description')
+    vm.$refs.dialog.$el.should.have.id('my-dialog')
+    vm.$refs.dialog.$el.should.have.attr('aria-labelledby', 'my-dialog__label')
+    vm.$refs.dialog.$el.should.have.attr('aria-describedby', 'my-dialog__description')
+    vm.id = false
+    nextTick().then(() => {
+      vm.$('.mdc-dialog__header__title').should.not.have.attr('id')
+      vm.$('.mdc-dialog__body').should.not.have.attr('id')
+      vm.$refs.dialog.$el.should.not.have.attr('id')
+    }).then(done)
+  })
 })