Updated example page

assets/bootstrap-dialog/css/bootstrap-dialog.css

@@ -1,120 +1,120 @@
 .bootstrap-dialog {
-
+  /* dialog types */
+  /* dialog sizes */
+  /**
+     * Icon animation
+     * Copied from font-awesome: http://fontawesome.io/
+     **/
+  /** End of icon animation **/
 }
 .bootstrap-dialog .modal-header {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
 }
 .bootstrap-dialog .bootstrap-dialog-title {
-    color: #fff;
-    display: inline-block;
+  color: #fff;
+  display: inline-block;
 }
-.bootstrap-dialog.type-default .bootstrap-dialog-title {
-    color: #333;
-}
-.bootstrap-dialog.size-normal .bootstrap-dialog-title {
-    font-size: 16px;
-}
-.bootstrap-dialog.size-large .bootstrap-dialog-title {
-    font-size: 24px;
+.bootstrap-dialog .bootstrap-dialog-button-icon {
+  margin-right: 3px;
 }
 .bootstrap-dialog .bootstrap-dialog-close-button {
-    float: right;
-    filter:alpha(opacity=90);
-    -moz-opacity:0.9;
-    -khtml-opacity: 0.9;
-    opacity: 0.9;
-}
-.bootstrap-dialog.size-normal .bootstrap-dialog-close-button {
-    font-size: 20px;
-}
-.bootstrap-dialog.size-large .bootstrap-dialog-close-button {
-    font-size: 30px;
+  float: right;
+  filter: alpha(opacity=90);
+  -moz-opacity: 0.9;
+  -khtml-opacity: 0.9;
+  opacity: 0.9;
 }
 .bootstrap-dialog .bootstrap-dialog-close-button:hover {
-    cursor: pointer;
-    filter: alpha(opacity=100);
-    -moz-opacity: 1;
-    -khtml-opacity: 1;
-    opacity: 1;
-}
-.bootstrap-dialog.size-normal .bootstrap-dialog-message {
-    font-size: 14px;
-}
-.bootstrap-dialog.size-large .bootstrap-dialog-message {
-    font-size: 18px;
+  cursor: pointer;
+  filter: alpha(opacity=100);
+  -moz-opacity: 1;
+  -khtml-opacity: 1;
+  opacity: 1;
 }
 .bootstrap-dialog.type-default .modal-header {
-    background-color: #fff;
+  background-color: #fff;
+}
+.bootstrap-dialog.type-default .bootstrap-dialog-title {
+  color: #333;
 }
 .bootstrap-dialog.type-info .modal-header {
-    background-color: #5bc0de;
+  background-color: #5bc0de;
 }
 .bootstrap-dialog.type-primary .modal-header {
-    background-color: #428bca;
+  background-color: #428bca;
 }
 .bootstrap-dialog.type-success .modal-header {
-    background-color: #5cb85c;
+  background-color: #5cb85c;
 }
 .bootstrap-dialog.type-warning .modal-header {
-    background-color: #f0ad4e;
+  background-color: #f0ad4e;
 }
 .bootstrap-dialog.type-danger .modal-header {
-    background-color: #d9534f;
+  background-color: #d9534f;
 }
-.bootstrap-dialog .bootstrap-dialog-button-icon {
-    margin-right: 3px;
-}
-
-/**
- * Icon animation
- * Copied from font-awesome: http://fontawesome.io/
- **/
-.icon-spin {
-    display: inline-block;
-    -moz-animation: spin 2s infinite linear;
-    -o-animation: spin 2s infinite linear;
-    -webkit-animation: spin 2s infinite linear;
-    animation: spin 2s infinite linear;
+.bootstrap-dialog.size-normal .bootstrap-dialog-title {
+  font-size: 16px;
+}
+.bootstrap-dialog.size-normal .bootstrap-dialog-close-button {
+  font-size: 20px;
+}
+.bootstrap-dialog.size-normal .bootstrap-dialog-message {
+  font-size: 14px;
+}
+.bootstrap-dialog.size-large .bootstrap-dialog-title {
+  font-size: 24px;
+}
+.bootstrap-dialog.size-large .bootstrap-dialog-close-button {
+  font-size: 30px;
+}
+.bootstrap-dialog.size-large .bootstrap-dialog-message {
+  font-size: 18px;
+}
+.bootstrap-dialog .icon-spin {
+  display: inline-block;
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
 }
 @-moz-keyframes spin {
-    0% {
+  0% {
     -moz-transform: rotate(0deg);
-}
-100% {
+  }
+  100% {
     -moz-transform: rotate(359deg);
-}
+  }
 }
 @-webkit-keyframes spin {
-    0% {
+  0% {
     -webkit-transform: rotate(0deg);
-}
-100% {
+  }
+  100% {
     -webkit-transform: rotate(359deg);
-}
+  }
 }
 @-o-keyframes spin {
-    0% {
+  0% {
     -o-transform: rotate(0deg);
-}
-100% {
+  }
+  100% {
     -o-transform: rotate(359deg);
-}
+  }
 }
 @-ms-keyframes spin {
-    0% {
+  0% {
     -ms-transform: rotate(0deg);
-}
-100% {
+  }
+  100% {
     -ms-transform: rotate(359deg);
-}
+  }
 }
 @keyframes spin {
-    0% {
+  0% {
     transform: rotate(0deg);
-}
-100% {
+  }
+  100% {
     transform: rotate(359deg);
+  }
 }
-}
-/** End of icon animation **/

assets/bootstrap-dialog/js/bootstrap-dialog.js

@@ -103,7 +103,8 @@
         spinicon: BootstrapDialog.ICON_SPINNER,
         autodestroy: true,
         draggable: false,
-        animate: true
+        animate: true,
+        description: ''
     };
 
     /**
@@ -187,8 +188,8 @@
             return this;
         },
         createModal: function() {
-            var $modal = $('<div class="modal" tabindex="-1"></div>');
-            $modal.prop('id', this.getId());
+            var $modal = $('<div class="modal" tabindex="-1" role="dialog" aria-hidden="true"></div>');
+            $modal.prop('id', this.getId()).attr('aria-labelledby', this.getId() + '_title');
 
             return $modal;
         },
@@ -342,7 +343,7 @@
         updateTitle: function() {
             if (this.isRealized()) {
                 var title = this.getTitle() !== null ? this.createDynamicContent(this.getTitle()) : this.getDefaultText();
-                this.getModalHeader().find('.' + this.getNamespace('title')).html('').append(title);
+                this.getModalHeader().find('.' + this.getNamespace('title')).html('').append(title).prop('id', this.getId() + '_title');
             }
 
             return this;
@@ -473,6 +474,14 @@
         setAutodestroy: function(autodestroy) {
             this.options.autodestroy = autodestroy;
         },
+        getDescription: function() {
+            return this.options.description;
+        },
+        setDescription: function(description) {
+            this.options.description = description;
+
+            return this;
+        },
         getDefaultText: function() {
             return BootstrapDialog.DEFAULT_TEXTS[this.getType()];
         },
@@ -824,12 +833,10 @@
             $.each(BootstrapDialog.dialogs, function(dialogId, dialogInstance) {
                 dialogCount++;
             });
-            if (dialogCount > 1) {
-                var $modal = this.getModal();
-                var $backdrop = $modal.data('bs.modal').$backdrop;
-                $modal.css('z-index', BootstrapDialog.ZINDEX_MODAL + (dialogCount - 1) * 20);
-                $backdrop.css('z-index', BootstrapDialog.ZINDEX_BACKDROP + (dialogCount - 1) * 20);
-            }
+            var $modal = this.getModal();
+            var $backdrop = $modal.data('bs.modal').$backdrop;
+            $modal.css('z-index', BootstrapDialog.ZINDEX_MODAL + (dialogCount - 1) * 20);
+            $backdrop.css('z-index', BootstrapDialog.ZINDEX_BACKDROP + (dialogCount - 1) * 20);
 
             return this;
         },
@@ -838,6 +845,9 @@
             this.getModal().addClass(BootstrapDialog.NAMESPACE)
             .addClass(this.getSize())
             .addClass(this.getCssClass());
+            if(this.getDescription()){
+                this.getModal().attr('aria-describedby', this.getDescription());
+            }
             this.getModalFooter().append(this.createFooterContent());
             this.getModalHeader().append(this.createHeaderContent());
             this.getModalBody().append(this.createBodyContent());
@@ -1030,4 +1040,4 @@
 
     return BootstrapDialog;
 
-}));
+}));

index.html

@@ -643,6 +643,18 @@
         -->
     </div>
     
+    <h3>Adding a description to your dialog (for accessibility)</h3>
+    <p>This adds an 'aria-describedby' attribute to your dialog, which provides a description of the dialog for screen readers.</p>
+    <div class="source-code runnable">
+        <!--
+        BootstrapDialog.show({
+            title: 'Add Description',
+            message: 'The description is shown to screen readers.',
+            description: 'This is a Bootstrap Dialog'
+        });
+        -->
+    </div>
+    
     <h3>Data binding</h3>
     <div class="source-code runnable">
         <!--
@@ -941,7 +953,7 @@ BootstrapDialog.show({
 </div>
                     <strong>id</strong>: optional, if id is set, you can use dialogInstance.getButton(id) to get the button later. <br />
                     <strong>icon</strong>: optional, if set, the specified icon will be added to the button. <br />
-                    <strong>cssClass</strong>: optinal, additional css class to be added to the button. <br />
+                    <strong>cssClass</strong>: optional, additional css class to be added to the button. <br />
                     <strong>autospin</strong>: optinal, if it's true, after clicked the button a spinning icon appears. <br />
                     <strong>action</strong>: optional, if provided, the callback will be invoked after the button is clicked, and the dialog instance will be passed to the callback function.
                 </td>
@@ -1024,6 +1036,15 @@ BootstrapDialog.show({
                     When it's true, all modal stuff will be removed from the DOM tree after the dialog is popped down, set it to false if you need your dialog (same instance) pups up and down again and again.
                 </td>
             </tr>
+            <tr>
+                <td>description</td>
+                <td>
+                    String
+                </td>
+                <td>
+                    If provided, 'aria-describedby' attribute will be added to the dialog with the description string as its value.  This can improve accessibility, as the description can be read by screen readers.
+                </td>
+            </tr>
         </tbody>
             
     </table>