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>
This commit is contained in:
galupa 2021-09-28 15:25:40 +13:00 committed by GitHub
parent 42f4fcff5a
commit a6ce974b88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 6 deletions

View File

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

View File

@ -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>

View File

@ -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.