diff --git a/customize.dist/src/less2/include/tokenfield.less b/customize.dist/src/less2/include/tokenfield.less index caddcd29d..53adb1ffe 100644 --- a/customize.dist/src/less2/include/tokenfield.less +++ b/customize.dist/src/less2/include/tokenfield.less @@ -80,6 +80,10 @@ text-overflow: ellipsis; padding-left: 4px; vertical-align: middle; + outline: none; + &:focus { + outline: @cryptpad_color_brand solid 2px; + } } .close { opacity: 1; diff --git a/www/common/common-interface.js b/www/common/common-interface.js index af52c6358..1705ce446 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -304,14 +304,17 @@ define([ var $root = $t.parent(); var $input = $root.find('.token-input'); + $input.attr('tabindex', 0); + var $button = $(h('button.btn.btn-primary', [ h('i.fa.fa-plus'), h('span', Messages.tag_add) ])); - $button.click(function () { + Util.onClickEnter($button, function (e) { $t.tokenfield('createToken', $input.val()); + e.stopPropagation(); }); var $container = $(h('span.cp-tokenfield-container')); @@ -329,6 +332,15 @@ define([ if (!$tokens.length) { $container.prepend(h('span.tokenfield-empty', Messages.kanban_noTags)); } + $tokens.find('.close').attr('tabindex', 0).on('keydown', e => { + e.stopPropagation(); + }); + $tokens.find('.token-label').attr('tabindex', 0).on('keydown', function (e) { + if (e.which === 13 || e.which === 32) { + $(this).dblclick(); + } + e.stopPropagation(); + }); $form.append($input); $form.append($button); if (isEdit) { $button.find('span').text(Messages.tag_edit); } @@ -340,15 +352,27 @@ define([ }; resetUI(); + const focusInput = () => { + let active = document.activeElement; + if ($.contains($container[0], active)) { + setTimeout(() => { + $input.focus(); + }); + } + }; + $t.on('tokenfield:removedtoken', function () { resetUI(); + focusInput(); }); $t.on('tokenfield:editedtoken', function () { resetUI(); + focusInput(); }); $t.on('tokenfield:createdtoken', function () { $input.val(''); resetUI(); + focusInput(); }); $t.on('tokenfield:edittoken', function () { isEdit = true;