From fd63d5ef715bfc0e4253be1431dfadaca10479ea Mon Sep 17 00:00:00 2001
From: jjsa <jj.sarton.de>
Date: Wed, 18 Dec 2024 13:15:09 +0100
Subject: [PATCH] use button instead of wrong elements

---
 static/galene.css  | 118 +++++++++------------------------------------
 static/galene.html |  76 +++++++++++++----------------
 static/galene.js   |  25 +++-------
 3 files changed, 63 insertions(+), 156 deletions(-)

diff --git a/static/galene.css b/static/galene.css
index 322e3ce..539afd5 100644
--- a/static/galene.css
+++ b/static/galene.css
@@ -1,13 +1,7 @@
-
 button {
     background: none;
     border: 0;
-}
-.screenreader {
-    width: 0px;
-    height: 0px;
-    overflow: hidden;
-    margin: 0;
+    color: inherit;
 }
 
 .nav-fixed .topnav {
@@ -129,7 +123,7 @@ button {
     line-height: .7;
 }
 
-.sidenav .user-logout button:hover {
+.sidenav .user-logout a:hover {
     color: #ab0659;
 }
 
@@ -281,12 +275,12 @@ button {
 }
 
 .full-width {
-    /*width: calc(100vw - 200px);*/
+    width: calc(100vw - 200px);
     height: calc(var(--vh, 1vh) * 100 - 56px);
 }
 
 .full-width-active {
-/*    width: 100vw;*/
+    width: 100vw;
 }
 
 .container {
@@ -324,6 +318,7 @@ button {
     resize: none;
     overflow: hidden;
     padding: 5px;
+    outline: none;
     border: none;
     text-indent: 5px;
     box-shadow: none;
@@ -451,13 +446,6 @@ textarea.form-reply {
     white-space: pre-wrap;
 }
 
-.message button {
-    margin: 1em;
-    padding: .4em .8em;
-    border-radius: .7em;
-    background: #a1ceff;
-}
-
 .video-container {
     height: calc(var(--vh, 1vh) * 100 - 56px);
     position: relative;
@@ -485,7 +473,7 @@ textarea.form-reply {
 }
 
 .collapse-video {
-    left: calc(-100vw);
+    left: 30px;
     right: inherit;
 }
 
@@ -536,7 +524,6 @@ textarea.form-reply {
     background: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 70%) 100%);
 }
 
-.peer:focus-within > .video-controls, .peer:focus-within > .top-video-controls,
 .peer:hover > .video-controls, .peer:hover > .top-video-controls {
     opacity: 1;
 }
@@ -548,10 +535,6 @@ textarea.form-reply {
     cursor: pointer;
 }
 
-.peer button i {
-    color: #eaeaea;
-}
-
 .video-controls span:last-child, .top-video-controls span:last-child {
     margin-right: 0;
 }
@@ -606,7 +589,6 @@ textarea.form-reply {
     transition: opacity .5s ease-out;
 }
 
-.video-controls .volume:focus-within,
 .video-controls .volume:hover {
     --ov: 1;
     --dv: inline;
@@ -687,7 +669,7 @@ textarea.form-reply {
 }
 
 .nav-cancel, .muted, .nav-cancel label, .muted label {
-    color: #d03e3e;
+    color: #d03e3e
 }
 
 .nav-cancel:hover, .muted:hover, .nav-cancel label:hover, .muted label:hover {
@@ -699,7 +681,7 @@ textarea.form-reply {
     font-size: 25px;
 }
 
-#openside .nav-more {
+.nav-more {
     padding-top: 5px;
     margin-left: 0;
 }
@@ -810,25 +792,21 @@ h1 {
 }
 
 #filterselect {
-    width: 8em;
     text-align-last: center;
     margin-right: 0.4em;
 }
 
 #sendselect {
-    width: 8em;
     text-align-last: center;
     margin-right: 0.4em;
 }
 
 #simulcastselect {
-    width: 8em;
     text-align-last: center;
     margin-right: 0.4em;
 }
 
 #requestselect {
-    width: 8em;
     text-align-last: center;
 }
 
@@ -892,6 +870,14 @@ h1 {
     overflow-y: hidden;
 }
 
+#input:focus {
+    outline: none;
+}
+
+#inputbutton:focus {
+    outline: none;
+}
+
 #resizer {
     width: 4px;
     margin-left: -4px;
@@ -989,10 +975,6 @@ h1 {
     color: #c2a4e0;
 }
 
-.sidenav button:hover {
-    color: #c2a4e0;
-}
-
 .sidenav .closebtn {
     cursor: pointer;
     position: absolute;
@@ -1135,22 +1117,9 @@ header .collapse:hover {
 }
 
 /* Shrinking the sidebar from 200px to 0px */
-#sidebarnav {
-    display: none;
-    width: 250px;
-}
-
-#sidebarnav[open=true] {
-    display: block;
-}
-
 #left-sidebar.active {
-    display: none;
-}
-        
-#left-sidebar:not(.active) {
-    display: block;
-    width:200px;
+    min-width: 0;
+    max-width: 0;
 }
 
 #left-sidebar .sidebar-header strong {
@@ -1185,21 +1154,17 @@ header .collapse:hover {
     cursor: pointer;
     overflow: hidden;
     white-space: pre;
-    display: block;
     width: 100%;
     text-align: left;
 }
 
-#left-sidebar.active #users > button {
+#left-sidebar.active #users > div {
     padding: 10px 5px !important;
 }
 
-#users > button:hover {
+#users > div:hover {
     background-color: #f2f2f2;
 }
-#users > button:focus, #users > button:focus-visible {
-   outline-offset: -2px;
-}
 
 #users > button::before {
     content: "\f111";
@@ -1274,10 +1239,6 @@ header .collapse:hover {
         display: none;
     }
 
-    .video-on #chat {
-        display: none;
-    }
-
     .video-container {
         position: fixed;
         height: calc(var(--vh, 1vh) * 100 - 56px);
@@ -1308,7 +1269,7 @@ header .collapse:hover {
         flex: 100%;
         width: 100vw;
         /* chat is always visible here */
-        display: block /*!important*/;
+        display: block !important;
     }
 
     .coln-right {
@@ -1320,7 +1281,6 @@ header .collapse:hover {
         width: 100vw;
     }
 
-/*
     #left-sidebar.active {
         min-width: 200px;
         max-width: 200px;
@@ -1330,11 +1290,10 @@ header .collapse:hover {
         min-width: 0;
         max-width: 0;
     }
-*/
+
     /* Reappearing the sidebar on toggle button click */
     #left-sidebar {
         margin-left: 0; 
-        z-index: 1;
     }
 
     #left-sidebar .sidebar-header strong {
@@ -1349,7 +1308,7 @@ header .collapse:hover {
         display: block;
     }
 
-    .sidenav a {padding: 10px 10px;}
+    .sidenav button {padding: 10px 10px;}
 
     .sidenav-header h2 {
         line-height: 36px;
@@ -1417,12 +1376,6 @@ header .collapse:hover {
     margin-right: 10px;
 }
 
-.contextualMenu button {
-    outline-offset: 3px;
-    display: inline-block;
-    width: calc(100% - 2em);
-}
-
 #invite-dialog {
     background-color: #eee;
 }
@@ -1449,28 +1402,3 @@ header .collapse:hover {
 .toastify.info .toast-close {
     color: #000;
 }
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* wrong preset for some browser! */
-video::-webkit-media-controls-enclosure {
-  display: none !important;
-}
-
-video::-webkit-media-controls-panel {
-  display: none !important;
-}
-
-video::-webkit-media-controls {
-  display: none !important;
-}
-
diff --git a/static/galene.html b/static/galene.html
index b35d76c..dcf997a 100644
--- a/static/galene.html
+++ b/static/galene.html
@@ -13,26 +13,23 @@
     <link rel="stylesheet" type="text/css" href="/third-party/fontawesome/css/regular.min.css"/>
     <link rel="stylesheet" type="text/css" href="/third-party/toastify/toastify.css"/>
     <link rel="stylesheet" type="text/css" href="/third-party/contextual/contextual.css"/>
-    <script src="/key.js" ></script>
   </head>
 
   <body>
-    <div id="srSpeak" class="sr-only" aria-live="assertive" aria-atomic="true"></div>
-    <main id="main" class="app">
+    <div id="main" class="app">
       <div class="row full-height">
-        <nav id="left-sidebar" class="active">
+        <nav id="left-sidebar">
           <div class="users-header">
             <div class="galene-header">Galène</div>
           </div>
-          <h2 class="screenreader">User list</h2>
-          <div rollr="region" class="header-sep"></div>
+          <div class="header-sep"></div>
           <div id="users"></div>
         </nav>
         <div class="container">
           <header>
             <nav class="topnav navbar navbar-expand navbar-light fixed-top">
               <div id="header">
-                <button class="collapse" title="Collapse left panel" id="sidebarCollapse" aria-label="Collapse left panel">
+                <button class="collapse" title="Collapse left panel" id="sidebarCollapse">
                   <i class="fas fa-align-left" aria-hidden="true"></i>
                 </button>
                 <h1 id="title" class="header-title">Galène</h1>
@@ -40,48 +37,47 @@
 
               <ul class="nav-menu">
                 <li>
-                  <button id="presentbutton" class="invisible btn btn-success" aria-label=" Enable">
+                  <button id="presentbutton" class="invisible btn btn-success">
                     <i class="fas fa-play" aria-hidden="true"></i><span class="nav-text"> Enable</span>
                   </button>
                 </li>
                 <li>
-                  <button id="unpresentbutton" class="invisible btn btn-cancel" aria-label=" Disable">
+                  <button id="unpresentbutton" class="invisible btn btn-cancel">
                     <i class="fas fa-stop" aria-hidden="true"></i><span class="nav-text"> Disable</span>
                   </button>
                 </li>
                 <li>
-                  <button id="mutebutton" class="nav-link nav-button" aria-label="Mute">
+                  <button id="mutebutton" class="nav-link nav-button">
                     <span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span>
                     <label>Mute</label>
                   </button>
                 </li>
                 <li>
-                  <button id="sharebutton" class="invisible nav-link nav-button" aria-label="Share Screen">
+                  <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>
                   </button>
                 </li>
                 <li>
-                  <button class="nav-button nav-link nav-more" id="openside" title="Open settings" aria-label="Open settings">
+                  <button class="nav-button nav-link nav-more" id="openside">
                     <span><i class="fas fa-ellipsis-v" aria-hidden="true"></i></span>
                   </button>
                 </li>
               </ul>
             </nav>
           </header>
-          <div class="row full-width video-on" id="mainrow">
-            <div class="coln-left invisible" id="left" >
-              <div role="region" id="chat">
-                <h2 class="screenreader">Chat box</h2>
+          <div class="row full-width" id="mainrow">
+            <div class="coln-left" id="left">
+              <div id="chat">
                 <div id="chatbox">
-                  <button class="close-chat" id="close-chat"  title="Hide chat" aria-label="Hide chat">
+                  <div class="close-chat" id="close-chat"  title="Hide chat">
                     <span class="close-icon"></span>
-                  </button>
-                  <div id="box" tabindex="0" aria-label="Chat Area"></div>
+                  </div>
+                  <div id="box"></div>
                   <div class="reply">
                     <form id="inputform">
-                      <textarea id="input" class="form-reply" aria-label="Enter message"></textarea>
-                      <input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default" aria-label="Send message"/>
+                      <textarea id="input" class="form-reply"></textarea>
+                      <input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default"/>
                     </form>
                   </div>
                 </div>
@@ -89,16 +85,16 @@
             </div>
             <div id="resizer"></div>
             <div class="coln-right" id="right">
-              <button class="show-video blink invisible" id="show-video" aria-label="Show video">
+              <button class="show-video blink invisible" id="show-video">
                 <i class="fas fa-exchange-alt" aria-hidden="true"></i>
               </button>
-              <button class="chat-btn show-chat" id="show-chat" aria-label="Show chat">
+              <button class="chat-btn show-chat invisible" id="show-chat">
                 <i class="far fa-comment-alt icon-chat" title="Show chat"></i>
               </button>
-              <button class="chat-btn collapse-video invisible" id="collapse-video" aria-label="Hide video and show chat">
+              <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>
               </button>
-              <div class="video-container invisible" id="video-container"><h2 class="screenreader">Video area</h2>
+              <div class="video-container invisible" id="video-container">
                 <div id="expand-video" class="expand-video">
                   <div id="peers"></div>
                 </div>
@@ -146,19 +142,19 @@
           </div>
         </div>
       </div>
-    </main>
+    </div>
 
-    <div id="sidebarnav" class="sidenav" aria-hidden="true">
+    <div id="sidebarnav" class="sidenav">
       <div class="sidenav-header">
         <h2>Settings</h2>
-        <button class="closebtn" id="clodeside" title="Close settings" aria-label="Close settings"><i class="fas fa-times"></i>
+        <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>
@@ -264,19 +260,19 @@
     <div id="videocontrols-template" class="invisible">
       <div class="video-controls vc-overlay">
         <div class="controls-button controls-left">
-          <button class="video-play" title="Play video" aria-label="Play video">
+          <button class="video-play" title="Play video">
             <i class="fas fa-play"></i>
           </button>
-          <span class="volume" title="Volume">
-            <i class="fas fa-volume-up volume-mute"  tabindex="0" role='button'></i>
-            <input class="volume-slider" type="range" max="100" value="100" min="0" step="5" aria-label="Volume slider">
+          <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">
-          <button class="pip" title="Picture In Picture" aria-label="Picture In Picture">
+          <button class="pip" title="Picture In Picture">
             <i class="far fa-clone" aria-hidden="true"></i>
           </button>
-          <button class="fullscreen" title="Fullscreen" aria-label="Fullscreen">
+          <button class="fullscreen" title="Fullscreen">
             <i class="fas fa-expand" aria-hidden="true"></i>
           </button>
         </div>
@@ -285,15 +281,11 @@
     <div id="topvideocontrols-template" class="invisible">
       <div class="top-video-controls">
         <div class="controls-button controls-right">
-          <button class="close-icon video-stop" title="Stop video" aria-label="Stop video">
-          </button>
+          <span class="close-icon video-stop" title="Stop video">
+          </span>
         </div>
       </div>
     </div>
-    <div class="sr-help invisible"> <!-- help for translation -->
-      <span class='voff'>Muted</span>
-      <span class='von'>On</span>
-    </div>
 
     <dialog id="invite-dialog">
       <form method="dialog">
diff --git a/static/galene.js b/static/galene.js
index 53ad536..9078131 100644
--- a/static/galene.js
+++ b/static/galene.js
@@ -2078,13 +2078,9 @@ function setVolumeButton(muted, button, slider) {
     if(!muted) {
         button.classList.remove("fa-volume-mute");
         button.classList.add("fa-volume-up");
-        let von = document.querySelector('.sr-help .von').textContent;
-        button.setAttribute("aria-label", von);
     } else {
         button.classList.remove("fa-volume-up");
         button.classList.add("fa-volume-mute");
-        let voff = document.querySelector('.sr-help .voff').textContent;
-        button.setAttribute("aria-label",voff);
     }
 
     if(!(slider instanceof HTMLInputElement))
@@ -2459,7 +2455,6 @@ 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");
@@ -3170,8 +3165,7 @@ function addToChatbox(id, peerId, dest, nick, time, privileged, history, kind, m
         }
 
         if(doHeader) {
-//            let header = document.createElement('p');
-            let header = document.createElement('h3');
+            let header = document.createElement('p');
             let user = document.createElement('span');
             let u = dest && serverConnection.users[dest];
             let name = (u && u.username);
@@ -4176,16 +4170,11 @@ document.getElementById('disconnectbutton').onclick = function(e) {
 };
 
 function openNav() {
-    document.getElementById("sidebarnav").setAttribute("open",'true');
-    document.getElementById("sidebarnav").removeAttribute('aria-hidden');
-    document.querySelector('#sidebarnav .closebtn').focus();
+    document.getElementById("sidebarnav").style.width = "250px";
 }
 
 function closeNav() {
-    document.getElementById("sidebarnav").removeAttribute('open');    
-    document.getElementById("sidebarnav").setAttribute("aria-hidden",'true');
-    document.querySelector('#openside').focus();
-
+    document.getElementById("sidebarnav").style.width = "0";
 }
 
 document.getElementById('sidebarCollapse').onclick = function(e) {
@@ -4194,9 +4183,9 @@ document.getElementById('sidebarCollapse').onclick = function(e) {
 };
 
 document.getElementById('openside').onclick = function(e) {
-      //e.preventDefault();
-      let open = document.getElementById("sidebarnav").getAttribute('open');
-      if ( open ) {
+      e.preventDefault();
+      let sidewidth = document.getElementById("sidebarnav").style.width;
+      if (sidewidth !== "0px" && sidewidth !== "") {
           closeNav();
           return;
       } else {
@@ -4215,7 +4204,6 @@ document.getElementById('collapse-video').onclick = function(e) {
     setVisibility('collapse-video', false);
     setVisibility('show-video', true);
     hideVideo(true);
-    document.getElementById('mainrow').classList.remove('video-on');
 };
 
 document.getElementById('show-video').onclick = function(e) {
@@ -4223,7 +4211,6 @@ document.getElementById('show-video').onclick = function(e) {
     setVisibility('video-container', true);
     setVisibility('collapse-video', true);
     setVisibility('show-video', false);
-    document.getElementById('mainrow').classList.add('video-on');
 };
 
 document.getElementById('close-chat').onclick = function(e) {