From a6ce974b883927c2b5a443831dfa65cd7ad9be77 Mon Sep 17 00:00:00 2001
From: galupa <rangga.w.a.p@gmail.com>
Date: Tue, 28 Sep 2021 15:25:40 +1300
Subject: [PATCH] enable keyboard user to generate and reset access code
 (#2783)

tidy up code based on CR

Co-authored-by: Rangga Permana <ranggapermana@catalyst.net.nz>
---
 app/assets/javascripts/room.js                | 35 +++++++++++++++++++
 .../shared/modals/_create_room_modal.html.erb | 12 +++----
 config/locales/en.yml                         |  2 ++
 3 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/room.js b/app/assets/javascripts/room.js
index d953f613..f41c1cee 100644
--- a/app/assets/javascripts/room.js
+++ b/app/assets/javascripts/room.js
@@ -50,6 +50,9 @@ $(document).on('turbolinks:load', function(){
       showDeleteRoom(this)
     })
 
+    // For keyboard users to be able to generate access code
+    generateAccessCodeAccessibility()
+
     $('.selectpicker').selectpicker({
       liveSearchPlaceholder: getLocalizedString('javascript.search.start')
     });
@@ -430,3 +433,35 @@ function clearRoomSearch() {
   $('#room-search').val(''); 
   filterRooms()
 }
+
+function generateAccessCodeAccessibility() {
+  // For keyboard users to be able to generate access code
+  $("#generate-room-access-code").keyup(function(event) {
+    if (event.keyCode === 13 || event.keyCode === 32) {
+        generateAccessCode();
+    }
+  })
+
+  // For keyboard users to be able to reset access code
+  $("#reset-access-code").keyup(function(event) {
+    if (event.keyCode === 13 || event.keyCode === 32) {
+        ResetAccessCode();
+    }
+  })
+
+  // For keyboard users to be able to generate access code
+  // for moderator
+  $("#generate-moderator-room-access-code").keyup(function(event) {
+    if (event.keyCode === 13 || event.keyCode === 32) {
+        generateModeratorAccessCode();
+    }
+  })
+
+  // For keyboard users to be able to reset access code
+  // for moderator
+  $("#reset-moderator-access-code").keyup(function(event) {
+    if (event.keyCode === 13 || event.keyCode === 32) {
+        ResetModeratorAccessCode();
+    }
+  })
+}
diff --git a/app/views/shared/modals/_create_room_modal.html.erb b/app/views/shared/modals/_create_room_modal.html.erb
index dcb2315f..ec105e4c 100644
--- a/app/views/shared/modals/_create_room_modal.html.erb
+++ b/app/views/shared/modals/_create_room_modal.html.erb
@@ -33,24 +33,24 @@
             </div>
 
             <div class="input-icon mb-2">
-              <span onclick="generateAccessCode()" class="input-icon-addon allow-icon-click cursor-pointer">
+              <span onclick="generateAccessCode()" class="input-icon-addon allow-icon-click cursor-pointer" id="generate-room-access-code" tabindex="0" aria-label='<%= t("modal.create_room.access_code_placeholder") %>'>
                 <i class="fas fa-dice"></i>
               </span>
-              <%= f.label :access_code, t("modal.create_room.access_code_placeholder"), id: "create-room-access-code", class: "form-control" %>
+              <%= f.label :access_code, t("modal.create_room.access_code_placeholder"), id: "create-room-access-code", class: "form-control", role: "log" %>
               <%= f.hidden_field :access_code %>
-              <span onclick="ResetAccessCode()" class="input-icon-addon allow-icon-click cursor-pointer">
+              <span onclick="ResetAccessCode()" class="input-icon-addon allow-icon-click cursor-pointer" id="reset-access-code" tabindex="0" aria-label='<%= t("modal.create_room.reset_access_code") %>' >
                 <i class="far fa-trash-alt"></i>
               </span>
             </div>
 
             <% if moderator_code_allowed? %>
               <div class="input-icon mb-2">
-                <span onclick="generateModeratorAccessCode()" class="input-icon-addon allow-icon-click cursor-pointer">
+                <span onclick="generateModeratorAccessCode()" class="input-icon-addon allow-icon-click cursor-pointer" id="generate-moderator-room-access-code" tabindex="0" aria-label='<%= t("modal.create_room.moderator_access_code_placeholder") %>'>
                   <i class="fas fa-dice"></i>
                 </span>
-                <%= f.label :moderator_access_code, t("modal.create_room.moderator_access_code_placeholder"), id: "create-room-moderator-access-code", class: "form-control" %>
+                <%= f.label :moderator_access_code, t("modal.create_room.moderator_access_code_placeholder"), id: "create-room-moderator-access-code", class: "form-control", role: "log" %>
                 <%= f.hidden_field :moderator_access_code %>
-                <span onclick="ResetModeratorAccessCode()" class="input-icon-addon allow-icon-click cursor-pointer">
+                <span onclick="ResetModeratorAccessCode()" class="input-icon-addon allow-icon-click cursor-pointer" id="reset-moderator-access-code" tabindex="0" aria-label='<%= t("modal.create_room.reset_moderator_access_code") %>'>
                   <i class="far fa-trash-alt"></i>
                 </span>
               </div>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index b16e5035..855fbb2b 100755
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -401,7 +401,9 @@ en:
       access_code: Access Code
       moderator_access_code: Moderator Code
       access_code_placeholder: Generate an optional room access code
+      reset_access_code: Reset the optional room access code
       moderator_access_code_placeholder: Generate an optional code for moderators
+      reset_moderator_access_code: Reset the optional code for moderators
       auto_join: Automatically join me into the room
       create: Create Room
       free_delete: You will be free to delete this room at any time.