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

@@ -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();
+    }
+  })
+}

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>

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.