Dialog: Fixed #3637: Added role of button to close link.

2 files changed, 27 insertions, 1 deletions

diff --git a/tests/dialog.js b/tests/dialog.js
index c12266781..0c398105e 100644
--- a/tests/dialog.js
+++ b/tests/dialog.js
@@ -215,6 +215,24 @@ test("title id", function() {
 	el.remove();
 });
 
+test("ARIA", function() {
+	expect(4);
+
+	el = $('<div></div>').dialog();
+
+	equals(dlg().attr('role'), 'dialog', 'dialog role');
+
+	var labelledBy = dlg().attr('aria-labelledby');
+	ok(labelledBy.length > 0, 'has aria-labelledby attribute');
+	equals(dlg().find('.ui-dialog-title').attr('id'), labelledBy,
+		'proper aria-labelledby attribute');
+
+	equals(dlg().find('.ui-dialog-titlebar-close').attr('role'), 'button',
+		'close link role');
+
+	el.remove();
+});
+
 module("dialog: Options");
 
 test("autoOpen", function() {
diff --git a/ui/ui.dialog.js b/ui/ui.dialog.js
index 83d144fc0..ae8f8da5b 100644
--- a/ui/ui.dialog.js
+++ b/ui/ui.dialog.js
@@ -52,12 +52,20 @@ $.widget("ui.dialog", {
 
 			uiDialogTitlebar = (this.uiDialogTitlebar = $('<div/>'))
 				.addClass('ui-dialog-titlebar')
-				.append('<a href="#" class="ui-dialog-titlebar-close"><span>X</span></a>')
 				.mousedown(function() {
 					self.moveToTop();
 				})
 				.prependTo(uiDialogContainer),
 
+			uiDialogTitlebarClose = $('<a href="#"/>')
+				.addClass('ui-dialog-titlebar-close')
+				.attr('role', 'button')
+				.appendTo(uiDialogTitlebar),
+
+			uiDialogTitlebarCloseText = (this.uiDialogTitlebarCloseText = $('<span/>'))
+				.html('X')
+				.appendTo(uiDialogTitlebarClose),
+
 			title = options.title || '&nbsp;',
 			titleId = $.ui.dialog.getTitleId(this.element),
 			uiDialogTitle = $('<span/>')