Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

replace with button #240

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

replace with button #240

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
999ef3b
changes for keyboard and scrennreader users
Dec 14, 2024
22e7526
Merge branch 'jech:master' into master
jjsarton Dec 18, 2024
fd63d5e
use button instead of wrong elements
Dec 18, 2024
c7189ed
not shown area must have display none
Dec 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions KEYBOARD
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# Use of the keyboard with Galene

People wich are not able to use a mouse need to have other possibilities.

Some user will use the keyboard in order to navigate to the galene Web
Interface and will use the Tab Key to select the wanted element and
other key as arrow up, down, space.

User with visual impairement, may use a screenreader.

For keyboard user we can use the following keys:

- 'u' goto user list
- 'c' go to the chat input box
- 'r' raise, unraise hand
- 'm' mute, unmute


- Esc close contextual menu, close the setting, close the chat box,
close the user list


For the screenreader user, it is difficult to provide shortcuts, most
keys or keys combination are reserved from the OS the screenreader and
the browser.

In order to offer a faster way for selecting the wanted element, we use
thw header navigation (h1, h2. h3).

- The key 1 will got to the main Title of the page.
- The key 2 will allow to select one of the area user list, chat box or media area.
- The key 3 allow to navigate from message to message.
- The Tab and Esc key work as for the normal keyboard user

Screenreader shall announce the error and warning textes issued by galene,
this is also implemented.



61 changes: 36 additions & 25 deletions static/galene.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
button {
background: none;
border: 0;
color: inherit;
}

.nav-fixed .topnav {
z-index: 1039;
}
Expand Down Expand Up @@ -109,15 +115,15 @@
display: none;
}

.sidenav .user-logout a {
.sidenav .user-logout button {
font-size: 1em;
padding: 7px 0 0;
color: #e4157e;
cursor: pointer;
line-height: .7;
}

.sidenav .user-logout a:hover {
.sidenav .user-logout button:hover {
color: #ab0659;
}

Expand Down Expand Up @@ -312,7 +318,6 @@
resize: none;
overflow: hidden;
padding: 5px;
outline: none;
border: none;
text-indent: 5px;
box-shadow: none;
Expand Down Expand Up @@ -467,7 +472,7 @@ textarea.form-reply {
}

.collapse-video {
left: 30px;
left: calc(-100vw);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please explain what that does?

right: inherit;
}

Expand Down Expand Up @@ -864,14 +869,6 @@ h1 {
overflow-y: hidden;
}

#input:focus {
outline: none;
}

#inputbutton:focus {
outline: none;
}

#resizer {
width: 4px;
margin-left: -4px;
Expand Down Expand Up @@ -945,17 +942,21 @@ h1 {
position: fixed;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
width: 0px;
width: 250px;
/* on top of everything */
z-index: 2999;
top: 0;
right: 0;
height: calc(var(--vh, 1vh) * 100);
overflow-x: hidden;
overflow-y: hidden;

}
.sidenav.invisible {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have .invisible, so isn't this redundant?

display: none;
}

.sidenav a {
.sidenav button {
padding: 10px 20px;
text-decoration: none;
font-size: 30px;
Expand All @@ -965,7 +966,7 @@ h1 {
line-height: 1.0;
}

.sidenav a:hover {
.sidenav button:hover {
color: #c2a4e0;
}

Expand Down Expand Up @@ -1112,8 +1113,12 @@ header .collapse:hover {

/* Shrinking the sidebar from 200px to 0px */
#left-sidebar.active {
min-width: 0;
max-width: 0;
display: none;
}

#left-sidebar:not(.active) {
display: block;
width:200px;
}

#left-sidebar .sidebar-header strong {
Expand Down Expand Up @@ -1148,41 +1153,47 @@ header .collapse:hover {
cursor: pointer;
overflow: hidden;
white-space: pre;
display: block;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this do?

width: 100%;
text-align: left;
}

#left-sidebar.active #users > div {
#left-sidebar.active #users > button {
padding: 10px 5px !important;
}

#users > div:hover {
#users > button:hover {
background-color: #f2f2f2;
}
#users > button:focus, #users > button:focus-visible {
outline-offset: -2px;
}

#users > div::before {
#users > button::before {
content: "\f111";
font-family: 'Font Awesome 6 Free';
color: #20b91e;
margin-right: 5px;
font-weight: 900;
}

#users > div.user-status-raisehand::before {
#users > button.user-status-raisehand::before {
content: "\f256";
}

#users > div::after {
#users > button::after {
font-family: 'Font Awesome 6 Free';
color: #808080;
margin-left: 5px;
font-weight: 900;
float: right;
}

#users > div.user-status-microphone::after {
#users > button.user-status-microphone::after {
content: "\f130";
}

#users > div.user-status-camera::after {
#users > button.user-status-camera::after {
content: "\f030";
}

Expand Down Expand Up @@ -1300,7 +1311,7 @@ header .collapse:hover {
display: block;
}

.sidenav a {padding: 10px 10px;}
.sidenav button {padding: 10px 10px;}

.sidenav-header h2 {
line-height: 36px;
Expand Down
54 changes: 27 additions & 27 deletions static/galene.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@
<header>
<nav class="topnav navbar navbar-expand navbar-light fixed-top">
<div id="header">
<div class="collapse" title="Collapse left panel" id="sidebarCollapse">
<button class="collapse" title="Collapse left panel" id="sidebarCollapse">
<i class="fas fa-align-left" aria-hidden="true"></i>
</div>
</button>
<h1 id="title" class="header-title">Galène</h1>
</div>

Expand All @@ -47,21 +47,21 @@ <h1 id="title" class="header-title">Galène</h1>
</button>
</li>
<li>
<div id="mutebutton" class="nav-link nav-button">
<button id="mutebutton" class="nav-link nav-button">
<span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span>
<label>Mute</label>
</div>
</button>
</li>
<li>
<div id="sharebutton" class="invisible nav-link nav-button">
<button id="sharebutton" class="invisible nav-link nav-button">
<span><i class="fas fa-share-square" aria-hidden="true"></i></span>
<label>Share Screen</label>
</div>
</button>
</li>
<li>
<div class="nav-button nav-link nav-more" id="openside">
<button class="nav-button nav-link nav-more" id="openside">
<span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span>
</div>
</button>
</li>
</ul>
</nav>
Expand All @@ -85,15 +85,15 @@ <h1 id="title" class="header-title">Galène</h1>
</div>
<div id="resizer"></div>
<div class="coln-right" id="right">
<span class="show-video blink invisible" id="show-video">
<button class="show-video blink invisible" id="show-video">
<i class="fas fa-exchange-alt" aria-hidden="true"></i>
</span>
<div class="chat-btn show-chat invisible" id="show-chat">
</button>
<button class="chat-btn show-chat invisible" id="show-chat">
<i class="far fa-comment-alt icon-chat" title="Show chat"></i>
</div>
<div class="chat-btn collapse-video invisible" id="collapse-video">
</button>
<button class="chat-btn collapse-video invisible" id="collapse-video">
<i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i>
</div>
</button>
<div class="video-container invisible" id="video-container">
<div id="expand-video" class="expand-video">
<div id="peers"></div>
Expand Down Expand Up @@ -144,27 +144,27 @@ <h1 id="title" class="header-title">Galène</h1>
</div>
</div>

<div id="sidebarnav" class="sidenav">
<div id="sidebarnav" class="sidenav invisible">
<div class="sidenav-header">
<h2>Settings</h2>
<a class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></a>
<button class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></button>
</div>
<div class="sidenav-content" id="optionsdiv">
<div id="profile" class="profile invisible">
<div class="profile-user">
<div class="profile-logo">
<button class="profile-logo">
<span><i class="fas fa-user" aria-hidden="true"></i></span>
</div>
</button>
<div class="profile-info">
<span id="userspan"></span>
<span id="permspan"></span>
<span id="chpwspan" class="invisible"><a id="change-password">Change password</a></span>
</div>
<div class="user-logout">
<a id="disconnectbutton">
<button id="disconnectbutton">
<span class="logout-icon"><i class="fas fa-sign-out-alt"></i></span>
<span class="logout-text">Logout</span>
</a>
</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -260,21 +260,21 @@ <h2>Settings</h2>
<div id="videocontrols-template" class="invisible">
<div class="video-controls vc-overlay">
<div class="controls-button controls-left">
<span class="video-play" title="Play video">
<button class="video-play" title="Play video">
<i class="fas fa-play"></i>
</span>
<span class="volume" title="Volume">
</button>
<span class="volume" title="Volume" role="button">
<i class="fas fa-volume-up volume-mute" aria-hidden="true"></i>
<input class="volume-slider" type="range" max="100" value="100" min="0" step="5" >
</span>
</div>
<div class="controls-button controls-right">
<span class="pip" title="Picture In Picture">
<button class="pip" title="Picture In Picture">
<i class="far fa-clone" aria-hidden="true"></i>
</span>
<span class="fullscreen" title="Fullscreen">
</button>
<button class="fullscreen" title="Fullscreen">
<i class="fas fa-expand" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
Expand Down
21 changes: 15 additions & 6 deletions static/galene.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2455,7 +2455,7 @@ function userMenu(elt) {
*/
function addUser(id, userinfo) {
let div = document.getElementById('users');
let user = document.createElement('div');
let user = document.createElement('button');
user.id = 'user-' + id;
user.classList.add("user-p");
setUserStatus(id, user, userinfo);
Expand Down Expand Up @@ -4170,11 +4170,13 @@ document.getElementById('disconnectbutton').onclick = function(e) {
};

function openNav() {
document.getElementById("sidebarnav").style.width = "250px";
//document.getElementById("sidebarnav").style.width = "250px";
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't leave commented-out code. Why is this being removed?

document.getElementById("sidebarnav").classList.remove('invisible');
}

function closeNav() {
document.getElementById("sidebarnav").style.width = "0";
//document.getElementById("sidebarnav").style.width = "0";
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't leave commented-out code.

document.getElementById("sidebarnav").classList.add('invisible');
}

document.getElementById('sidebarCollapse').onclick = function(e) {
Expand All @@ -4183,9 +4185,16 @@ document.getElementById('sidebarCollapse').onclick = function(e) {
};

document.getElementById('openside').onclick = function(e) {
e.preventDefault();
let sidewidth = document.getElementById("sidebarnav").style.width;
if (sidewidth !== "0px" && sidewidth !== "") {
// e.preventDefault();
// let sidewidth = document.getElementById("sidebarnav").style.width;
// if (sidewidth !== "0px" && sidewidth !== "") {
// closeNav();
// return;
// } else {
// openNav();
// }
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't leave commented-out code.

let invisible = document.getElementById("sidebarnav").classList.contains('invisible');
if (! invisible) {
closeNav();
return;
} else {
Expand Down
Loading