mirror of https://github.com/xwiki-labs/cryptpad
Merge pull request #1563 from cryptpad/modals-fixes
Accessibility improvements to modals
This commit is contained in:
commit
958b227931
|
@ -157,6 +157,11 @@
|
|||
border-radius: @variables_radius_L;
|
||||
}
|
||||
.tui-full-calendar-popup-container {
|
||||
.tui-full-calendar-section-allday{
|
||||
&:focus {
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
}
|
||||
}
|
||||
min-width: 100%;
|
||||
background: @cp_flatpickr-bg;
|
||||
color: @cryptpad_text_col;
|
||||
|
@ -208,6 +213,9 @@
|
|||
text-overflow: ellipsis;
|
||||
font: @colortheme_app-font;
|
||||
padding: 0 10px;
|
||||
&:focus{
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
}
|
||||
}
|
||||
input { flex: 1; }
|
||||
}
|
||||
|
@ -403,6 +411,11 @@
|
|||
& > input {
|
||||
height: 40px;
|
||||
}
|
||||
.tui-full-calendar-content{
|
||||
&:focus{
|
||||
outline: @cryptpad_color_brand solid 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// margin-bottom: 20px;
|
||||
input {
|
||||
|
|
|
@ -2063,6 +2063,15 @@ APP.recurrenceRule = {
|
|||
editor.setOption('readOnly', false);
|
||||
editor.setOption('autoRefresh', true);
|
||||
editor.setOption('gutters', []);
|
||||
editor.on('keydown', function (editor, e) {
|
||||
if (e.which === 27) {
|
||||
let $next = $(e.target).closest('.tui-full-calendar-popup-section').next();
|
||||
if ($next.length) {
|
||||
$next.find('#tui-full-calendar-schedule-start-date').focus();
|
||||
}
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
cm.configureTheme(common, function () {});
|
||||
editor.setValue(oldEventBody);
|
||||
|
||||
|
@ -2147,6 +2156,13 @@ APP.recurrenceRule = {
|
|||
$el.find('input').attr('autocomplete', 'off');
|
||||
$el.find('.tui-full-calendar-dropdown-button').addClass('btn btn-secondary');
|
||||
$el.find('.tui-full-calendar-popup-close').addClass('btn btn-cancel fa fa-times cp-calendar-close').empty();
|
||||
$el.find('.tui-full-calendar-section-allday').attr('tabindex', 0);
|
||||
$el.find('.cp-calendar-close').attr('tabindex',-1);
|
||||
$el.find('.tui-full-calendar-section-allday').keydown(function (e) {
|
||||
if (e.which === 13) {
|
||||
$(this).click();
|
||||
}
|
||||
});
|
||||
|
||||
var $container = $el.closest('.tui-full-calendar-floating-layer');
|
||||
$container.addClass('cp-calendar-popup-flex');
|
||||
|
@ -2209,6 +2225,7 @@ APP.recurrenceRule = {
|
|||
setFormat(allDay);
|
||||
});
|
||||
});
|
||||
UI.addTabListener(el);
|
||||
};
|
||||
var onCalendarEditPopup = function (el) {
|
||||
var $el = $(el);
|
||||
|
@ -2244,6 +2261,7 @@ APP.recurrenceRule = {
|
|||
var data = ev.schedule || {};
|
||||
var id = data.id;
|
||||
|
||||
UI.addTabListener(el);
|
||||
if (!id) { return; }
|
||||
if (id.indexOf('|') === -1) { return; } // Original event ID doesn't contain |
|
||||
|
||||
|
|
|
@ -164,12 +164,12 @@ define([
|
|||
|
||||
dialog.okButton = function (content, classString) {
|
||||
var sel = typeof(classString) === 'string'? 'button.ok.' + classString:'button.btn.ok.primary';
|
||||
return h(sel, { tabindex: '2', }, content || Messages.okButton);
|
||||
return h(sel, content || Messages.okButton);
|
||||
};
|
||||
|
||||
dialog.cancelButton = function (content, classString) {
|
||||
var sel = typeof(classString) === 'string'? 'button.' + classString:'button.btn.cancel';
|
||||
return h(sel, { tabindex: '1'}, content || Messages.cancelButton);
|
||||
return h(sel, content || Messages.cancelButton);
|
||||
};
|
||||
|
||||
dialog.message = function (text) {
|
||||
|
@ -577,7 +577,7 @@ define([
|
|||
return frame;
|
||||
};
|
||||
|
||||
let addTabListener = frame => {
|
||||
let addTabListener = UI.addTabListener = frame => {
|
||||
// find focusable elements
|
||||
let modalElements = $(frame).find('a, button, input, [tabindex]:not([tabindex="-1"]), textarea').filter(':visible').filter(':not(:disabled)');
|
||||
|
||||
|
@ -720,6 +720,7 @@ define([
|
|||
Notifier.notify();
|
||||
});
|
||||
|
||||
addTabListener(frame);
|
||||
return {
|
||||
element: frame,
|
||||
delete: close
|
||||
|
@ -771,7 +772,7 @@ define([
|
|||
|
||||
document.body.appendChild(frame);
|
||||
setTimeout(function () {
|
||||
$(input).select().focus();
|
||||
addTabListener(frame);
|
||||
Notifier.notify();
|
||||
});
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue