spree_editor 0.50.0 → 0.50.1

data/public/javascripts/tinymce/plugins/searchreplace/editor_plugin.js

@@ -1 +1 @@
-(function(){tinymce.create("tinymce.plugins.SearchReplacePlugin",{init:function(a,c){function b(d){a.windowManager.open({file:c+"/searchreplace.htm",width:420+parseInt(a.getLang("searchreplace.delta_width",0)),height:170+parseInt(a.getLang("searchreplace.delta_height",0)),inline:1,auto_focus:0},{mode:d,search_string:a.selection.getContent({format:"text"}),plugin_url:c})}a.addCommand("mceSearch",function(){b("search")});a.addCommand("mceReplace",function(){b("replace")});a.addButton("search",{title:"searchreplace.search_desc",cmd:"mceSearch"});a.addButton("replace",{title:"searchreplace.replace_desc",cmd:"mceReplace"});a.addShortcut("ctrl+f","searchreplace.search_desc","mceSearch")},getInfo:function(){return{longname:"Search/Replace",author:"Moxiecode Systems AB",authorurl:"http://tinymce.moxiecode.com",infourl:"http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/searchreplace",version:tinymce.majorVersion+"."+tinymce.minorVersion}}});tinymce.PluginManager.add("searchreplace",tinymce.plugins.SearchReplacePlugin)})();
+(function(){tinymce.create("tinymce.plugins.SearchReplacePlugin",{init:function(a,c){function b(d){window.focus();a.windowManager.open({file:c+"/searchreplace.htm",width:420+parseInt(a.getLang("searchreplace.delta_width",0)),height:170+parseInt(a.getLang("searchreplace.delta_height",0)),inline:1,auto_focus:0},{mode:d,search_string:a.selection.getContent({format:"text"}),plugin_url:c})}a.addCommand("mceSearch",function(){b("search")});a.addCommand("mceReplace",function(){b("replace")});a.addButton("search",{title:"searchreplace.search_desc",cmd:"mceSearch"});a.addButton("replace",{title:"searchreplace.replace_desc",cmd:"mceReplace"});a.addShortcut("ctrl+f","searchreplace.search_desc","mceSearch")},getInfo:function(){return{longname:"Search/Replace",author:"Moxiecode Systems AB",authorurl:"http://tinymce.moxiecode.com",infourl:"http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/searchreplace",version:tinymce.majorVersion+"."+tinymce.minorVersion}}});tinymce.PluginManager.add("searchreplace",tinymce.plugins.SearchReplacePlugin)})();

data/public/javascripts/tinymce/plugins/searchreplace/editor_plugin_src.js

@@ -12,6 +12,10 @@
 	tinymce.create('tinymce.plugins.SearchReplacePlugin', {
 		init : function(ed, url) {
 			function open(m) {
+				// Keep IE from writing out the f/r character to the editor
+				// instance while initializing a new dialog. See: #3131190
+				window.focus();
+
 				ed.windowManager.open({
 					file : url + '/searchreplace.htm',
 					width : 420 + parseInt(ed.getLang('searchreplace.delta_width', 0)),

data/public/javascripts/tinymce/plugins/searchreplace/js/searchreplace.js

@@ -2,14 +2,18 @@ tinyMCEPopup.requireLangPack();
 
 var SearchReplaceDialog = {
 	init : function(ed) {
-		var f = document.forms[0], m = tinyMCEPopup.getWindowArg("mode");
+		var t = this, f = document.forms[0], m = tinyMCEPopup.getWindowArg("mode");
 
-		this.switchMode(m);
+		t.switchMode(m);
 
 		f[m + '_panel_searchstring'].value = tinyMCEPopup.getWindowArg("search_string");
 
 		// Focus input field
 		f[m + '_panel_searchstring'].focus();
+		
+		mcTabs.onChange.add(function(tab_id, panel_id) {
+			t.switchMode(tab_id.substring(0, tab_id.indexOf('_')));
+		});
 	},
 
 	switchMode : function(m) {
@@ -51,16 +55,14 @@ var SearchReplaceDialog = {
 
 		function fix() {
 			// Correct Firefox graphics glitches
+			// TODO: Verify if this is actually needed any more, maybe it was for very old FF versions? 
 			r = se.getRng().cloneRange();
 			ed.getDoc().execCommand('SelectAll', false, null);
 			se.setRng(r);
 		};
 
 		function replace() {
-			if (tinymce.isIE)
-				ed.selection.getRng().duplicate().pasteHTML(rs); // Needs to be duplicated due to selection bug in IE
-			else
-				ed.getDoc().execCommand('InsertHTML', false, rs);
+			ed.selection.setContent(rs); // Needs to be duplicated due to selection bug in IE
 		};
 
 		// IE flags
@@ -74,6 +76,9 @@ var SearchReplaceDialog = {
 				ed.selection.collapse(true);
 
 				if (tinymce.isIE) {
+					ed.focus();
+					r = ed.getDoc().selection.createRange();
+
 					while (r.findText(s, b ? -1 : 1, fl)) {
 						r.scrollIntoView();
 						r.select();
@@ -110,15 +115,14 @@ var SearchReplaceDialog = {
 		se.collapse(b);
 		r = se.getRng();
 
-		if (tinymce.isIE) {
-			r = ed.getDoc().selection.createRange();
-		}
-
 		// Whats the point
 		if (!s)
 			return;
 
 		if (tinymce.isIE) {
+			ed.focus();
+			r = ed.getDoc().selection.createRange();
+
 			if (r.findText(s, b ? -1 : 1, fl)) {
 				r.scrollIntoView();
 				r.select();

data/public/javascripts/tinymce/plugins/searchreplace/searchreplace.htm

@@ -8,27 +8,28 @@
 	<script type="text/javascript" src="js/searchreplace.js"></script>
 	<link rel="stylesheet" type="text/css" href="css/searchreplace.css" />
 </head>
-<body style="display:none;">
+<body style="display:none;" role="application" aria-labelledby="app_title">
+<span id="app_title" style="display:none">{#searchreplace_dlg.replace_title}</span>
 <form onsubmit="SearchReplaceDialog.searchNext('none');return false;" action="#">
 	<div class="tabs">
 		<ul>
-			<li id="search_tab"><span><a href="javascript:SearchReplaceDialog.switchMode('search');" onmousedown="return false;">{#searchreplace.search_desc}</a></span></li>
-			<li id="replace_tab"><span><a href="javascript:SearchReplaceDialog.switchMode('replace');" onmousedown="return false;">{#searchreplace_dlg.replace}</a></span></li>
+			<li id="search_tab" aria-controls="search_panel"><span><a href="javascript:SearchReplaceDialog.switchMode('search');" onmousedown="return false;">{#searchreplace.search_desc}</a></span></li>
+			<li id="replace_tab" aria-controls="replace_panel"><span><a href="javascript:SearchReplaceDialog.switchMode('replace');" onmousedown="return false;">{#searchreplace_dlg.replace}</a></span></li>
 		</ul>
 	</div>
 
 	<div class="panel_wrapper">
 		<div id="search_panel" class="panel">
-			<table border="0" cellspacing="0" cellpadding="2">
+			<table role="presentation" border="0" cellspacing="0" cellpadding="2">
 				<tr>
 					<td><label for="search_panel_searchstring">{#searchreplace_dlg.findwhat}</label></td>
-					<td><input type="text" id="search_panel_searchstring" name="search_panel_searchstring" style="width: 200px" /></td>
+					<td><input type="text" id="search_panel_searchstring" name="search_panel_searchstring" style="width: 200px" aria-required="true" /></td>
 				</tr>
 				<tr>
 					<td colspan="2">
-						<table border="0" cellspacing="0" cellpadding="0" class="direction">
-							<tr>
-								<td><label>{#searchreplace_dlg.direction}</label></td>
+						<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="direction">
+							<tr role="group" aria-labelledby="search_panel_backwards_label">
+								<td><label id="search_panel_backwards_label">{#searchreplace_dlg.direction}</label></td>
 								<td><input id="search_panel_backwardsu" name="search_panel_backwards" class="radio" type="radio" /></td>
 								<td><label for="search_panel_backwardsu">{#searchreplace_dlg.up}</label></td>
 								<td><input id="search_panel_backwardsd" name="search_panel_backwards" class="radio" type="radio" checked="checked" /></td>
@@ -39,7 +40,7 @@
 				</tr>
 				<tr>
 					<td colspan="2">
-						<table border="0" cellspacing="0" cellpadding="0">
+						<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 							<tr>
 								<td><input id="search_panel_casesensitivebox" name="search_panel_casesensitivebox" class="checkbox" type="checkbox" /></td>
 								<td><label for="search_panel_casesensitivebox">{#searchreplace_dlg.mcase}</label></td>
@@ -51,20 +52,20 @@
 		</div>
 
 		<div id="replace_panel" class="panel">
-			<table border="0" cellspacing="0" cellpadding="2">
+			<table role="presentation" border="0" cellspacing="0" cellpadding="2">
 				<tr>
 					<td><label for="replace_panel_searchstring">{#searchreplace_dlg.findwhat}</label></td>
-					<td><input type="text" id="replace_panel_searchstring" name="replace_panel_searchstring" style="width: 200px" /></td>
+					<td><input type="text" id="replace_panel_searchstring" name="replace_panel_searchstring" style="width: 200px" aria-required="true" /></td>
 				</tr>
 				<tr>
 					<td><label for="replace_panel_replacestring">{#searchreplace_dlg.replacewith}</label></td>
-					<td><input type="text" id="replace_panel_replacestring" name="replace_panel_replacestring" style="width: 200px" /></td>
+					<td><input type="text" id="replace_panel_replacestring" name="replace_panel_replacestring" style="width: 200px" aria-required="true" /></td>
 				</tr>
 				<tr>
 					<td colspan="2">
-						<table border="0" cellspacing="0" cellpadding="0" class="direction">
-							<tr>
-								<td><label>{#searchreplace_dlg.direction}</label></td>
+						<table role="presentation" border="0" cellspacing="0" cellpadding="0" class="direction">
+							<tr role="group" aria-labelledby="replace_panel_dir_label">
+								<td><label id="replace_panel_dir_label">{#searchreplace_dlg.direction}</label></td>
 								<td><input id="replace_panel_backwardsu" name="replace_panel_backwards" class="radio" type="radio" /></td>
 								<td><label for="replace_panel_backwardsu">{#searchreplace_dlg.up}</label></td>
 								<td><input id="replace_panel_backwardsd" name="replace_panel_backwards" class="radio" type="radio" checked="checked" /></td>
@@ -75,7 +76,7 @@
 				</tr>
 				<tr>
 					<td colspan="2">
-						<table border="0" cellspacing="0" cellpadding="0">
+						<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 							<tr>
 								<td><input id="replace_panel_casesensitivebox" name="replace_panel_casesensitivebox" class="checkbox" type="checkbox" /></td>
 								<td><label for="replace_panel_casesensitivebox">{#searchreplace_dlg.mcase}</label></td>

data/public/javascripts/tinymce/plugins/spellchecker/editor_plugin.js

@@ -1 +1 @@
-(function(){var a=tinymce.util.JSONRequest,c=tinymce.each,b=tinymce.DOM;tinymce.create("tinymce.plugins.SpellcheckerPlugin",{getInfo:function(){return{longname:"Spellchecker",author:"Moxiecode Systems AB",authorurl:"http://tinymce.moxiecode.com",infourl:"http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/spellchecker",version:tinymce.majorVersion+"."+tinymce.minorVersion}},init:function(e,f){var g=this,d;g.url=f;g.editor=e;g.rpcUrl=e.getParam("spellchecker_rpc_url","{backend}");if(g.rpcUrl=="{backend}"){if(tinymce.isIE){return}g.hasSupport=true;e.onContextMenu.addToTop(function(h,i){if(g.active){return false}})}e.addCommand("mceSpellCheck",function(){if(g.rpcUrl=="{backend}"){g.editor.getBody().spellcheck=g.active=!g.active;return}if(!g.active){e.setProgressState(1);g._sendRPC("checkWords",[g.selectedLang,g._getWords()],function(h){if(h.length>0){g.active=1;g._markWords(h);e.setProgressState(0);e.nodeChanged()}else{e.setProgressState(0);if(e.getParam("spellchecker_report_no_misspellings",true)){e.windowManager.alert("spellchecker.no_mpell")}}})}else{g._done()}});e.onInit.add(function(){if(e.settings.content_css!==false){e.dom.loadCSS(f+"/css/content.css")}});e.onClick.add(g._showMenu,g);e.onContextMenu.add(g._showMenu,g);e.onBeforeGetContent.add(function(){if(g.active){g._removeWords()}});e.onNodeChange.add(function(i,h){h.setActive("spellchecker",g.active)});e.onSetContent.add(function(){g._done()});e.onBeforeGetContent.add(function(){g._done()});e.onBeforeExecCommand.add(function(h,i){if(i=="mceFullScreen"){g._done()}});g.languages={};c(e.getParam("spellchecker_languages","+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv","hash"),function(i,h){if(h.indexOf("+")===0){h=h.substring(1);g.selectedLang=i}g.languages[h]=i})},createControl:function(h,d){var f=this,g,e=f.editor;if(h=="spellchecker"){if(f.rpcUrl=="{backend}"){if(f.hasSupport){g=d.createButton(h,{title:"spellchecker.desc",cmd:"mceSpellCheck",scope:f})}return g}g=d.createSplitButton(h,{title:"spellchecker.desc",cmd:"mceSpellCheck",scope:f});g.onRenderMenu.add(function(j,i){i.add({title:"spellchecker.langs","class":"mceMenuItemTitle"}).setDisabled(1);c(f.languages,function(n,m){var p={icon:1},l;p.onclick=function(){l.setSelected(1);f.selectedItem.setSelected(0);f.selectedItem=l;f.selectedLang=n};p.title=m;l=i.add(p);l.setSelected(n==f.selectedLang);if(n==f.selectedLang){f.selectedItem=l}})});return g}},_walk:function(i,g){var h=this.editor.getDoc(),e;if(h.createTreeWalker){e=h.createTreeWalker(i,NodeFilter.SHOW_TEXT,null,false);while((i=e.nextNode())!=null){g.call(this,i)}}else{tinymce.walk(i,g,"childNodes")}},_getSeparators:function(){var e="",d,f=this.editor.getParam("spellchecker_word_separator_chars",'\\s!"#$%&()*+,-./:;<=>?@[]^_{|}����������������\u201d\u201c');for(d=0;d<f.length;d++){e+="\\"+f.charAt(d)}return e},_getWords:function(){var e=this.editor,g=[],d="",f={},h=[];this._walk(e.getBody(),function(i){if(i.nodeType==3){d+=i.nodeValue+" "}});if(e.getParam("spellchecker_word_pattern")){h=d.match("("+e.getParam("spellchecker_word_pattern")+")","gi")}else{d=d.replace(new RegExp("([0-9]|["+this._getSeparators()+"])","g")," ");d=tinymce.trim(d.replace(/(\s+)/g," "));h=d.split(" ")}c(h,function(i){if(!f[i]){g.push(i);f[i]=1}});return g},_removeWords:function(e){var f=this.editor,h=f.dom,g=f.selection,d=g.getBookmark();c(h.select("span").reverse(),function(i){if(i&&(h.hasClass(i,"mceItemHiddenSpellWord")||h.hasClass(i,"mceItemHidden"))){if(!e||h.decode(i.innerHTML)==e){h.remove(i,1)}}});g.moveToBookmark(d)},_markWords:function(o){var i,h,g,f,e,n="",k=this.editor,p=this._getSeparators(),j=k.dom,d=[];var l=k.selection,m=l.getBookmark();c(o,function(q){n+=(n?"|":"")+q});i=new RegExp("(["+p+"])("+n+")(["+p+"])","g");h=new RegExp("^("+n+")","g");g=new RegExp("("+n+")(["+p+"]?)$","g");f=new RegExp("^("+n+")(["+p+"]?)$","g");e=new RegExp("("+n+")(["+p+"])","g");this._walk(this.editor.getBody(),function(q){if(q.nodeType==3){d.push(q)}});c(d,function(r){var q;if(r.nodeType==3){q=r.nodeValue;if(i.test(q)||h.test(q)||g.test(q)||f.test(q)){q=j.encode(q);q=q.replace(e,'<span class="mceItemHiddenSpellWord">$1</span>$2');q=q.replace(g,'<span class="mceItemHiddenSpellWord">$1</span>$2');j.replace(j.create("span",{"class":"mceItemHidden"},q),r)}}});l.moveToBookmark(m)},_showMenu:function(h,j){var i=this,h=i.editor,d=i._menu,l,k=h.dom,g=k.getViewPort(h.getWin()),f=j.target;j=0;if(!d){l=b.getPos(h.getContentAreaContainer());d=h.controlManager.createDropMenu("spellcheckermenu",{offset_x:l.x,offset_y:l.y,"class":"mceNoIcons"});i._menu=d}if(k.hasClass(f,"mceItemHiddenSpellWord")){d.removeAll();d.add({title:"spellchecker.wait","class":"mceMenuItemTitle"}).setDisabled(1);i._sendRPC("getSuggestions",[i.selectedLang,k.decode(f.innerHTML)],function(m){var e;d.removeAll();if(m.length>0){d.add({title:"spellchecker.sug","class":"mceMenuItemTitle"}).setDisabled(1);c(m,function(n){d.add({title:n,onclick:function(){k.replace(h.getDoc().createTextNode(n),f);i._checkDone()}})});d.addSeparator()}else{d.add({title:"spellchecker.no_sug","class":"mceMenuItemTitle"}).setDisabled(1)}e=i.editor.getParam("spellchecker_enable_ignore_rpc","");d.add({title:"spellchecker.ignore_word",onclick:function(){var n=f.innerHTML;k.remove(f,1);i._checkDone();if(e){h.setProgressState(1);i._sendRPC("ignoreWord",[i.selectedLang,n],function(o){h.setProgressState(0)})}}});d.add({title:"spellchecker.ignore_words",onclick:function(){var n=f.innerHTML;i._removeWords(k.decode(n));i._checkDone();if(e){h.setProgressState(1);i._sendRPC("ignoreWords",[i.selectedLang,n],function(o){h.setProgressState(0)})}}});if(i.editor.getParam("spellchecker_enable_learn_rpc")){d.add({title:"spellchecker.learn_word",onclick:function(){var n=f.innerHTML;k.remove(f,1);i._checkDone();h.setProgressState(1);i._sendRPC("learnWord",[i.selectedLang,n],function(o){h.setProgressState(0)})}})}d.update()});h.selection.select(f);l=k.getPos(f);d.showMenu(l.x,l.y+f.offsetHeight-g.y);return tinymce.dom.Event.cancel(j)}else{d.hideMenu()}},_checkDone:function(){var e=this,d=e.editor,g=d.dom,f;c(g.select("span"),function(h){if(h&&g.hasClass(h,"mceItemHiddenSpellWord")){f=true;return false}});if(!f){e._done()}},_done:function(){var d=this,e=d.active;if(d.active){d.active=0;d._removeWords();if(d._menu){d._menu.hideMenu()}if(e){d.editor.nodeChanged()}}},_sendRPC:function(e,g,d){var f=this;a.sendRPC({url:f.rpcUrl,method:e,params:g,success:d,error:function(i,h){f.editor.setProgressState(0);f.editor.windowManager.alert(i.errstr||("Error response: "+h.responseText))}})}});tinymce.PluginManager.add("spellchecker",tinymce.plugins.SpellcheckerPlugin)})();
+(function(){var a=tinymce.util.JSONRequest,c=tinymce.each,b=tinymce.DOM;tinymce.create("tinymce.plugins.SpellcheckerPlugin",{getInfo:function(){return{longname:"Spellchecker",author:"Moxiecode Systems AB",authorurl:"http://tinymce.moxiecode.com",infourl:"http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/spellchecker",version:tinymce.majorVersion+"."+tinymce.minorVersion}},init:function(e,f){var g=this,d;g.url=f;g.editor=e;g.rpcUrl=e.getParam("spellchecker_rpc_url","{backend}");if(g.rpcUrl=="{backend}"){if(tinymce.isIE){return}g.hasSupport=true;e.onContextMenu.addToTop(function(h,i){if(g.active){return false}})}e.addCommand("mceSpellCheck",function(){if(g.rpcUrl=="{backend}"){g.editor.getBody().spellcheck=g.active=!g.active;return}if(!g.active){e.setProgressState(1);g._sendRPC("checkWords",[g.selectedLang,g._getWords()],function(h){if(h.length>0){g.active=1;g._markWords(h);e.setProgressState(0);e.nodeChanged()}else{e.setProgressState(0);if(e.getParam("spellchecker_report_no_misspellings",true)){e.windowManager.alert("spellchecker.no_mpell")}}})}else{g._done()}});if(e.settings.content_css!==false){e.contentCSS.push(f+"/css/content.css")}e.onClick.add(g._showMenu,g);e.onContextMenu.add(g._showMenu,g);e.onBeforeGetContent.add(function(){if(g.active){g._removeWords()}});e.onNodeChange.add(function(i,h){h.setActive("spellchecker",g.active)});e.onSetContent.add(function(){g._done()});e.onBeforeGetContent.add(function(){g._done()});e.onBeforeExecCommand.add(function(h,i){if(i=="mceFullScreen"){g._done()}});g.languages={};c(e.getParam("spellchecker_languages","+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv","hash"),function(i,h){if(h.indexOf("+")===0){h=h.substring(1);g.selectedLang=i}g.languages[h]=i})},createControl:function(h,d){var f=this,g,e=f.editor;if(h=="spellchecker"){if(f.rpcUrl=="{backend}"){if(f.hasSupport){g=d.createButton(h,{title:"spellchecker.desc",cmd:"mceSpellCheck",scope:f})}return g}g=d.createSplitButton(h,{title:"spellchecker.desc",cmd:"mceSpellCheck",scope:f});g.onRenderMenu.add(function(j,i){i.add({title:"spellchecker.langs","class":"mceMenuItemTitle"}).setDisabled(1);c(f.languages,function(n,m){var p={icon:1},l;p.onclick=function(){if(n==f.selectedLang){return}l.setSelected(1);f.selectedItem.setSelected(0);f.selectedItem=l;f.selectedLang=n};p.title=m;l=i.add(p);l.setSelected(n==f.selectedLang);if(n==f.selectedLang){f.selectedItem=l}})});return g}},_walk:function(i,g){var h=this.editor.getDoc(),e;if(h.createTreeWalker){e=h.createTreeWalker(i,NodeFilter.SHOW_TEXT,null,false);while((i=e.nextNode())!=null){g.call(this,i)}}else{tinymce.walk(i,g,"childNodes")}},_getSeparators:function(){var e="",d,f=this.editor.getParam("spellchecker_word_separator_chars",'\\s!"#$%&()*+,-./:;<=>?@[]^_{|}����������������\u201d\u201c');for(d=0;d<f.length;d++){e+="\\"+f.charAt(d)}return e},_getWords:function(){var e=this.editor,g=[],d="",f={},h=[];this._walk(e.getBody(),function(i){if(i.nodeType==3){d+=i.nodeValue+" "}});if(e.getParam("spellchecker_word_pattern")){h=d.match("("+e.getParam("spellchecker_word_pattern")+")","gi")}else{d=d.replace(new RegExp("([0-9]|["+this._getSeparators()+"])","g")," ");d=tinymce.trim(d.replace(/(\s+)/g," "));h=d.split(" ")}c(h,function(i){if(!f[i]){g.push(i);f[i]=1}});return g},_removeWords:function(e){var f=this.editor,h=f.dom,g=f.selection,d=g.getBookmark();c(h.select("span").reverse(),function(i){if(i&&(h.hasClass(i,"mceItemHiddenSpellWord")||h.hasClass(i,"mceItemHidden"))){if(!e||h.decode(i.innerHTML)==e){h.remove(i,1)}}});g.moveToBookmark(d)},_markWords:function(l){var g=this.editor,f=g.dom,j=g.getDoc(),h=g.selection,i=h.getBookmark(),d=[],k=l.join("|"),m=this._getSeparators(),e=new RegExp("(^|["+m+"])("+k+")(?=["+m+"]|$)","g");this._walk(g.getBody(),function(o){if(o.nodeType==3){d.push(o)}});c(d,function(t){var r,q,o,s,p=t.nodeValue;if(e.test(p)){p=f.encode(p);q=f.create("span",{"class":"mceItemHidden"});if(tinymce.isIE){p=p.replace(e,"$1<mcespell>$2</mcespell>");while((s=p.indexOf("<mcespell>"))!=-1){o=p.substring(0,s);if(o.length){r=j.createTextNode(f.decode(o));q.appendChild(r)}p=p.substring(s+10);s=p.indexOf("</mcespell>");o=p.substring(0,s);p=p.substring(s+11);q.appendChild(f.create("span",{"class":"mceItemHiddenSpellWord"},o))}if(p.length){r=j.createTextNode(f.decode(p));q.appendChild(r)}}else{q.innerHTML=p.replace(e,'$1<span class="mceItemHiddenSpellWord">$2</span>')}f.replace(q,t)}});h.moveToBookmark(i)},_showMenu:function(h,j){var i=this,h=i.editor,d=i._menu,l,k=h.dom,g=k.getViewPort(h.getWin()),f=j.target;j=0;if(!d){d=h.controlManager.createDropMenu("spellcheckermenu",{"class":"mceNoIcons"});i._menu=d}if(k.hasClass(f,"mceItemHiddenSpellWord")){d.removeAll();d.add({title:"spellchecker.wait","class":"mceMenuItemTitle"}).setDisabled(1);i._sendRPC("getSuggestions",[i.selectedLang,k.decode(f.innerHTML)],function(m){var e;d.removeAll();if(m.length>0){d.add({title:"spellchecker.sug","class":"mceMenuItemTitle"}).setDisabled(1);c(m,function(n){d.add({title:n,onclick:function(){k.replace(h.getDoc().createTextNode(n),f);i._checkDone()}})});d.addSeparator()}else{d.add({title:"spellchecker.no_sug","class":"mceMenuItemTitle"}).setDisabled(1)}e=i.editor.getParam("spellchecker_enable_ignore_rpc","");d.add({title:"spellchecker.ignore_word",onclick:function(){var n=f.innerHTML;k.remove(f,1);i._checkDone();if(e){h.setProgressState(1);i._sendRPC("ignoreWord",[i.selectedLang,n],function(o){h.setProgressState(0)})}}});d.add({title:"spellchecker.ignore_words",onclick:function(){var n=f.innerHTML;i._removeWords(k.decode(n));i._checkDone();if(e){h.setProgressState(1);i._sendRPC("ignoreWords",[i.selectedLang,n],function(o){h.setProgressState(0)})}}});if(i.editor.getParam("spellchecker_enable_learn_rpc")){d.add({title:"spellchecker.learn_word",onclick:function(){var n=f.innerHTML;k.remove(f,1);i._checkDone();h.setProgressState(1);i._sendRPC("learnWord",[i.selectedLang,n],function(o){h.setProgressState(0)})}})}d.update()});l=k.getPos(h.getContentAreaContainer());d.settings.offset_x=l.x;d.settings.offset_y=l.y;h.selection.select(f);l=k.getPos(f);d.showMenu(l.x,l.y+f.offsetHeight-g.y);return tinymce.dom.Event.cancel(j)}else{d.hideMenu()}},_checkDone:function(){var e=this,d=e.editor,g=d.dom,f;c(g.select("span"),function(h){if(h&&g.hasClass(h,"mceItemHiddenSpellWord")){f=true;return false}});if(!f){e._done()}},_done:function(){var d=this,e=d.active;if(d.active){d.active=0;d._removeWords();if(d._menu){d._menu.hideMenu()}if(e){d.editor.nodeChanged()}}},_sendRPC:function(e,g,d){var f=this;a.sendRPC({url:f.rpcUrl,method:e,params:g,success:d,error:function(i,h){f.editor.setProgressState(0);f.editor.windowManager.alert(i.errstr||("Error response: "+h.responseText))}})}});tinymce.PluginManager.add("spellchecker",tinymce.plugins.SpellcheckerPlugin)})();

data/public/javascripts/tinymce/plugins/spellchecker/editor_plugin_src.js

@@ -70,10 +70,8 @@
 					t._done();
 			});
 
-			ed.onInit.add(function() {
-				if (ed.settings.content_css !== false)
-					ed.dom.loadCSS(url + '/css/content.css');
-			});
+			if (ed.settings.content_css !== false)
+				ed.contentCSS.push(url + '/css/content.css');
 
 			ed.onClick.add(t._showMenu, t);
 			ed.onContextMenu.add(t._showMenu, t);
@@ -132,6 +130,9 @@
 						var o = {icon : 1}, mi;
 
 						o.onclick = function() {
+							if (v == t.selectedLang) {
+								return;
+							}
 							mi.setSelected(1);
 							t.selectedItem.setSelected(0);
 							t.selectedItem = mi;
@@ -220,21 +221,11 @@
 		},
 
 		_markWords : function(wl) {
-			var r1, r2, r3, r4, r5, w = '', ed = this.editor, re = this._getSeparators(), dom = ed.dom, nl = [];
-			var se = ed.selection, b = se.getBookmark();
-
-			each(wl, function(v) {
-				w += (w ? '|' : '') + v;
-			});
-
-			r1 = new RegExp('([' + re + '])(' + w + ')([' + re + '])', 'g');
-			r2 = new RegExp('^(' + w + ')', 'g');
-			r3 = new RegExp('(' + w + ')([' + re + ']?)$', 'g');
-			r4 = new RegExp('^(' + w + ')([' + re + ']?)$', 'g');
-			r5 = new RegExp('(' + w + ')([' + re + '])', 'g');
+			var ed = this.editor, dom = ed.dom, doc = ed.getDoc(), se = ed.selection, b = se.getBookmark(), nl = [],
+				w = wl.join('|'), re = this._getSeparators(), rx = new RegExp('(^|[' + re + '])(' + w + ')(?=[' + re + ']|$)', 'g');
 
 			// Collect all text nodes
-			this._walk(this.editor.getBody(), function(n) {
+			this._walk(ed.getBody(), function(n) {
 				if (n.nodeType == 3) {
 					nl.push(n);
 				}
@@ -242,18 +233,49 @@
 
 			// Wrap incorrect words in spans
 			each(nl, function(n) {
-				var v;
-
-				if (n.nodeType == 3) {
-					v = n.nodeValue;
-
-					if (r1.test(v) || r2.test(v) || r3.test(v) || r4.test(v)) {
-						v = dom.encode(v);
-						v = v.replace(r5, '<span class="mceItemHiddenSpellWord">$1</span>$2');
-						v = v.replace(r3, '<span class="mceItemHiddenSpellWord">$1</span>$2');
-
-						dom.replace(dom.create('span', {'class' : 'mceItemHidden'}, v), n);
+				var node, elem, txt, pos, v = n.nodeValue;
+
+				if (rx.test(v)) {
+					// Encode the content
+					v = dom.encode(v);
+					// Create container element
+					elem = dom.create('span', {'class' : 'mceItemHidden'});
+
+					// Following code fixes IE issues by creating text nodes
+					// using DOM methods instead of innerHTML.
+					// Bug #3124: <PRE> elements content is broken after spellchecking.
+					// Bug #1408: Preceding whitespace characters are removed
+					// @TODO: I'm not sure that both are still issues on IE9.
+					if (tinymce.isIE) {
+						// Enclose mispelled words with temporal tag
+						v = v.replace(rx, '$1<mcespell>$2</mcespell>');
+						// Loop over the content finding mispelled words
+						while ((pos = v.indexOf('<mcespell>')) != -1) {
+							// Add text node for the content before the word
+							txt = v.substring(0, pos);
+							if (txt.length) {
+								node = doc.createTextNode(dom.decode(txt));
+								elem.appendChild(node);
+							}
+							v = v.substring(pos+10);
+							pos = v.indexOf('</mcespell>');
+							txt = v.substring(0, pos);
+							v = v.substring(pos+11);
+							// Add span element for the word
+							elem.appendChild(dom.create('span', {'class' : 'mceItemHiddenSpellWord'}, txt));
+						}
+						// Add text node for the rest of the content
+						if (v.length) {
+							node = doc.createTextNode(dom.decode(v));
+							elem.appendChild(node);
+						}
+					} else {
+						// Other browsers preserve whitespace characters on innerHTML usage
+						elem.innerHTML = v.replace(rx, '$1<span class="mceItemHiddenSpellWord">$2</span>');
 					}
+
+					// Finally, replace the node with the container
+					dom.replace(elem, n);
 				}
 			});
 
@@ -266,15 +288,7 @@
 			e = 0; // Fixes IE memory leak
 
 			if (!m) {
-				p1 = DOM.getPos(ed.getContentAreaContainer());
-				//p2 = DOM.getPos(ed.getContainer());
-
-				m = ed.controlManager.createDropMenu('spellcheckermenu', {
-					offset_x : p1.x,
-					offset_y : p1.y,
-					'class' : 'mceNoIcons'
-				});
-
+				m = ed.controlManager.createDropMenu('spellcheckermenu', {'class' : 'mceNoIcons'});
 				t._menu = m;
 			}
 
@@ -358,6 +372,10 @@
 					m.update();
 				});
 
+				p1 = dom.getPos(ed.getContentAreaContainer());
+				m.settings.offset_x = p1.x;
+				m.settings.offset_y = p1.y;
+
 				ed.selection.select(wordSpan);
 				p1 = dom.getPos(wordSpan);
 				m.showMenu(p1.x, p1.y + wordSpan.offsetHeight - vp.y);

data/public/javascripts/tinymce/plugins/style/js/props.js

@@ -177,11 +177,7 @@ function setupFormData() {
 
 	f.box_height.value = getNum(ce.style.height);
 	selectByValue(f, 'box_height_measurement', getMeasurement(ce.style.height));
-
-	if (tinymce.isGecko)
-		selectByValue(f, 'box_float', ce.style.cssFloat, true, true);
-	else
-		selectByValue(f, 'box_float', ce.style.styleFloat, true, true);
+	selectByValue(f, 'box_float', ce.style.cssFloat || ce.style.styleFloat, true, true);
 
 	selectByValue(f, 'box_clear', ce.style.clear, true, true);
 
@@ -440,9 +436,7 @@ function generateCSS() {
 	ce.style.width = f.box_width.value + (isNum(f.box_width.value) ? f.box_width_measurement.value : "");
 	ce.style.height = f.box_height.value + (isNum(f.box_height.value) ? f.box_height_measurement.value : "");
 	ce.style.styleFloat = f.box_float.value;
-
-	if (tinymce.isGecko)
-		ce.style.cssFloat = f.box_float.value;
+	ce.style.cssFloat = f.box_float.value;
 
 	ce.style.clear = f.box_clear.value;
 

data/public/javascripts/tinymce/plugins/style/langs/en_dlg.js

@@ -59,5 +59,12 @@ visibility:"Visibility",
 zindex:"Z-index",
 overflow:"Overflow",
 placement:"Placement",
-clip:"Clip"
+clip:"Clip",
+text:"Text",
+background:"Background",
+block:"Block",
+box:"Box",
+border:"Border",
+list:"List",
+position:"Position"
 });

data/public/javascripts/tinymce/plugins/style/props.htm

@@ -10,277 +10,317 @@
 	<link href="css/props.css" rel="stylesheet" type="text/css" />
 </head>
 
-<body id="styleprops" style="display: none">
+<body id="styleprops" style="display: none" role="application" aria-labelledby="app_title">
+<span id="app_title" style="display:none">{#style_dlg.title}</span>
 <form onsubmit="updateAction();return false;" action="#">
 <div class="tabs">
 	<ul>
-		<li id="text_tab" class="current"><span><a href="javascript:mcTabs.displayTab('text_tab','text_panel');" onMouseDown="return false;">{#style_dlg.text_tab}</a></span></li>
-		<li id="background_tab"><span><a href="javascript:mcTabs.displayTab('background_tab','background_panel');" onMouseDown="return false;">{#style_dlg.background_tab}</a></span></li>
-		<li id="block_tab"><span><a href="javascript:mcTabs.displayTab('block_tab','block_panel');" onMouseDown="return false;">{#style_dlg.block_tab}</a></span></li>
-		<li id="box_tab"><span><a href="javascript:mcTabs.displayTab('box_tab','box_panel');" onMouseDown="return false;">{#style_dlg.box_tab}</a></span></li>
-		<li id="border_tab"><span><a href="javascript:mcTabs.displayTab('border_tab','border_panel');" onMouseDown="return false;">{#style_dlg.border_tab}</a></span></li>
-		<li id="list_tab"><span><a href="javascript:mcTabs.displayTab('list_tab','list_panel');" onMouseDown="return false;">{#style_dlg.list_tab}</a></span></li>
-		<li id="positioning_tab"><span><a href="javascript:mcTabs.displayTab('positioning_tab','positioning_panel');" onMouseDown="return false;">{#style_dlg.positioning_tab}</a></span></li>
+		<li id="text_tab" class="current" aria-controls="text_panel"><span><a href="javascript:mcTabs.displayTab('text_tab','text_panel');" onMouseDown="return false;">{#style_dlg.text_tab}</a></span></li>
+		<li id="background_tab" aria-controls="background_panel"><span><a href="javascript:mcTabs.displayTab('background_tab','background_panel');" onMouseDown="return false;">{#style_dlg.background_tab}</a></span></li>
+		<li id="block_tab" aria-controls="block_panel"><span><a href="javascript:mcTabs.displayTab('block_tab','block_panel');" onMouseDown="return false;">{#style_dlg.block_tab}</a></span></li>
+		<li id="box_tab" aria-controls="box_panel"><span><a href="javascript:mcTabs.displayTab('box_tab','box_panel');" onMouseDown="return false;">{#style_dlg.box_tab}</a></span></li>
+		<li id="border_tab" aria-controls="border_panel"><span><a href="javascript:mcTabs.displayTab('border_tab','border_panel');" onMouseDown="return false;">{#style_dlg.border_tab}</a></span></li>
+		<li id="list_tab" aria-controls="list_panel"><span><a href="javascript:mcTabs.displayTab('list_tab','list_panel');" onMouseDown="return false;">{#style_dlg.list_tab}</a></span></li>
+		<li id="positioning_tab" aria-controls="positioning_panel"><span><a href="javascript:mcTabs.displayTab('positioning_tab','positioning_panel');" onMouseDown="return false;">{#style_dlg.positioning_tab}</a></span></li>
 	</ul>
 </div>
 
 <div class="panel_wrapper">
 <div id="text_panel" class="panel current">
-	<table border="0" width="100%">
-		<tr>
-			<td><label for="text_font">{#style_dlg.text_font}</label></td>
-			<td colspan="3">
-				<select id="text_font" name="text_font" class="mceEditableSelect mceFocus"></select>
-			</td>
-		</tr>
-		<tr>
-			<td><label for="text_size">{#style_dlg.text_size}</label></td>
-			<td>
-				<table border="0" cellspacing="0" cellpadding="0">
-					<tr>
-						<td><select id="text_size" name="text_size" class="mceEditableSelect"></select></td>
-						<td>&nbsp;</td>
-						<td><select id="text_size_measurement" name="text_size_measurement"></select></td>
-					</tr>
-				</table>
-			</td>
-			<td><label for="text_weight">{#style_dlg.text_weight}</label></td>
-			<td>
-				<select id="text_weight" name="text_weight"></select>
-			</td>
-		</tr>
-		<tr>
-			<td><label for="text_style">{#style_dlg.text_style}</label></td>
-			<td>
-				<select id="text_style" name="text_style" class="mceEditableSelect"></select>
-			</td>
-			<td><label for="text_variant">{#style_dlg.text_variant}</label></td>
-			<td>
-				<select id="text_variant" name="text_variant"></select>
-			</td>
-		</tr>
-		<tr>
-			<td><label for="text_lineheight">{#style_dlg.text_lineheight}</label></td>
-			<td>
-				<table border="0" cellspacing="0" cellpadding="0">
-					<tr>
-						<td>
-							<select id="text_lineheight" name="text_lineheight" class="mceEditableSelect"></select>
-						</td>
-						<td>&nbsp;</td>
-						<td><select id="text_lineheight_measurement" name="text_lineheight_measurement"></select></td>
-					</tr>
-				</table>
-			</td>
-			<td><label for="text_case">{#style_dlg.text_case}</label></td>
-			<td>
-				<select id="text_case" name="text_case"></select>
-			</td>
-		</tr>
-		<tr>
-			<td><label for="text_color">{#style_dlg.text_color}</label></td>
-			<td colspan="2">
-				<table border="0" cellpadding="0" cellspacing="0">
-					<tr>
-						<td><input id="text_color" name="text_color" type="text" value="" size="9" onChange="updateColor('text_color_pick','text_color');" /></td>
-						<td id="text_color_pickcontainer">&nbsp;</td>
-					</tr>
-				</table>
-			</td>
-		</tr>
-		<tr>
-			<td valign="top" style="vertical-align: top; padding-top: 3px;">{#style_dlg.text_decoration}</td>
-			<td colspan="2">
-				<table border="0" cellspacing="0" cellpadding="0">
-					<tr>
-						<td><input id="text_underline" name="text_underline" class="checkbox" type="checkbox" /></td>
-						<td><label for="text_underline">{#style_dlg.text_underline}</label></td>
-					</tr>
-					<tr>
-						<td><input id="text_overline" name="text_overline" class="checkbox" type="checkbox" /></td>
-						<td><label for="text_overline">{#style_dlg.text_overline}</label></td>
-					</tr>
-					<tr>
-						<td><input id="text_linethrough" name="text_linethrough" class="checkbox" type="checkbox" /></td>
-						<td><label for="text_linethrough">{#style_dlg.text_striketrough}</label></td>
-					</tr>
-					<tr>
-						<td><input id="text_blink" name="text_blink" class="checkbox" type="checkbox" /></td>
-						<td><label for="text_blink">{#style_dlg.text_blink}</label></td>
-					</tr>
-					<tr>
-						<td><input id="text_none" name="text_none" class="checkbox" type="checkbox" /></td>
-						<td><label for="text_none">{#style_dlg.text_none}</label></td>
-					</tr>
-				</table>
-			</td>
-		</tr>
-	</table>
+	<fieldset>
+		<legend>{#style_dlg.text}</legend>
+		<table role="presentation" border="0" width="100%">
+			<tr>
+				<td><label for="text_font">{#style_dlg.text_font}</label></td>
+				<td colspan="3">
+					<select id="text_font" name="text_font" class="mceEditableSelect mceFocus"></select>
+				</td>
+			</tr>
+			<tr>
+				<td><label for="text_size">{#style_dlg.text_size}</label></td>
+				<td>
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+						<tr>
+							<td><select id="text_size" name="text_size" class="mceEditableSelect"></select></td>
+							<td>&nbsp;</td>
+							<td>
+								<label id="text_size_measurement_label" for="text_size_measurement" style="display: none; visibility: hidden;">Text Size Measurement Unit</label>
+								<select id="text_size_measurement" name="text_size_measurement" aria-labelledby="text_size_measurement_label"></select>
+							</td>
+						</tr>
+					</table>
+				</td>
+				<td><label for="text_weight">{#style_dlg.text_weight}</label></td>
+				<td>
+					<select id="text_weight" name="text_weight"></select>
+				</td>
+			</tr>
+			<tr>
+				<td><label for="text_style">{#style_dlg.text_style}</label></td>
+				<td>
+					<select id="text_style" name="text_style" class="mceEditableSelect"></select>
+				</td>
+				<td><label for="text_variant">{#style_dlg.text_variant}</label></td>
+				<td>
+					<select id="text_variant" name="text_variant"></select>
+				</td>
+			</tr>
+			<tr>
+				<td><label for="text_lineheight">{#style_dlg.text_lineheight}</label></td>
+				<td>
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+						<tr>
+							<td>
+								<select id="text_lineheight" name="text_lineheight" class="mceEditableSelect"></select>
+							</td>
+							<td>&nbsp;</td>
+							<td>
+								<label id="text_lineheight_measurement_label" for="text_lineheight_measurement" style="display: none; visibility: hidden;">Line Height Measurement Unit</label>
+								<select id="text_lineheight_measurement" name="text_lineheight_measurement" aria-labelledby="text_lineheight_measurement_label"></select>
+							</td>
+						</tr>
+					</table>
+				</td>
+				<td><label for="text_case">{#style_dlg.text_case}</label></td>
+				<td>
+					<select id="text_case" name="text_case"></select>
+				</td>
+			</tr>
+			<tr>
+				<td><label for="text_color">{#style_dlg.text_color}</label></td>
+				<td colspan="2">
+					<table role="presentation" border="0" cellpadding="0" cellspacing="0">
+						<tr>
+							<td><input id="text_color" name="text_color" type="text" value="" size="9" onChange="updateColor('text_color_pick','text_color');" /></td>
+							<td id="text_color_pickcontainer">&nbsp;</td>
+						</tr>
+					</table>
+				</td>
+			</tr>
+			<tr>
+				<td valign="top" style="vertical-align: top; padding-top: 3px;">{#style_dlg.text_decoration}</td>
+				<td colspan="2">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+						<tr>
+							<td><input id="text_underline" name="text_underline" class="checkbox" type="checkbox" /></td>
+							<td><label for="text_underline">{#style_dlg.text_underline}</label></td>
+						</tr>
+						<tr>
+							<td><input id="text_overline" name="text_overline" class="checkbox" type="checkbox" /></td>
+							<td><label for="text_overline">{#style_dlg.text_overline}</label></td>
+						</tr>
+						<tr>
+							<td><input id="text_linethrough" name="text_linethrough" class="checkbox" type="checkbox" /></td>
+							<td><label for="text_linethrough">{#style_dlg.text_striketrough}</label></td>
+						</tr>
+						<tr>
+							<td><input id="text_blink" name="text_blink" class="checkbox" type="checkbox" /></td>
+							<td><label for="text_blink">{#style_dlg.text_blink}</label></td>
+						</tr>
+						<tr>
+							<td><input id="text_none" name="text_none" class="checkbox" type="checkbox" /></td>
+							<td><label for="text_none">{#style_dlg.text_none}</label></td>
+						</tr>
+					</table>
+				</td>
+			</tr>
+		</table>
+	</fieldset>
 </div>
 
 <div id="background_panel" class="panel">
-	<table border="0">
-		<tr>
-			<td><label for="background_color">{#style_dlg.background_color}</label></td>
-			<td>
-				<table border="0" cellpadding="0" cellspacing="0">
-					<tr>
-						<td><input id="background_color" name="background_color" type="text" value="" size="9" onChange="updateColor('background_color_pick','background_color');" /></td>
-						<td id="background_color_pickcontainer">&nbsp;</td>
+	<fieldset>
+		<legend>{#style_dlg.background}</legend>
+		<table role="presentation" border="0">
+			<tr>
+				<td><label for="background_color">{#style_dlg.background_color}</label></td>
+				<td>
+					<table role="presentation" border="0" cellpadding="0" cellspacing="0">
+						<tr>
+							<td><input id="background_color" name="background_color" type="text" value="" size="9" onChange="updateColor('background_color_pick','background_color');" /></td>
+							<td id="background_color_pickcontainer">&nbsp;</td>
+						</tr>
+					</table>
+				</td>
+			</tr>
+
+			<tr>
+				<td><label for="background_image">{#style_dlg.background_image}</label></td>
+				<td><table role="presentation" border="0" cellspacing="0" cellpadding="0">
+					<tr> 
+						<td><input id="background_image" name="background_image" type="text" /></td> 
+						<td id="background_image_browser">&nbsp;</td>
 					</tr>
-				</table>
-			</td>
-		</tr>
+					</table>
+				</td>
+			</tr>
 
-		<tr>
-			<td><label for="background_image">{#style_dlg.background_image}</label></td>
-			<td><table border="0" cellspacing="0" cellpadding="0">
-				<tr> 
-				  <td><input id="background_image" name="background_image" type="text" /></td> 
-				  <td id="background_image_browser">&nbsp;</td>
-				</tr>
-				</table>
-			</td>
-		</tr>
+			<tr>
+				<td><label for="background_repeat">{#style_dlg.background_repeat}</label></td>
+				<td><select id="background_repeat" name="background_repeat" class="mceEditableSelect"></select></td>
+			</tr>
 
-		<tr>
-			<td><label for="background_repeat">{#style_dlg.background_repeat}</label></td>
-			<td><select id="background_repeat" name="background_repeat" class="mceEditableSelect"></select></td>
-		</tr>
+			<tr>
+				<td><label for="background_attachment">{#style_dlg.background_attachment}</label></td>
+				<td><select id="background_attachment" name="background_attachment" class="mceEditableSelect"></select></td>
+			</tr>
 
-		<tr>
-			<td><label for="background_attachment">{#style_dlg.background_attachment}</label></td>
-			<td><select id="background_attachment" name="background_attachment" class="mceEditableSelect"></select></td>
-		</tr>
+			<tr>
+				<td><label for="background_hpos">{#style_dlg.background_hpos}</label></td>
+				<td>
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+						<tr>
+							<td><select id="background_hpos" name="background_hpos" class="mceEditableSelect"></select></td>
+							<td>&nbsp;</td>
+							<td>
+								<label id="background_hpos_measurement_label" for="background_hpos_measurement" style="display: none; visibility: hidden;">Horizontal position measurement unit</label>
+								<select id="background_hpos_measurement" name="background_hpos_measurement" aria-labelledby="background_hpos_measurement_label"></select>
+							</td>
+						</tr>
+					</table>
+				</td>
+			</tr>
 
-		<tr>
-			<td><label for="background_hpos">{#style_dlg.background_hpos}</label></td>
-			<td>
-				<table border="0" cellspacing="0" cellpadding="0">
-					<tr>
-						<td><select id="background_hpos" name="background_hpos" class="mceEditableSelect"></select></td>
-						<td>&nbsp;</td>
-						<td><select id="background_hpos_measurement" name="background_hpos_measurement"></select></td>
-					</tr>
-				</table>
-			</td>
-		</tr>
+			<tr>
+				<td><label for="background_vpos">{#style_dlg.background_vpos}</label></td>
+				<td>
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+						<tr>
+							<td><select id="background_vpos" name="background_vpos" class="mceEditableSelect"></select></td>
+							<td>&nbsp;</td>
+							<td>
 
-		<tr>
-			<td><label for="background_vpos">{#style_dlg.background_vpos}</label></td>
-			<td>
-				<table border="0" cellspacing="0" cellpadding="0">
-					<tr>
-						<td><select id="background_vpos" name="background_vpos" class="mceEditableSelect"></select></td>
-						<td>&nbsp;</td>
-						<td><select id="background_vpos_measurement" name="background_vpos_measurement"></select></td>
-					</tr>
-				</table>
-			</td>
-		</tr>
-	</table>
+								<label id="background_vpos_measurement_label" for="background_vpos_measurement" style="display: none; visibility: hidden;">Vertical position measurement unit</label>
+								<select id="background_vpos_measurement" name="background_vpos_measurement" aria-labelledby="background_vpos_measurement_label">></select></td>
+						</tr>
+					</table>
+				</td>
+			</tr>
+		</table>
+	</fieldset>
 </div>
 
 <div id="block_panel" class="panel">
-	<table border="0">
-		<tr>
-			<td><label for="block_wordspacing">{#style_dlg.block_wordspacing}</label></td>
-			<td>
-				<table border="0" cellspacing="0" cellpadding="0">
-					<tr>
-						<td><select id="block_wordspacing" name="block_wordspacing" class="mceEditableSelect"></select></td>
-						<td>&nbsp;</td>
-						<td><select id="block_wordspacing_measurement" name="block_wordspacing_measurement"></select></td>
-					</tr>
-				</table>
-			</td>
-		</tr>
+	<fieldset>
+		<legend>{#style_dlg.block}</legend>
+		<table role="presentation" border="0">
+			<tr>
+				<td><label for="block_wordspacing">{#style_dlg.block_wordspacing}</label></td>
+				<td>
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+						<tr>
+							<td><select id="block_wordspacing" name="block_wordspacing" class="mceEditableSelect"></select></td>
+							<td>&nbsp;</td>
+							<td>
+								<label id="block_wordspacing_measurement_label" for="block_wordspacing_measurement" style="display: none; visibility: hidden;">Word spacing measurement unit</label>
+								<select id="block_wordspacing_measurement" name="block_wordspacing_measurement" aria-labelledby="block_wordspacing_measurement_label"></select>
+							</td>
+						</tr>
+					</table>
+				</td>
+			</tr>
 
-		<tr>
-			<td><label for="block_letterspacing">{#style_dlg.block_letterspacing}</label></td>
-			<td>
-				<table border="0" cellspacing="0" cellpadding="0">
-					<tr>
-						<td><select id="block_letterspacing" name="block_letterspacing" class="mceEditableSelect"></select></td>
-						<td>&nbsp;</td>
-						<td><select id="block_letterspacing_measurement" name="block_letterspacing_measurement"></select></td>
-					</tr>
-				</table>
-			</td>
-		</tr>
+			<tr>
+				<td><label for="block_letterspacing">{#style_dlg.block_letterspacing}</label></td>
+				<td>
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+						<tr>
+							<td><select id="block_letterspacing" name="block_letterspacing" class="mceEditableSelect"></select></td>
+							<td>&nbsp;</td>
+							<td>
+								<label id="block_letterspacing_measurement_label" for="block_letterspacing_measurement" style="display: none; visibility: hidden;">Letter spacing measurement unit</label>
+								<select id="block_letterspacing_measurement" name="block_letterspacing_measurement" aria-labelledby="block_letterspacing_measurement_label"></select>
+							</td>
+						</tr>
+					</table>
+				</td>
+			</tr>
 
-		<tr>
-			<td><label for="block_vertical_alignment">{#style_dlg.block_vertical_alignment}</label></td>
-			<td><select id="block_vertical_alignment" name="block_vertical_alignment" class="mceEditableSelect"></select></td>
-		</tr>
+			<tr>
+				<td><label for="block_vertical_alignment">{#style_dlg.block_vertical_alignment}</label></td>
+				<td><select id="block_vertical_alignment" name="block_vertical_alignment" class="mceEditableSelect"></select></td>
+			</tr>
 
-		<tr>
-			<td><label for="block_text_align">{#style_dlg.block_text_align}</label></td>
-			<td><select id="block_text_align" name="block_text_align" class="mceEditableSelect"></select></td>
-		</tr>
+			<tr>
+				<td><label for="block_text_align">{#style_dlg.block_text_align}</label></td>
+				<td><select id="block_text_align" name="block_text_align" class="mceEditableSelect"></select></td>
+			</tr>
 
-		<tr>
-			<td><label for="block_text_indent">{#style_dlg.block_text_indent}</label></td>
-			<td>
-				<table border="0" cellspacing="0" cellpadding="0">
-					<tr>
-						<td><input type="text" id="block_text_indent" name="block_text_indent" /></td>
-						<td>&nbsp;</td>
-						<td><select id="block_text_indent_measurement" name="block_text_indent_measurement"></select></td>
-					</tr>
-				</table>
-			</td>
-		</tr>
+			<tr>
+				<td><label for="block_text_indent">{#style_dlg.block_text_indent}</label></td>
+				<td>
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+						<tr>
+							<td><input type="text" id="block_text_indent" name="block_text_indent" /></td>
+							<td>&nbsp;</td>
+							<td>
+								<label id="block_text_indent_measurement_label" for="block_text_indent_measurement" style="display: none; visibility: hidden;">Text Indent Measurement Unit</label>
 
-		<tr>
-			<td><label for="block_whitespace">{#style_dlg.block_whitespace}</label></td>
-			<td><select id="block_whitespace" name="block_whitespace" class="mceEditableSelect"></select></td>
-		</tr>
+								<select id="block_text_indent_measurement" name="block_text_indent_measurement" aria-labelledby="block_text_indent_measurement_label"></select>
+							</td>
+						</tr>
+					</table>
+				</td>
+			</tr>
 
-		<tr>
-			<td><label for="block_display">{#style_dlg.block_display}</label></td>
-			<td><select id="block_display" name="block_display" class="mceEditableSelect"></select></td>
-		</tr>
-	</table>
+			<tr>
+				<td><label for="block_whitespace">{#style_dlg.block_whitespace}</label></td>
+				<td><select id="block_whitespace" name="block_whitespace" class="mceEditableSelect"></select></td>
+			</tr>
+
+			<tr>
+				<td><label for="block_display">{#style_dlg.block_display}</label></td>
+				<td><select id="block_display" name="block_display" class="mceEditableSelect"></select></td>
+			</tr>
+		</table>
+	</fieldset>
 </div>
 
 <div id="box_panel" class="panel">
-<table border="0">
-	<tr>
-		<td><label for="box_width">{#style_dlg.box_width}</label></td>
-		<td>
-			<table border="0" cellspacing="0" cellpadding="0">
-				<tr>
-					<td><input type="text" id="box_width" name="box_width" class="mceEditableSelect" onChange="synch('box_width','positioning_width');" /></td>
-					<td>&nbsp;</td>
-					<td><select id="box_width_measurement" name="box_width_measurement"></select></td>
-				</tr>
-			</table>
-		</td>
-		<td>&nbsp;&nbsp;&nbsp;<label for="box_float">{#style_dlg.box_float}</label></td>
-		<td><select id="box_float" name="box_float" class="mceEditableSelect"></select></td>
-	</tr>
+	<fieldset>
+		<legend>{#style_dlg.box}</legend>
+		<table role="presentation" border="0">
+			<tr>
+				<td><label for="box_width">{#style_dlg.box_width}</label></td>
+				<td>
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+						<tr>
+							<td><input type="text" id="box_width" name="box_width" class="mceEditableSelect" onChange="synch('box_width','positioning_width');" /></td>
+							<td>&nbsp;</td>
+							<td>
+								<label id="box_width_measurement_label" for="box_width_measurement" style="display: none; visibility: hidden;">Box Width Measurement Unit</label>
+								<select id="box_width_measurement" name="box_width_measurement" aria-labelledby="box_width_measurement_label"></select>
+							</td>
+						</tr>
+					</table>
+				</td>
+				<td>&nbsp;&nbsp;&nbsp;<label for="box_float">{#style_dlg.box_float}</label></td>
+				<td><select id="box_float" name="box_float" class="mceEditableSelect"></select></td>
+			</tr>
 
-	<tr>
-		<td><label for="box_height">{#style_dlg.box_height}</label></td>
-		<td>
-			<table border="0" cellspacing="0" cellpadding="0">
-				<tr>
-					<td><input type="text" id="box_height" name="box_height" class="mceEditableSelect" onChange="synch('box_height','positioning_height');" /></td>
-					<td>&nbsp;</td>
-					<td><select id="box_height_measurement" name="box_height_measurement"></select></td>
-				</tr>
-			</table>
-		</td>
-		<td>&nbsp;&nbsp;&nbsp;<label for="box_clear">{#style_dlg.box_clear}</label></td>
-		<td><select id="box_clear" name="box_clear" class="mceEditableSelect"></select></td>
-	</tr>
-</table>
+			<tr>
+				<td><label for="box_height">{#style_dlg.box_height}</label></td>
+				<td>
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+						<tr>
+							<td><input type="text" id="box_height" name="box_height" class="mceEditableSelect" onChange="synch('box_height','positioning_height');" /></td>
+							<td>&nbsp;</td>
+							<td>
+								<label id="box_height_measurement_label" for="box_height_measurement" style="display: none; visibility: hidden;">Box Height Measurement Unit</label>
+								<select id="box_height_measurement" name="box_height_measurement" aria-labelledby="box_height_measurement_label"></select>
+							</td>
+						</tr>
+					</table>
+				</td>
+				<td>&nbsp;&nbsp;&nbsp;<label for="box_clear">{#style_dlg.box_clear}</label></td>
+				<td><select id="box_clear" name="box_clear" class="mceEditableSelect"></select></td>
+			</tr>
+		</table>
 <div style="float: left; width: 49%">
 	<fieldset>
 		<legend>{#style_dlg.padding}</legend>
 
-		<table border="0">
+		<table role="presentation" border="0">
 			<tr>
 				<td>&nbsp;</td>
 				<td><input type="checkbox" id="box_padding_same" name="box_padding_same" class="checkbox" checked="checked" onClick="toggleSame(this,'box_padding');" /> <label for="box_padding_same">{#style_dlg.same}</label></td>
@@ -288,11 +328,14 @@
 			<tr>
 				<td><label for="box_padding_top">{#style_dlg.top}</label></td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="box_padding_top" name="box_padding_top" class="mceEditableSelect" /></td>
 							<td>&nbsp;</td>
-							<td><select id="box_padding_top_measurement" name="box_padding_top_measurement"></select></td>
+							<td>
+								<label id="box_padding_top_measurement_label" for="box_padding_top_measurement" style="display: none; visibility: hidden;">Padding Top Measurement Unit</label>
+								<select id="box_padding_top_measurement" name="box_padding_top_measurement" aria-labelledby="box_padding_top_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -300,11 +343,14 @@
 			<tr>
 				<td><label for="box_padding_right">{#style_dlg.right}</label></td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="box_padding_right" name="box_padding_right" class="mceEditableSelect" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="box_padding_right_measurement" name="box_padding_right_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="box_padding_right_measurement_label" for="box_padding_right_measurement" style="display: none; visibility: hidden;">Padding Right Measurement Unit</label>
+								<select id="box_padding_right_measurement" name="box_padding_right_measurement" disabled="disabled" aria-labelledby="box_padding_right_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -312,11 +358,14 @@
 			<tr>
 				<td><label for="box_padding_bottom">{#style_dlg.bottom}</label></td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="box_padding_bottom" name="box_padding_bottom" class="mceEditableSelect" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="box_padding_bottom_measurement" name="box_padding_bottom_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="box_padding_bottom_measurement_label" for="box_padding_bottom_measurement" style="display: none; visibility: hidden;">Padding Bottom Measurement Unit</label>
+								<select id="box_padding_bottom_measurement" name="box_padding_bottom_measurement" disabled="disabled" aria-labelledby="box_padding_bottom_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -324,11 +373,14 @@
 			<tr>
 				<td><label for="box_padding_left">{#style_dlg.left}</label></td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="box_padding_left" name="box_padding_left" class="mceEditableSelect" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="box_padding_left_measurement" name="box_padding_left_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="box_padding_left_measurement_label" for="box_padding_left_measurement" style="display: none; visibility: hidden;">Padding Left Measurement Unit</label>
+								<select id="box_padding_left_measurement" name="box_padding_left_measurement" disabled="disabled" aria-labelledby="box_padding_left_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -341,7 +393,7 @@
 	<fieldset>
 		<legend>{#style_dlg.margin}</legend>
 
-		<table border="0">
+		<table role="presentation" border="0">
 			<tr>
 				<td>&nbsp;</td>
 				<td><input type="checkbox" id="box_margin_same" name="box_margin_same" class="checkbox" checked="checked" onClick="toggleSame(this,'box_margin');" /> <label for="box_margin_same">{#style_dlg.same}</label></td>
@@ -349,11 +401,14 @@
 			<tr>
 				<td><label for="box_margin_top">{#style_dlg.top}</label></td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="box_margin_top" name="box_margin_top" class="mceEditableSelect" /></td>
 							<td>&nbsp;</td>
-							<td><select id="box_margin_top_measurement" name="box_margin_top_measurement"></select></td>
+							<td>
+								<label id="box_margin_top_measurement_label" for="box_margin_top_measurement" style="display: none; visibility: hidden;">Margin Top Measurement Unit</label>
+								<select id="box_margin_top_measurement" name="box_margin_top_measurement" aria-labelledby="box_margin_top_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -361,11 +416,14 @@
 			<tr>
 				<td><label for="box_margin_right">{#style_dlg.right}</label></td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="box_margin_right" name="box_margin_right" class="mceEditableSelect" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="box_margin_right_measurement" name="box_margin_right_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="box_margin_right_measurement_label" for="box_margin_right_measurement" style="display: none; visibility: hidden;">Margin Right Measurement Unit</label>
+								<select id="box_margin_right_measurement" name="box_margin_right_measurement" disabled="disabled" aria-labelledby="box_margin_right_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -373,11 +431,14 @@
 			<tr>
 				<td><label for="box_margin_bottom">{#style_dlg.bottom}</label></td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="box_margin_bottom" name="box_margin_bottom" class="mceEditableSelect" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="box_margin_bottom_measurement" name="box_margin_bottom_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="box_margin_bottom_measurement_label" for="box_margin_bottom_measurement" style="display: none; visibility: hidden;">Margin Bottom Measurement Unit</label>
+								<select id="box_margin_bottom_measurement" name="box_margin_bottom_measurement" disabled="disabled" aria-labelledby="box_margin_bottom_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -385,11 +446,14 @@
 			<tr>
 				<td><label for="box_margin_left">{#style_dlg.left}</label></td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="box_margin_left" name="box_margin_left" class="mceEditableSelect" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="box_margin_left_measurement" name="box_margin_left_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="box_margin_left_measurement_label" for="box_margin_left_measurement" style="display: none; visibility: hidden;">Margin Left Measurement Unit</label>
+								<select id="box_margin_left_measurement" name="box_margin_left_measurement" disabled="disabled" aria-labelledby="box_margin_left_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -401,131 +465,148 @@
 </div>
 
 <div id="border_panel" class="panel">
-<table border="0" cellspacing="0" cellpadding="0" width="100%">
-<tr>
-	<td class="tdelim">&nbsp;</td>
-	<td class="tdelim delim">&nbsp;</td>
-	<td class="tdelim">{#style_dlg.style}</td>
-	<td class="tdelim delim">&nbsp;</td>
-	<td class="tdelim">{#style_dlg.width}</td>
-	<td class="tdelim delim">&nbsp;</td>
-	<td class="tdelim">{#style_dlg.color}</td>
-</tr>
-
-<tr>
-	<td>&nbsp;</td>
-	<td class="delim">&nbsp;</td>
-	<td><input type="checkbox" id="border_style_same" name="border_style_same" class="checkbox" checked="checked" onClick="toggleSame(this,'border_style');" /> <label for="border_style_same">{#style_dlg.same}</label></td>
-	<td class="delim">&nbsp;</td>
-	<td><input type="checkbox" id="border_width_same" name="border_width_same" class="checkbox" checked="checked" onClick="toggleSame(this,'border_width');" /> <label for="border_width_same">{#style_dlg.same}</label></td>
-	<td class="delim">&nbsp;</td>
-	<td><input type="checkbox" id="border_color_same" name="border_color_same" class="checkbox" checked="checked" onClick="toggleSame(this,'border_color');" /> <label for="border_color_same">{#style_dlg.same}</label></td>
-</tr>
-
-<tr>
-	<td>{#style_dlg.top}</td>
-	<td class="delim">&nbsp;</td>
-	<td><select id="border_style_top" name="border_style_top" class="mceEditableSelect"></select></td>
-	<td class="delim">&nbsp;</td>
-	<td>
-		<table border="0" cellspacing="0" cellpadding="0">
-			<tr>
-				<td><select id="border_width_top" name="border_width_top" class="mceEditableSelect"></select></td>
-				<td>&nbsp;</td>
-				<td><select id="border_width_top_measurement" name="border_width_top_measurement"></select></td>
-			</tr>
-		</table>
-	</td>
-	<td class="delim">&nbsp;</td>
-	<td>
-		<table border="0" cellpadding="0" cellspacing="0">
-			<tr>
-				<td><input id="border_color_top" name="border_color_top" type="text" value="" size="9" onChange="updateColor('border_color_top_pick','border_color_top');" /></td>
-				<td id="border_color_top_pickcontainer">&nbsp;</td>
-			</tr>
-		</table>
-	</td>
-</tr>
-
-<tr>
-	<td>{#style_dlg.right}</td>
-	<td class="delim">&nbsp;</td>
-	<td><select id="border_style_right" name="border_style_right" class="mceEditableSelect" disabled="disabled"></select></td>
-	<td class="delim">&nbsp;</td>
-	<td>
-		<table border="0" cellspacing="0" cellpadding="0">
-			<tr>
-				<td><select id="border_width_right" name="border_width_right" class="mceEditableSelect" disabled="disabled"></select></td>
-				<td>&nbsp;</td>
-				<td><select id="border_width_right_measurement" name="border_width_right_measurement" disabled="disabled"></select></td>
-			</tr>
-		</table>
-	</td>
-	<td class="delim">&nbsp;</td>
-	<td>
-		<table border="0" cellpadding="0" cellspacing="0">
-			<tr>
-				<td><input id="border_color_right" name="border_color_right" type="text" value="" size="9" onChange="updateColor('border_color_right_pick','border_color_right');" disabled="disabled" /></td>
-				<td id="border_color_right_pickcontainer">&nbsp;</td>
-			</tr>
-		</table>
-	</td>
-</tr>
-
-<tr>
-	<td>{#style_dlg.bottom}</td>
-	<td class="delim">&nbsp;</td>
-	<td><select id="border_style_bottom" name="border_style_bottom" class="mceEditableSelect" disabled="disabled"></select></td>
-	<td class="delim">&nbsp;</td>
-	<td>
-		<table border="0" cellspacing="0" cellpadding="0">
-			<tr>
-				<td><select id="border_width_bottom" name="border_width_bottom" class="mceEditableSelect" disabled="disabled"></select></td>
-				<td>&nbsp;</td>
-				<td><select id="border_width_bottom_measurement" name="border_width_bottom_measurement" disabled="disabled"></select></td>
-			</tr>
-		</table>
-	</td>
-	<td class="delim">&nbsp;</td>
-	<td>
-		<table border="0" cellpadding="0" cellspacing="0">
-			<tr>
-				<td><input id="border_color_bottom" name="border_color_bottom" type="text" value="" size="9" onChange="updateColor('border_color_bottom_pick','border_color_bottom');" disabled="disabled" /></td>
-				<td id="border_color_bottom_pickcontainer">&nbsp;</td>
-			</tr>
-		</table>
-	</td>
-</tr>
-
-<tr>
-	<td>{#style_dlg.left}</td>
-	<td class="delim">&nbsp;</td>
-	<td><select id="border_style_left" name="border_style_left" class="mceEditableSelect" disabled="disabled"></select></td>
-	<td class="delim">&nbsp;</td>
-	<td>
-		<table border="0" cellspacing="0" cellpadding="0">
-			<tr>
-				<td><select id="border_width_left" name="border_width_left" class="mceEditableSelect" disabled="disabled"></select></td>
-				<td>&nbsp;</td>
-				<td><select id="border_width_left_measurement" name="border_width_left_measurement" disabled="disabled"></select></td>
-			</tr>
-		</table>
-	</td>
-	<td class="delim">&nbsp;</td>
-	<td>
-		<table border="0" cellpadding="0" cellspacing="0">
-			<tr>
-				<td><input id="border_color_left" name="border_color_left" type="text" value="" size="9" onChange="updateColor('border_color_left_pick','border_color_left');" disabled="disabled" /></td>
-				<td id="border_color_left_pickcontainer">&nbsp;</td>
-			</tr>
+	<fieldset>
+		<legend>{#style_dlg.border}</legend>	
+		<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
+		<tr>
+			<td class="tdelim">&nbsp;</td>
+			<td class="tdelim delim">&nbsp;</td>
+			<td class="tdelim">{#style_dlg.style}</td>
+			<td class="tdelim delim">&nbsp;</td>
+			<td class="tdelim">{#style_dlg.width}</td>
+			<td class="tdelim delim">&nbsp;</td>
+			<td class="tdelim">{#style_dlg.color}</td>
+		</tr>
+
+		<tr>
+			<td>&nbsp;</td>
+			<td class="delim">&nbsp;</td>
+			<td><input type="checkbox" id="border_style_same" name="border_style_same" class="checkbox" checked="checked" onClick="toggleSame(this,'border_style');" /> <label for="border_style_same">{#style_dlg.same}</label></td>
+			<td class="delim">&nbsp;</td>
+			<td><input type="checkbox" id="border_width_same" name="border_width_same" class="checkbox" checked="checked" onClick="toggleSame(this,'border_width');" /> <label for="border_width_same">{#style_dlg.same}</label></td>
+			<td class="delim">&nbsp;</td>
+			<td><input type="checkbox" id="border_color_same" name="border_color_same" class="checkbox" checked="checked" onClick="toggleSame(this,'border_color');" /> <label for="border_color_same">{#style_dlg.same}</label></td>
+		</tr>
+
+		<tr>
+			<td>{#style_dlg.top}</td>
+			<td class="delim">&nbsp;</td>
+			<td><select id="border_style_top" name="border_style_top" class="mceEditableSelect"></select></td>
+			<td class="delim">&nbsp;</td>
+			<td>
+				<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+					<tr>
+						<td><select id="border_width_top" name="border_width_top" class="mceEditableSelect"></select></td>
+						<td>&nbsp;</td>
+						<td>
+							<label id="border_width_top_measurement_label" for="border_width_top_measurement" style="display: none; visibility: hidden;">Width top Measurement Unit</label>
+							<select id="border_width_top_measurement" name="border_width_top_measurement" aria-labelledby="border_width_top_measurement_label"></select>
+						</td>
+					</tr>
+				</table>
+			</td>
+			<td class="delim">&nbsp;</td>
+			<td>
+				<table role="presentation" border="0" cellpadding="0" cellspacing="0">
+					<tr>
+						<td><input id="border_color_top" name="border_color_top" type="text" value="" size="9" onChange="updateColor('border_color_top_pick','border_color_top');" /></td>
+						<td id="border_color_top_pickcontainer">&nbsp;</td>
+					</tr>
+				</table>
+			</td>
+		</tr>
+
+		<tr>
+			<td>{#style_dlg.right}</td>
+			<td class="delim">&nbsp;</td>
+			<td><select id="border_style_right" name="border_style_right" class="mceEditableSelect" disabled="disabled"></select></td>
+			<td class="delim">&nbsp;</td>
+			<td>
+				<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+					<tr>
+						<td><select id="border_width_right" name="border_width_right" class="mceEditableSelect" disabled="disabled"></select></td>
+						<td>&nbsp;</td>
+						<td>
+							<label id="border_width_right_measurement_label" for="border_width_right_measurement" style="display: none; visibility: hidden;">Width Right Measurement Unit</label>
+							<select id="border_width_right_measurement" name="border_width_right_measurement" disabled="disabled" aria-labelledby="border_width_right_measurement_label"></select>
+						</td>
+					</tr>
+				</table>
+			</td>
+			<td class="delim">&nbsp;</td>
+			<td>
+				<table role="presentation" border="0" cellpadding="0" cellspacing="0">
+					<tr>
+						<td><input id="border_color_right" name="border_color_right" type="text" value="" size="9" onChange="updateColor('border_color_right_pick','border_color_right');" disabled="disabled" /></td>
+						<td id="border_color_right_pickcontainer">&nbsp;</td>
+					</tr>
+				</table>
+			</td>
+		</tr>
+
+		<tr>
+			<td>{#style_dlg.bottom}</td>
+			<td class="delim">&nbsp;</td>
+			<td><select id="border_style_bottom" name="border_style_bottom" class="mceEditableSelect" disabled="disabled"></select></td>
+			<td class="delim">&nbsp;</td>
+			<td>
+				<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+					<tr>
+						<td><select id="border_width_bottom" name="border_width_bottom" class="mceEditableSelect" disabled="disabled"></select></td>
+						<td>&nbsp;</td>
+						<td>
+							<label id="border_width_bottom_measurement_label" for="border_width_bottom_measurement" style="display: none; visibility: hidden;">Width Bottom Measurement Unit</label>
+							<select id="border_width_bottom_measurement" name="border_width_bottom_measurement" disabled="disabled" aria-labelledby="border_width_bottom_measurement_label"></select>
+						</td>
+					</tr>
+				</table>
+			</td>
+			<td class="delim">&nbsp;</td>
+			<td>
+				<table role="presentation" border="0" cellpadding="0" cellspacing="0">
+					<tr>
+						<td><input id="border_color_bottom" name="border_color_bottom" type="text" value="" size="9" onChange="updateColor('border_color_bottom_pick','border_color_bottom');" disabled="disabled" /></td>
+						<td id="border_color_bottom_pickcontainer">&nbsp;</td>
+					</tr>
+				</table>
+			</td>
+		</tr>
+
+		<tr>
+			<td>{#style_dlg.left}</td>
+			<td class="delim">&nbsp;</td>
+			<td><select id="border_style_left" name="border_style_left" class="mceEditableSelect" disabled="disabled"></select></td>
+			<td class="delim">&nbsp;</td>
+			<td>
+				<table role="presentation" border="0" cellspacing="0" cellpadding="0">
+					<tr>
+						<td><select id="border_width_left" name="border_width_left" class="mceEditableSelect" disabled="disabled"></select></td>
+						<td>&nbsp;</td>
+						<td>
+							<label id="border_width_left_measurement_label" for="border_width_left_measurement" style="display: none; visibility: hidden;">Width Left Measurement Unit</label>
+							<select id="border_width_left_measurement" name="border_width_left_measurement" disabled="disabled" aria-labelledby="border_width_left_measurement_label"></select>
+						</td>
+					</tr>
+				</table>
+			</td>
+			<td class="delim">&nbsp;</td>
+			<td>
+				<table role="presentation" border="0" cellpadding="0" cellspacing="0">
+					<tr>
+						<td><input id="border_color_left" name="border_color_left" type="text" value="" size="9" onChange="updateColor('border_color_left_pick','border_color_left');" disabled="disabled" /></td>
+						<td id="border_color_left_pickcontainer">&nbsp;</td>
+					</tr>
+				</table>
+			</td>
+		</tr>
 		</table>
-	</td>
-</tr>
-</table>
+	</fieldset>
 </div>
 
 <div id="list_panel" class="panel">
-	<table border="0">
+<fieldset>
+	<legend>{#style_dlg.list}</legend>
+	<table role="presentation" border="0">
 		<tr>
 			<td><label for="list_type">{#style_dlg.list_type}</label></td>
 			<td><select id="list_type" name="list_type" class="mceEditableSelect"></select></td>
@@ -541,10 +622,13 @@
 			<td><select id="list_position" name="list_position" class="mceEditableSelect"></select></td>
 		</tr>
 	</table>
+</fieldset>
 </div>
 
 <div id="positioning_panel" class="panel">
-<table border="0">
+<fieldset>
+	<legend>{#style_dlg.position}</legend>
+<table role="presentation" border="0">
 	<tr>
 		<td><label for="positioning_type">{#style_dlg.positioning_type}</label></td>
 		<td><select id="positioning_type" name="positioning_type" class="mceEditableSelect"></select></td>
@@ -555,11 +639,14 @@
 	<tr>
 		<td><label for="positioning_width">{#style_dlg.width}</label></td>
 		<td>
-			<table border="0" cellspacing="0" cellpadding="0">
+			<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 				<tr>
 					<td><input type="text" id="positioning_width" name="positioning_width" onChange="synch('positioning_width','box_width');" /></td>
 					<td>&nbsp;</td>
-					<td><select id="positioning_width_measurement" name="positioning_width_measurement"></select></td>
+					<td>
+						<label id="positioning_width_measurement_label" for="positioning_width_measurement" style="display: none; visibility: hidden;">Positioning width Measurement Unit</label>
+						<select id="positioning_width_measurement" name="positioning_width_measurement" aria-labelledby="positioning_width_measurement_label"></select>
+					</td>
 				</tr>
 			</table>
 		</td>
@@ -570,11 +657,14 @@
 	<tr>
 		<td><label for="positioning_height">{#style_dlg.height}</label></td>
 		<td>
-			<table border="0" cellspacing="0" cellpadding="0">
+			<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 				<tr>
 					<td><input type="text" id="positioning_height" name="positioning_height" onChange="synch('positioning_height','box_height');" /></td>
 					<td>&nbsp;</td>
-					<td><select id="positioning_height_measurement" name="positioning_height_measurement"></select></td>
+					<td>
+						<label id="positioning_height_measurement_label" for="positioning_height_measurement" style="display: none; visibility: hidden;">Positioning Height Measurement Unit</label>
+						<select id="positioning_height_measurement" name="positioning_height_measurement" aria-labelledby="positioning_height_measurement_label"></select>
+					</td>
 				</tr>
 			</table>
 		</td>
@@ -587,7 +677,7 @@
 	<fieldset>
 		<legend>{#style_dlg.placement}</legend>
 
-		<table border="0">
+		<table role="presentation" border="0">
 			<tr>
 				<td>&nbsp;</td>
 				<td><input type="checkbox" id="positioning_placement_same" name="positioning_placement_same" class="checkbox" checked="checked" onClick="toggleSame(this,'positioning_placement');" /> <label for="positioning_placement_same">{#style_dlg.same}</label></td>
@@ -595,11 +685,14 @@
 			<tr>
 				<td>{#style_dlg.top}</td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="positioning_placement_top" name="positioning_placement_top" /></td>
 							<td>&nbsp;</td>
-							<td><select id="positioning_placement_top_measurement" name="positioning_placement_top_measurement"></select></td>
+							<td>
+								<label id="positioning_placement_top_measurement_label" for="positioning_placement_top_measurement" style="display: none; visibility: hidden;">Placement Top Measurement Unit</label>
+								<select id="positioning_placement_top_measurement" name="positioning_placement_top_measurement" aria-labelledby="positioning_placement_top_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -607,11 +700,14 @@
 			<tr>
 				<td>{#style_dlg.right}</td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="positioning_placement_right" name="positioning_placement_right" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="positioning_placement_right_measurement" name="positioning_placement_right_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="positioning_placement_right_measurement_label" for="positioning_placement_right_measurement" style="display: none; visibility: hidden;">Placement Right Measurement Unit</label>
+								<select id="positioning_placement_right_measurement" name="positioning_placement_right_measurement" disabled="disabled" aria-labelledby="positioning_placement_right_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -619,11 +715,14 @@
 			<tr>
 				<td>{#style_dlg.bottom}</td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="positioning_placement_bottom" name="positioning_placement_bottom" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="positioning_placement_bottom_measurement" name="positioning_placement_bottom_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="positioning_placement_bottom_measurement_label" for="positioning_placement_bottom_measurement" style="display: none; visibility: hidden;">Placement Bottom Measurement Unit</label>
+								<select id="positioning_placement_bottom_measurement" name="positioning_placement_bottom_measurement" disabled="disabled" aria-labelledby="positioning_placement_bottom_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -631,11 +730,14 @@
 			<tr>
 				<td>{#style_dlg.left}</td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="positioning_placement_left" name="positioning_placement_left" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="positioning_placement_left_measurement" name="positioning_placement_left_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="positioning_placement_left_measurement_label" for="positioning_placement_left_measurement" style="display: none; visibility: hidden;">Placement Left Measurement Unit</label>
+								<select id="positioning_placement_left_measurement" name="positioning_placement_left_measurement" disabled="disabled" aria-labelledby="positioning_placement_left_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -648,7 +750,7 @@
 	<fieldset>
 		<legend>{#style_dlg.clip}</legend>
 
-		<table border="0">
+		<table role="presentation" border="0">
 			<tr>
 				<td>&nbsp;</td>
 				<td><input type="checkbox" id="positioning_clip_same" name="positioning_clip_same" class="checkbox" checked="checked" onClick="toggleSame(this,'positioning_clip');" /> <label for="positioning_clip_same">{#style_dlg.same}</label></td>
@@ -656,11 +758,14 @@
 			<tr>
 				<td>{#style_dlg.top}</td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="positioning_clip_top" name="positioning_clip_top" /></td>
 							<td>&nbsp;</td>
-							<td><select id="positioning_clip_top_measurement" name="positioning_clip_top_measurement"></select></td>
+							<td>
+								<label id="positioning_clip_top_measurement_label" for="positioning_clip_top_measurement" style="display: none; visibility: hidden;">Clip Top Measurement Unit</label>
+								<select id="positioning_clip_top_measurement" name="positioning_clip_top_measurement" aria-labelledby="positioning_clip_top_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -668,11 +773,14 @@
 			<tr>
 				<td>{#style_dlg.right}</td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="positioning_clip_right" name="positioning_clip_right" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="positioning_clip_right_measurement" name="positioning_clip_right_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="positioning_clip_right_measurement_label" for="positioning_clip_right_measurement" style="display: none; visibility: hidden;">Clip Right Measurement Unit</label>
+								<select id="positioning_clip_right_measurement" name="positioning_clip_right_measurement" disabled="disabled" aria-labelledby="positioning_clip_right_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -680,11 +788,14 @@
 			<tr>
 				<td>{#style_dlg.bottom}</td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="positioning_clip_bottom" name="positioning_clip_bottom" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="positioning_clip_bottom_measurement" name="positioning_clip_bottom_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="positioning_clip_bottom_measurement_label" for="positioning_clip_bottom_measurement" style="display: none; visibility: hidden;">Clip Bottom Measurement Unit</label>
+								<select id="positioning_clip_bottom_measurement" name="positioning_clip_bottom_measurement" disabled="disabled" aria-labelledby="positioning_clip_bottom_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -692,11 +803,14 @@
 			<tr>
 				<td>{#style_dlg.left}</td>
 				<td>
-					<table border="0" cellspacing="0" cellpadding="0">
+					<table role="presentation" border="0" cellspacing="0" cellpadding="0">
 						<tr>
 							<td><input type="text" id="positioning_clip_left" name="positioning_clip_left" disabled="disabled" /></td>
 							<td>&nbsp;</td>
-							<td><select id="positioning_clip_left_measurement" name="positioning_clip_left_measurement" disabled="disabled"></select></td>
+							<td>
+								<label id="positioning_clip_left_measurement_label" for="positioning_clip_left_measurement" style="display: none; visibility: hidden;">Clip Left Measurement Unit</label>
+								<select id="positioning_clip_left_measurement" name="positioning_clip_left_measurement" disabled="disabled" aria-labelledby="positioning_clip_left_measurement_label"></select>
+							</td>
 						</tr>
 					</table>
 				</td>
@@ -706,6 +820,7 @@
 </div>
 <br style="clear: both" />
 </div>
+</fieldset>
 </div>
 
 <div class="mceActionPanel">