From d93debc63456300a919658fb0434d54e0758192d Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 9 Feb 2024 08:42:28 -0500
Subject: [PATCH] A11Y: mark up custom nav section form for screen readers
 (#25623)

---
 .../components/modal/sidebar-section-form.hbs | 57 ++++++++++++-------
 .../components/sidebar/section-form-link.hbs  | 11 +++-
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs b/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs
index 7306a89683e..67c44ca954c 100644
--- a/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs
+++ b/app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs
@@ -18,6 +18,7 @@
             @type="text"
             @value={{this.transformedModel.title}}
             class={{this.transformedModel.titleCssClass}}
+            id="section-name"
             {{on
               "input"
               (action (mut this.transformedModel.title) value="target.value")
@@ -31,30 +32,48 @@
           {{/if}}
         </div>
       {{/unless}}
+      <div
+        role="table"
+        aria-rowcount={{this.activeLinks.length}}
+        class="sidebar-section-form__links-wrapper"
+      >
 
-      <div class="row-wrapper header">
-        <div class="input-group link-icon">
-          <label>{{i18n "sidebar.sections.custom.links.icon.label"}}</label>
+        <div class="row-wrapper header" role="row">
+          <div
+            class="input-group link-icon"
+            role="columnheader"
+            aria-sort="none"
+          >
+            <label>{{i18n "sidebar.sections.custom.links.icon.label"}}</label>
+          </div>
+
+          <div
+            class="input-group link-name"
+            role="columnheader"
+            aria-sort="none"
+          >
+            <label>{{i18n "sidebar.sections.custom.links.name.label"}}</label>
+          </div>
+
+          <div
+            class="input-group link-url"
+            role="columnheader"
+            aria-sort="none"
+          >
+            <label>{{i18n "sidebar.sections.custom.links.value.label"}}</label>
+          </div>
         </div>
 
-        <div class="input-group link-name">
-          <label>{{i18n "sidebar.sections.custom.links.name.label"}}</label>
-        </div>
+        {{#each this.activeLinks as |link|}}
+          <Sidebar::SectionFormLink
+            @link={{link}}
+            @deleteLink={{this.deleteLink}}
+            @reorderCallback={{this.reorder}}
+            @setDraggedLinkCallback={{this.setDraggedLink}}
+          />
+        {{/each}}
 
-        <div class="input-group link-url">
-          <label>{{i18n "sidebar.sections.custom.links.value.label"}}</label>
-        </div>
       </div>
-
-      {{#each this.activeLinks as |link|}}
-        <Sidebar::SectionFormLink
-          @link={{link}}
-          @deleteLink={{this.deleteLink}}
-          @reorderCallback={{this.reorder}}
-          @setDraggedLinkCallback={{this.setDraggedLink}}
-        />
-      {{/each}}
-
       <DButton
         @action={{this.addLink}}
         @title="sidebar.sections.custom.links.add"
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 75c45e5531d..14769fa4b52 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
@@ -11,11 +11,12 @@
   {{on "dragleave" this.dragLeave}}
   {{on "dragend" this.dragEnd}}
   {{on "drop" this.dropItem}}
+  role="row"
 >
   <div class="draggable" data-link-name={{@link.name}}>
     {{d-icon "grip-lines"}}
   </div>
-  <div class="input-group">
+  <div class="input-group" role="cell">
     <IconPicker
       @name="icon"
       @value={{@link.icon}}
@@ -28,6 +29,7 @@
       class={{@link.iconCssClass}}
       @onlyAvailable={{true}}
       @onChange={{action (mut @link.icon)}}
+      ariaLabel={{i18n "sidebar.sections.custom.links.icon.label"}}
     />
     {{#if @link.invalidIconMessage}}
       <div class="icon warning">
@@ -35,12 +37,13 @@
       </div>
     {{/if}}
   </div>
-  <div class="input-group">
+  <div class="input-group" role="cell">
     <Input
       name="link-name"
       @type="text"
       @value={{@link.name}}
       class={{@link.nameCssClass}}
+      ariaLabel={{i18n "sidebar.sections.custom.links.name.label"}}
       {{on "input" (action (mut @link.name) value="target.value")}}
     />
     {{#if @link.invalidNameMessage}}
@@ -49,12 +52,13 @@
       </div>
     {{/if}}
   </div>
-  <div class="input-group">
+  <div class="input-group" role="cell">
     <Input
       name="link-url"
       @type="text"
       @value={{@link.value}}
       class={{@link.valueCssClass}}
+      ariaLabel={{i18n "sidebar.sections.custom.links.value.label"}}
       {{on "input" (action (mut @link.value) value="target.value")}}
     />
     {{#if @link.invalidValueMessage}}
@@ -68,5 +72,6 @@
     @action={{fn @deleteLink @link}}
     @title="sidebar.sections.custom.links.delete"
     class="btn-flat delete-link"
+    role="cell"
   />
 </div>
\ No newline at end of file