The_Great_Archive/cryptpad
1
0
Fork 0
mirror of https://github.com/cryptpad/cryptpad.git synced 2026-09-12 19:49:59 +05:00
Code Issues Packages Projects Releases Wiki Activity

improve accessibility with focus-visible styles, keyboard navigation and correct tab-order

Browse Source
This commit is contained in:
daria 2026-02-27 10:26:11 +02:00
parent d172fe285e
commit 723158f9de
No known key found for this signature in database
GPG Key ID: 3B75240E6B2F2701
2 changed files with 48 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
customize.dist/src/less2/include/messenger.less
View File

@ -124,6 +124,10 @@
&:hover {
background-color: rgba(0, 0, 0, 0.2);
}
&:focus-visible {
outline: @variables_focus_style;
border-radius: @variables_radius;
}
svg {
margin: 0;
}
@ -137,6 +141,10 @@
svg {
margin: 0;
}
li:focus-visible {
outline: @variables_focus_style;
border-radius: @variables_radius;
}
}
}
}
@ -152,6 +160,10 @@
border-color: var(--msg-bg-color-darker);
}
}
&:focus-visible {
outline: @variables_focus_style;
border-radius: @variables_radius;
}
&.cp-app-contacts-notify {
animation: notif 2s ease-in-out infinite;
}
@ -303,6 +315,11 @@
}
.cp-app-contacts-remove-history {
.hover;
margin-right: 3px;
&:focus-visible {
outline: @variables_focus_style;
border-radius: @variables_radius;
}
}
.cp-avatar-container {
display: flex;
@ -317,6 +334,10 @@
&.cp-app-contacts-faded {
color: @cryptpad_text_col;
}
&:focus-visible {
outline: @variables_focus_style;
border-radius: @variables_radius;
}
}
.cp-app-contacts-header-title {
@ -345,9 +366,13 @@
flex-flow: column;
.cp-app-contacts-messages {
padding: 0 10px;
margin: 10px 0;
margin: 10px 2px;
flex: 1;
overflow-x: auto;
&:focus-visible {
outline: @variables_focus_style;
border-radius: @variables_radius;
}
.cp-app-contacts-message {
display: flex;
flex-direction: column;
@ -358,7 +383,7 @@
display: flex;
justify-content: space-between;
border-radius: @variables_radius;
padding: 0 10px;
padding: 0 5px;
}
.cp-app-contacts-message-row {
display: flex;
@ -385,7 +410,7 @@
justify-content: flex-end;
color: @msg-color;
font-weight: bold;
padding: 0 5px;
padding-right: 5px;
opacity: 0.4;
transition: opacity 0.2s ease;
flex-shrink: 0;
@ -410,7 +435,7 @@
justify-content: center;
padding: 0 5%;
textarea {
margin: 5px 0;
margin: 5px 2px 5px 0;
padding: 5px 10px;
border: none;
height: 54px; // 2 lines (22px height) + 2 margins (5px)

24
www/common/messenger-ui.js
View File

@ -76,11 +76,11 @@ define([
h('div.cp-app-contacts-category-content')
]),
h('div.cp-app-contacts-friends.cp-app-contacts-category', [
h('div.cp-app-contacts-category-content.cp-contacts-friends'),
h('button.btn.btn-default.cp-app-contacts-muted-button', {tabindex:0},[
Icons.get('mute'),
Messages.contacts_manageMuted
]),
h('div.cp-app-contacts-category-content.cp-contacts-friends')
])
]),
h('div.cp-app-contacts-rooms.cp-app-contacts-category', [
h('div.cp-app-contacts-category-content'),
@ -245,6 +245,8 @@ define([
markup.chatbox = function (id, data, curvePublic) {
var moreHistory = h('span', {
class: 'cp-app-contacts-more-history',
tabindex: '0',
role: 'button'
});
moreHistory.append(Icons.get('history', {title: Messages.contacts_fetchHistory}));
@ -252,7 +254,12 @@ define([
var displayName = UI.getDisplayName(chan.name || chan.displayName);
var fetching = false;
var $moreHistory = $(moreHistory).click(function () {
var $moreHistory = $(moreHistory).on('keydown', function (e) {
if (e.which === 13 || e.which === 32) {
e.preventDefault();
$(this).click();
}
}).click(function () {
if (fetching) { return; }
// get oldest known message...
@ -309,11 +316,18 @@ define([
});
var removeHistory = h('span', {
'class': 'cp-app-contacts-remove-history'
'class': 'cp-app-contacts-remove-history',
'tabindex': '0',
'role': 'button'
});
removeHistory.append(Icons.get('remove-history', {title: Messages.contacts_removeHistoryTitle}));
$(removeHistory).click(function () {
$(removeHistory).on('keydown', function (e) {
if (e.which === 13 || e.which === 32) {
e.preventDefault();
$(this).click();
}
}).click(function () {
UI.confirm(Messages.contacts_confirmRemoveHistory, function (yes) {
if (!yes) { return; }