notebookbar: a11y: cond format submenu focus & navigation

- focus when opened
- add focus cycle
- convert to grid view

Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: I86592abb23c1dbe2e7e36d09b46fe0c23957539f

5 files changed, 30 insertions, 10 deletions

diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index c347912df1..7ea1e93b6e 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -576,7 +576,14 @@ button.leaflet-control-search-next
 	color: var(--color-text-darker);
 }
 
-#conditionalformatmenu-grid tr td {
+/* Conditional formatting submenu */
+
+#conditionalformatmenu-grid {
+	display: grid;
+	grid-template-columns: repeat(3, auto);
+}
+
+#conditionalformatmenu-grid button:not(#iconsetoverlay) {
 	box-sizing: border-box;
 	position: relative;
 	padding: 3px;
@@ -584,13 +591,20 @@ button.leaflet-control-search-next
 	border-radius: var(--border-radius);
 	margin: 3px;
 	overflow: auto; /* child margins otherwise don't expand *this* element (parent) */
+	min-width: initial;
 }
 
-#conditionalformatmenu-grid td:hover {
+#conditionalformatmenu-grid button:hover {
 	border: 1px solid var(--color-border-darker);
 	background-color: var(--color-background-darker) !important;
 }
 
+#conditionalformatmenu-grid #iconsetoverlay {
+	grid-column: 1/4;
+	width: 100%;
+	margin: 0px;
+}
+
 .w2ui-toolbar table.w2ui-button {
 	background-color: transparent;
 	border: 1px solid transparent;
diff --git a/browser/src/control/Control.JSDialog.js b/browser/src/control/Control.JSDialog.js
index 608dbb2139..f0a79d369c 100644
--- a/browser/src/control/Control.JSDialog.js
+++ b/browser/src/control/Control.JSDialog.js
@@ -44,6 +44,12 @@ L.Control.JSDialog = L.Control.extend({
 			.length > 0;
 	},
 
+	hasDropdownOpened: function() {
+		return Object.values(this.dialogs)
+			.filter(function (dialog) { return dialog.isDropdown === true; })
+			.length > 0;
+	},
+
 	hasSnackbarOpened: function() {
 		return Object.keys(this.dialogs)
 			.filter(function (key) { return key == 'snackbar'; })
diff --git a/browser/src/control/Control.NotebookbarBuilder.js b/browser/src/control/Control.NotebookbarBuilder.js
index 9a9d564208..b02004970b 100644
--- a/browser/src/control/Control.NotebookbarBuilder.js
+++ b/browser/src/control/Control.NotebookbarBuilder.js
@@ -847,8 +847,10 @@ L.Control.NotebookbarBuilder = L.Control.JSDialogBuilder.extend({
 					if (entry.id) {
 						var subDropdownId = dropdownId + '-' + pos;
 						var dropdown = JSDialog.GetDropdown(subDropdownId);
-						var container = dropdown.querySelector('.ui-grid-cell');
+						var container = dropdown.querySelector('.ui-grid');
 						container.innerHTML = getMenuHtml(entry.id);
+						JSDialog.MakeFocusCycle(container);
+						JSDialog.GetFocusableElements(container)[0].focus();
 					} else if (entry.uno) {
 						builder.map.sendUnoCommand(entry.uno);
 						JSDialog.CloseDropdown(dropdownId);
diff --git a/browser/src/control/Control.Toolbar.js b/browser/src/control/Control.Toolbar.js
index b6d999733e..8b2246919d 100644
--- a/browser/src/control/Control.Toolbar.js
+++ b/browser/src/control/Control.Toolbar.js
@@ -270,9 +270,8 @@ function moreConditionalFormat (unoCommand, jsdialogDropdown) {
 global.moreConditionalFormat = moreConditionalFormat;
 
 function getConditionalFormatMenuHtmlImpl(more, type, count, unoCommand, jsdialogDropdown) {
-	var table = '<table id="conditionalformatmenu-grid">';
+	var table = '<div id="conditionalformatmenu-grid">';
 	for (var i = 0; i < count; i+=3) {
-		table += '<tr>';
 		for (var j = i; j < i+3; j++) {
 			var number = j;
 
@@ -281,14 +280,13 @@ function getConditionalFormatMenuHtmlImpl(more, type, count, unoCommand, jsdialo
 				number++;
 
 			var iconclass = type + (number < 10 ? '0' : '') + number;
-			table += '<td class="w2ui-tb-image w2ui-icon ' + iconclass + '" onclick="setConditionalFormat(' + number + ', \'' + unoCommand + '\', ' + !!jsdialogDropdown + ')"/>';
+			table += '<button class="w2ui-tb-image w2ui-icon ' + iconclass + '" onclick="setConditionalFormat(' + number + ', \'' + unoCommand + '\', ' + !!jsdialogDropdown + ')"/>';
 		}
-		table += '</tr>';
 	}
 	if (more) {
-		table += '<tr><td id="' + more + '" onclick="moreConditionalFormat(\'' + unoCommand + '\', ' + !!jsdialogDropdown + ')">' + _('More...') + '</td></tr>';
+		table += '<button id="' + more + '" onclick="moreConditionalFormat(\'' + unoCommand + '\', ' + !!jsdialogDropdown + ')">' + _('More...') + '</button>';
 	}
-	table += '</table>';
+	table += '</div>';
 	return table;
 }
 
diff --git a/browser/src/map/handler/Map.Keyboard.js b/browser/src/map/handler/Map.Keyboard.js
index 108d19bf32..ee8339cd14 100644
--- a/browser/src/map/handler/Map.Keyboard.js
+++ b/browser/src/map/handler/Map.Keyboard.js
@@ -359,7 +359,7 @@ L.Map.Keyboard = L.Handler.extend({
 			return;
 
 		if (this._map.jsdialog
-			&& (this._map.jsdialog.hasDialogOpened() || this._map.jsdialog.hasSnackbarOpened())
+			&& (this._map.jsdialog.hasDialogOpened() || this._map.jsdialog.hasSnackbarOpened() || this._map.jsdialog.hasDropdownOpened())
 			&& this._map.jsdialog.handleKeyEvent(ev)) {
 			ev.preventDefault();
 			return;