mirror of https://github.com/xwiki-labs/cryptpad
Fix focus issues in access and share modals
This commit is contained in:
parent
8fab5a3d3c
commit
1902305986
|
@ -555,12 +555,12 @@ define([
|
|||
|
||||
let addTabListener = frame => {
|
||||
// find focusable elements
|
||||
let modalElements = $(frame).find('a, button, input, [tabindex]:not([tabindex="-1"]), textarea').filter(':visible');
|
||||
let modalElements = $(frame).find('a, button, input, [tabindex]:not([tabindex="-1"]), textarea').filter(':visible').filter(':not(:disabled)');
|
||||
// intialize with focus on first element
|
||||
modalElements[0].focus();
|
||||
|
||||
$(frame).on('keydown', function (e) {
|
||||
modalElements = $(frame).find('a, button, input, [tabindex]:not([tabindex="-1"]), textarea').filter(':visible'); // for modals with dynamic content
|
||||
modalElements = $(frame).find('a, button, input, [tabindex]:not([tabindex="-1"]), textarea').filter(':visible').filter(':not(:disabled)'); // for modals with dynamic content
|
||||
|
||||
if (e.which === 9) { // Tab
|
||||
if (e.shiftKey) {
|
||||
|
@ -931,12 +931,14 @@ define([
|
|||
opts = opts || {};
|
||||
var attributes = merge({
|
||||
type: 'password',
|
||||
tabindex: '1',
|
||||
tabindex: '0',
|
||||
autocomplete: 'one-time-code', // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
|
||||
}, opts);
|
||||
|
||||
var input = h('input.cp-password-input', attributes);
|
||||
var eye = h('span.fa.fa-eye.cp-password-reveal');
|
||||
var eye = h('span.fa.fa-eye.cp-password-reveal', {
|
||||
tabindex: 0
|
||||
});
|
||||
|
||||
var $eye = $(eye);
|
||||
var $input = $(input);
|
||||
|
@ -953,7 +955,8 @@ define([
|
|||
$input.focus();
|
||||
});
|
||||
} else {
|
||||
$eye.click(function () {
|
||||
Util.onClickEnter($eye, function (e) {
|
||||
e.stopPropagation();
|
||||
if ($eye.hasClass('fa-eye')) {
|
||||
$input.prop('type', 'text');
|
||||
$input.focus();
|
||||
|
|
|
@ -188,7 +188,7 @@ define([
|
|||
'data-curve': data.curvePublic || '',
|
||||
'data-name': name.toLowerCase(),
|
||||
'data-order': i,
|
||||
'tabindex': '0',
|
||||
'tabindex': config.noSelect ? '-1' : '0',
|
||||
style: 'order:'+i+';'
|
||||
},[
|
||||
avatar,
|
||||
|
|
|
@ -385,13 +385,13 @@ define([
|
|||
h('label', Messages.sharedFolders_share),
|
||||
h('br'),
|
||||
] : [
|
||||
UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:1} }),
|
||||
UI.createCheckbox('cp-share-embed', Messages.share_linkEmbed, false, { mark: {tabindex:0} }),
|
||||
];
|
||||
|
||||
if (opts.static) { linkContent = []; }
|
||||
|
||||
linkContent.push(h('div.cp-spacer'));
|
||||
linkContent.push(UI.dialog.selectableArea('', { id: 'cp-share-link-preview', tabindex: 1, rows:3}));
|
||||
linkContent.push(UI.dialog.selectableArea('', { id: 'cp-share-link-preview', tabindex: 0, rows:3}));
|
||||
|
||||
// Show alert if the pad is password protected
|
||||
if (opts.hasPassword) {
|
||||
|
@ -553,7 +553,7 @@ define([
|
|||
|
||||
var embedContent = [
|
||||
h('p', Messages.viewEmbedTag),
|
||||
UI.dialog.selectableArea(opts.getEmbedValue(), { id: 'cp-embed-link-preview', tabindex: 1, rows: 3})
|
||||
UI.dialog.selectableArea(opts.getEmbedValue(), { id: 'cp-embed-link-preview', tabindex: 0, rows: 3})
|
||||
];
|
||||
|
||||
// Show alert if the pad is password protected
|
||||
|
@ -611,24 +611,24 @@ define([
|
|||
labelEdit = Messages.share_formEdit;
|
||||
labelView = Messages.share_formView;
|
||||
auditor = UI.createRadio('accessRights', 'cp-share-form', Messages.share_formAuditor, false, {
|
||||
mark: {tabindex:1},
|
||||
mark: {tabindex:0},
|
||||
});
|
||||
}
|
||||
|
||||
var burnAfterReading = (hashes.viewHash && canBAR) ?
|
||||
UI.createRadio('accessRights', 'cp-share-bar', Messages.burnAfterReading_linkBurnAfterReading, false, {
|
||||
mark: {tabindex:1},
|
||||
mark: {tabindex:0},
|
||||
label: {style: "display: none;"}
|
||||
}) : undefined;
|
||||
var rights = h('div.msg.cp-inline-radio-group', [
|
||||
h('label',{ for: 'cp-share-editable-true' }, Messages.share_linkAccess),
|
||||
h('div.radio-group',[
|
||||
UI.createRadio('accessRights', 'cp-share-editable-false',
|
||||
labelView, true, { mark: {tabindex:1} }),
|
||||
labelView, true, { mark: {tabindex:0} }),
|
||||
canPresent ? UI.createRadio('accessRights', 'cp-share-present',
|
||||
Messages.share_linkPresent, false, { mark: {tabindex:1} }) : undefined,
|
||||
UI.createRadio('accessRights', 'cp-share-editable-true',
|
||||
labelEdit, false, { mark: {tabindex:1} }),
|
||||
labelEdit, false, { mark: {tabindex:0} }),
|
||||
auditor]),
|
||||
burnAfterReading,
|
||||
]);
|
||||
|
@ -921,7 +921,7 @@ define([
|
|||
var cb = Util.once(Util.mkAsync(_cb));
|
||||
var linkContent = [
|
||||
UI.dialog.selectableArea(opts.getLinkValue(), {
|
||||
id: 'cp-share-link-preview', tabindex: 1, rows:2
|
||||
id: 'cp-share-link-preview', tabindex: 0, rows:2
|
||||
})
|
||||
];
|
||||
|
||||
|
|
Loading…
Reference in New Issue