Fix focus issues in access and share modals

This commit is contained in:
yflory 2024-06-25 14:19:53 +02:00
parent 8fab5a3d3c
commit 1902305986
3 changed files with 17 additions and 14 deletions

View File

@ -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();

View File

@ -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,

View File

@ -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
})
];