diff --git a/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.js b/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.js index 80473d49371..44ca1067ef4 100644 --- a/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.js +++ b/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.js @@ -9,7 +9,7 @@ import { extractError } from "discourse/lib/ajax-error"; import { SIDEBAR_SECTION, SIDEBAR_URL } from "discourse/lib/constants"; import RouteInfoHelper from "discourse/lib/sidebar/route-info-helper"; import { sanitize } from "discourse/lib/text"; -import { bind } from "discourse-common/utils/decorators"; +import { afterRender, bind } from "discourse-common/utils/decorators"; import I18n from "discourse-i18n"; const FULL_RELOAD_LINKS_REGEX = [ @@ -383,6 +383,13 @@ export default class SidebarSectionForm extends Component { : "sidebar.sections.custom.add"; } + @afterRender + focusNewRowInput(id) { + document + .querySelector(`[data-row-id="${id}"] .icon-picker summary`) + .focus(); + } + @bind setDraggedLink(link) { this.draggedLink = link; @@ -445,6 +452,8 @@ export default class SidebarSectionForm extends Component { segment: "primary", }) ); + + this.focusNewRowInput(this.nextObjectId); } @action @@ -457,6 +466,8 @@ export default class SidebarSectionForm extends Component { segment: "secondary", }) ); + + this.focusNewRowInput(this.nextObjectId); } @action diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs index cb24ea34818..8e22a47ed09 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs @@ -12,6 +12,7 @@ {{on "dragend" this.dragEnd}} {{on "drop" this.dropItem}} role="row" + data-row-id={{@link.objectId}} > {{#unless this.site.mobileView}}
diff --git a/spec/system/custom_sidebar_sections_spec.rb b/spec/system/custom_sidebar_sections_spec.rb index 46cf758d8a5..027877dd729 100644 --- a/spec/system/custom_sidebar_sections_spec.rb +++ b/spec/system/custom_sidebar_sections_spec.rb @@ -127,6 +127,19 @@ describe "Custom sidebar sections", type: :system do expect(sidebar).to have_section_link("Faq", target: "_blank") end + it "accessibility - when new row is added in custom section, first new input is focused" do + sign_in user + visit("/latest") + + sidebar.click_add_section_button + sidebar.click_add_link_button + + is_focused = + page.evaluate_script("document.activeElement.classList.contains('multi-select-header')") + + expect(is_focused).to be true + end + it "allows the user to edit custom section" do sidebar_section = Fabricate(:sidebar_section, title: "My section", user: user) sidebar_url_1 = Fabricate(:sidebar_url, name: "Sidebar Tags", value: "/tags") diff --git a/spec/system/page_objects/components/navigation_menu/base.rb b/spec/system/page_objects/components/navigation_menu/base.rb index 4e335595e61..6d8fb281023 100644 --- a/spec/system/page_objects/components/navigation_menu/base.rb +++ b/spec/system/page_objects/components/navigation_menu/base.rb @@ -138,6 +138,10 @@ module PageObjects click_button(add_section_button_text) end + def click_add_link_button + click_button(add_link_button_text) + end + def has_no_add_section_button? page.has_no_button?(add_section_button_text) end @@ -183,6 +187,10 @@ module PageObjects def add_section_button_text I18n.t("js.sidebar.sections.custom.add") end + + def add_link_button_text + I18n.t("js.sidebar.sections.custom.links.add") + end end end end