DEV: Emoji picker keyboard accessibility updates (#18331)

This PR makes some updates to the prior keyboard accessibility commit (eb98746):
- Makes `tabindex` attribute only appear on emoji markup in the emoji picker.
- After pressing the Esc key, focus returns to the <textarea/> input (composer editor or chat input)
This commit is contained in:
Keegan George
2022-09-22 15:21:34 -07:00
committed by GitHub
parent 998bd191a5
commit a23d19fab0
8 changed files with 1896 additions and 1865 deletions

View File

@ -19,7 +19,7 @@ end
def html_for_section(group)
icons = group["icons"].map do |icon|
class_attr = icon["diversity"] ? " class=\"diversity\"" : ""
" {{replace-emoji \":#{icon['name']}:\" (hash lazy=true#{class_attr})}}"
" {{replace-emoji \":#{icon['name']}:\" (hash lazy=true#{class_attr} tabIndex=\"0\")}}"
end
<<~HTML
@ -210,7 +210,7 @@ task 'javascript:update_constants' => :environment do
emoji_buttons = groups_json.map do |group|
<<~HTML
<button type="button" data-section="#{group["name"]}" {{action onCategorySelection "#{group["name"]}"}} class="btn btn-default category-button emoji">
<button type="button" data-section="#{group["name"]}" {{action this.onCategorySelection "#{group["name"]}"}} class="btn btn-default category-button emoji">
{{replace-emoji ":#{group["tabicon"]}:"}}
</button>
HTML