A11Y: when adding custom sidebar link, first input of new row should get focus (#25920)

* A11Y: when adding custom sidebar links, ensure first input of new row gets focus

* switch to afterRender decorator

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

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}}
     <div class="draggable" data-link-name={{@link.name}}>

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")

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