Skip to content

Commit

Permalink
notebookbar: a11y: cond format submenu focus & navigation
Browse files Browse the repository at this point in the history
- focus when opened
- add focus cycle
- convert to grid view

Signed-off-by: Szymon Kłos <[email protected]>
Change-Id: I86592abb23c1dbe2e7e36d09b46fe0c23957539f
  • Loading branch information
eszkadev authored and timar committed Oct 26, 2023
1 parent 4e0a2a8 commit 393867f
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 10 deletions.
18 changes: 16 additions & 2 deletions browser/css/toolbar.css
Original file line number Diff line number Diff line change
Expand Up @@ -576,21 +576,35 @@ 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;
border: 1px solid var(--color-border-dark);
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;
Expand Down
6 changes: 6 additions & 0 deletions browser/src/control/Control.JSDialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'; })
Expand Down
4 changes: 3 additions & 1 deletion browser/src/control/Control.NotebookbarBuilder.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
10 changes: 4 additions & 6 deletions browser/src/control/Control.Toolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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;
}

Expand Down
2 changes: 1 addition & 1 deletion browser/src/map/handler/Map.Keyboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 393867f

Please sign in to comment.