From eec0ad2981d875e2a6a3daa5a5e99e34b866b324 Mon Sep 17 00:00:00 2001
From: Matt Westcott <matt@west.co.tt>
Date: Fri, 15 Oct 2021 12:32:50 +0100
Subject: [PATCH] Improve tab ordering of 'insert column' buttons

---
 .../__snapshots__/typed_table_block.test.js.snap     |  4 ++--
 .../contrib/typed_table_block/typed_table_block.js   | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/client/src/entrypoints/contrib/typed_table_block/__snapshots__/typed_table_block.test.js.snap b/client/src/entrypoints/contrib/typed_table_block/__snapshots__/typed_table_block.test.js.snap
index a095044450..09824e53ce 100644
--- a/client/src/entrypoints/contrib/typed_table_block/__snapshots__/typed_table_block.test.js.snap
+++ b/client/src/entrypoints/contrib/typed_table_block/__snapshots__/typed_table_block.test.js.snap
@@ -8,9 +8,9 @@ exports[`wagtail.contrib.typed_table_block.blocks.TypedTableBlock it renders cor
         <div class=\\"typed-table-block__wrapper\\">
           <table>
             <thead>
-              <tr><th><input type=\\"hidden\\" name=\\"mytable-column-0-type\\" value=\\"test_block_a\\"><input type=\\"hidden\\" name=\\"mytable-column-0-order\\" value=\\"0\\"><input name=\\"mytable-column-0-heading\\" class=\\"column-heading\\" placeholder=\\"Column heading\\"><button type=\\"button\\" class=\\"button button-small button-secondary prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert column\\">+</button><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace white no delete-column\\" aria-label=\\"Delete column\\" title=\\"Delete column\\">
+              <tr><th><input type=\\"hidden\\" name=\\"mytable-column-0-type\\" value=\\"test_block_a\\"><input type=\\"hidden\\" name=\\"mytable-column-0-order\\" value=\\"0\\"><button type=\\"button\\" class=\\"button button-small button-secondary prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert column\\">+</button><input name=\\"mytable-column-0-heading\\" class=\\"column-heading\\" placeholder=\\"Column heading\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace white no delete-column\\" aria-label=\\"Delete column\\" title=\\"Delete column\\">
         <svg class=\\"icon icon-bin icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-bin\\"></use></svg>
-      </button></th><th><input type=\\"hidden\\" name=\\"mytable-column-1-type\\" value=\\"test_block_b\\"><input type=\\"hidden\\" name=\\"mytable-column-1-order\\" value=\\"1\\"><input name=\\"mytable-column-1-heading\\" class=\\"column-heading\\" placeholder=\\"Column heading\\"><button type=\\"button\\" class=\\"button button-small button-secondary prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert column\\">+</button><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace white no delete-column\\" aria-label=\\"Delete column\\" title=\\"Delete column\\">
+      </button></th><th><input type=\\"hidden\\" name=\\"mytable-column-1-type\\" value=\\"test_block_b\\"><input type=\\"hidden\\" name=\\"mytable-column-1-order\\" value=\\"1\\"><button type=\\"button\\" class=\\"button button-small button-secondary prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert column\\">+</button><input name=\\"mytable-column-1-heading\\" class=\\"column-heading\\" placeholder=\\"Column heading\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace white no delete-column\\" aria-label=\\"Delete column\\" title=\\"Delete column\\">
         <svg class=\\"icon icon-bin icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-bin\\"></use></svg>
       </button></th><th class=\\"control-cell\\">
                   <button type=\\"button\\" class=\\"button button-small button-secondary append-column\\" data-append-column=\\"\\" aria-label=\\"Add column\\" title=\\"Add column\\">+</button>
diff --git a/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js b/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js
index f5c9f235ae..6af9826741 100644
--- a/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js
+++ b/client/src/entrypoints/contrib/typed_table_block/typed_table_block.js
@@ -209,12 +209,6 @@ export class TypedTableBlock {
     column.deletedInput.value = '';
     this.deletedFieldsContainer.appendChild(column.deletedInput);
 
-    column.headingInput = document.createElement('input');
-    column.headingInput.name = this.prefix + '-column-' + column.id + '-heading';
-    column.headingInput.className = 'column-heading';
-    column.headingInput.placeholder = this.blockDef.meta.strings.COLUMN_HEADING;
-    newHeaderCell.appendChild(column.headingInput);
-
     const prependColumnButton = $(`<button type="button"
       class="button button-small button-secondary prepend-column"
       aria-label="${h(this.blockDef.meta.strings.INSERT_COLUMN)}"
@@ -226,6 +220,12 @@ export class TypedTableBlock {
       });
     });
 
+    column.headingInput = document.createElement('input');
+    column.headingInput.name = this.prefix + '-column-' + column.id + '-heading';
+    column.headingInput.className = 'column-heading';
+    column.headingInput.placeholder = this.blockDef.meta.strings.COLUMN_HEADING;
+    newHeaderCell.appendChild(column.headingInput);
+
     const deleteColumnButton = $(`<button type="button"
       class="button button-secondary button-small button--icon text-replace white no delete-column"
       aria-label="${h(this.blockDef.meta.strings.DELETE_COLUMN)}"