browser: accessibility: fix inline label button

Change-Id: Id8968e45d1b7133bc6eb0559f242a14695c2d725 Signed-off-by: Henry Castro <[email protected]>
CollaboraOnline · Aug 12, 2024 · fff2ed4 · fff2ed4
1 parent 11f7c9d
commit fff2ed4
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/browser/css/notebookbar.css b/browser/css/notebookbar.css
@@ -200,7 +200,7 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 	cursor: pointer;
 	box-sizing: border-box;
 	padding: 0;
-	width: var(--btn-size);
+	width: 100%;
 	height: var(--btn-size);
 	background-color: transparent;
 	margin: 0;
@@ -214,7 +214,8 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 
 .unotoolbutton.notebookbar .unobutton.dropdown {
 	display: flex;
-	width: calc(var(--btn-size) + var(--btn-dropdown-size));
+	width: 100%;
+	alig-items: center;
 }
 
 .jsdialog .ui-tabs-content {
@@ -237,6 +238,8 @@ html[data-theme='dark'] .savemodified.unotoolbutton .unobutton img {
 	padding: 0px 5px !important;
 	line-height: normal;
 	grid-column: 2;
+	margin: auto;
+	vertical-align: bottom;
 }
 
 #table-HomeTab .unospan-uptoolbar:not(.disabled) {

diff --git a/browser/src/control/Control.JSDialogBuilder.js b/browser/src/control/Control.JSDialogBuilder.js
@@ -2234,7 +2234,7 @@ L.Control.JSDialogBuilder = L.Control.extend({
 	},
 
 	_unoToolButton: function(parentContainer, data, builder, options) {
-		var button = null, span, buttonImage, label, container;
+		var button = null, span, buttonImage, label, container, inline;
 
 		var controls = {};
 
@@ -2350,11 +2350,11 @@ L.Control.JSDialogBuilder = L.Control.extend({
 
 			if (builder.options.useInLineLabelsForUnoButtons === true) {
 				$(div).addClass('inline');
-				span = L.DomUtil.create('span', 'ui-content unolabel', div);
-				span.htmlFor = buttonId;
-				span.textContent = builder._cleanText(data.text);
+				inline = L.DomUtil.create('span', 'ui-content unolabel');
+				inline.htmlFor = buttonId;
+				inline.textContent = builder._cleanText(data.text);
 
-				controls['label'] = span;
+				controls['label'] = inline;
 			}
 			var disabled = data.enabled === 'false' || data.enabled === false;
 			if (data.command) {
@@ -2478,20 +2478,22 @@ L.Control.JSDialogBuilder = L.Control.extend({
 		builder.map.hideRestrictedItems(data, controls['container'], controls['container']);
 		builder.map.disableLockedItem(data, controls['container'], controls['container']);
 
-		if (options && options.container) {
+		var insertChilds = function (container) {
 			if (buttonImage)
-				options.container.appendChild(buttonImage);
+				container.appendChild(buttonImage);
 			if (label)
-				options.container.appendChild(label);
+				container.appendChild(label);
+			if (inline)
+				container.appendChild(inline);
+		}
+
+		if (options && options.container) {
+			insertChilds(options.container);
 		} else if (buttonImage && label) {
 			container = L.DomUtil.create('span', 'container-button', button);
-			container.appendChild(buttonImage);
-			container.appendChild(label);
+			insertChilds(container);
 		} else {
-			if (buttonImage)
-				button.appendChild(buttonImage);
-			if (label)
-				button.appendChild(label);
+			insertChilds(button);
 		}
 
 		return controls;