diff --git a/customize.dist/messages.js b/customize.dist/messages.js index 27f4a6995..9818e3d88 100755 --- a/customize.dist/messages.js +++ b/customize.dist/messages.js @@ -140,6 +140,11 @@ define(req, function(AppConfig, Default, Language) { Messages.badges_premium = "Premium user"; Messages.badges_error = "Error while validating this user's data"; Messages.profile_badges = "Badges"; + Messages.add_password = "Add your document password"; + Messages.show_password = "Show password"; + Messages.hide_password = "Hide password"; + Messages.next_templateList = "Next template list"; + Messages.previous_templateList = "Previous template list"; return Messages; }); diff --git a/customize.dist/src/less2/include/creation.less b/customize.dist/src/less2/include/creation.less index f61f20d90..1dd03d5c0 100644 --- a/customize.dist/src/less2/include/creation.less +++ b/customize.dist/src/less2/include/creation.less @@ -33,6 +33,11 @@ .creation_vars(); #cp-creation-container { + &:focus-visible { + outline: @variables_focus_style; + border-radius: @variables_radius; + } + position: absolute; z-index: 100000000; // #loading * 10 top: 0px; @@ -122,6 +127,9 @@ font-size: 16px; color: inherit; } + a:focus-visible { + border-radius: 50%; + } } } .cp-creation-early { @@ -142,9 +150,8 @@ border: none; border-radius: @variables_radius; cursor: pointer; - outline: none; text-transform: uppercase; - &:hover { + &:hover, &:focus-visible { background: contrast(@cp_creation-button-fg, lighten(@cp_creation-button-bg, 5%), darken(@cp_creation-button-bg, 5%)); } } @@ -186,12 +193,13 @@ } } .cp-creation-slider { - display: block; + display: none; overflow: hidden; max-height: 0px; max-width: 0px; //margin-top: 10px; &.active { + display: block; transition: max-height 0.5s ease-in-out; max-width: none; max-height: 100px; @@ -259,13 +267,11 @@ input { width: 45px; margin: 0 5px; - padding: 0; - padding-left: 3px; - margin: 0 5px; + padding: 0 0 0 3px; } select { - margin-right: 5px; border-radius: @variables_radius; + margin: 0.2rem; } } &.active { @@ -286,10 +292,14 @@ input { width: 150px; padding: 0 5px; + margin: 0.2rem; } label { flex: none; } + .cp-password-reveal { + margin:0.2rem; + } } } } @@ -313,9 +323,12 @@ justify-content: space-between; .cp-creation-template-more { font-size: 30px; - cursor: pointer; margin: 0 5px; text-align: center; + background-color: transparent; + border-color: transparent; + color: @cryptpad_text_col; + border-radius: @variables_radius; &:first-child { left: 5px; } diff --git a/customize.dist/src/less2/include/loading.less b/customize.dist/src/less2/include/loading.less index dd89dff2b..acb8b38bc 100644 --- a/customize.dist/src/less2/include/loading.less +++ b/customize.dist/src/less2/include/loading.less @@ -126,13 +126,14 @@ .cp-password-form { display: flex; flex-wrap: wrap; + gap:0.5rem; width: 100%; .cp-password-container { flex-shrink: 1; min-width: 0; } .cp-password-reveal { - padding: 0px 24px; + margin-left: 0.5rem; } } .cp-password-input { diff --git a/www/common/common-interface.js b/www/common/common-interface.js index e95e5dbf9..4363572f2 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -990,7 +990,10 @@ define([ var input = h('input.cp-password-input', attributes); var eye = h('span.fa.fa-eye.cp-password-reveal', { - tabindex: 0 + tabindex: 0, + role: 'button', + 'aria-label': Messages.show_password, + 'aria-pressed': 'false' }); var $eye = $(eye); @@ -1013,12 +1016,12 @@ define([ if ($eye.hasClass('fa-eye')) { $input.prop('type', 'text'); $input.focus(); - $eye.removeClass('fa-eye').addClass('fa-eye-slash'); + $eye.removeClass('fa-eye').addClass('fa-eye-slash').attr('aria-label', Messages.hide_password).attr('aria-pressed', 'true'); return; } $input.prop('type', 'password'); $input.focus(); - $eye.removeClass('fa-eye-slash').addClass('fa-eye'); + $eye.removeClass('fa-eye-slash').addClass('fa-eye').attr('aria-label', Messages.show_password).attr('aria-pressed', 'false'); }); } @@ -1036,7 +1039,7 @@ define([ href: href, target: "_blank", 'data-tippy-placement': "right", - 'aria-label': Messages.help_genericMore //TBC XXX + 'aria-label': text }); return q; }; @@ -1353,13 +1356,12 @@ define([ }); $input.change(function () { + $mark.attr('aria-checked', $input.is(':checked')); if (!opts.labelAlt) { return; } if ($input.is(':checked') !== checked) { $(label).text(opts.labelAlt); - $mark.attr('aria-checked', 'true'); } else { $(label).text(labelTxt); - $mark.attr('aria-checked', 'false'); } }); diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index 62db751d6..c3de21053 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -2649,10 +2649,10 @@ define([ var $creationContainer = $('