From 347cab9e37b37cd3052ef48ab8df2fcbf7751961 Mon Sep 17 00:00:00 2001
From: Scott Cranfill <scott@scottcranfill.com>
Date: Sun, 31 Oct 2021 13:04:55 -0400
Subject: [PATCH] TypedTableBlock: Add aria-expanded attribute to add new
 column button

---
 .../__snapshots__/typed_table_block.test.js.snap              | 4 ++--
 .../contrib/typed_table_block/typed_table_block.js            | 4 +++-
 2 files changed, 5 insertions(+), 3 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 a30348af56..741f6c6859 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,11 +8,11 @@ exports[`wagtail.contrib.typed_table_block.blocks.TypedTableBlock it renders cor
         <div class=\\"typed-table-block__wrapper\\">
           <table>
             <thead>
-              <tr><th></th><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-secondary button-small button--icon text-replace prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert column\\">
+              <tr><th></th><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-secondary button-small button--icon text-replace prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert column\\" aria-expanded=\\"false\\">
         <svg class=\\"icon icon-plus icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-plus\\"></use></svg>
       </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 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\\"><button type=\\"button\\" class=\\"button button-secondary button-small button--icon text-replace prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert 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-secondary button-small button--icon text-replace prepend-column\\" aria-label=\\"Insert column\\" title=\\"Insert column\\" aria-expanded=\\"false\\">
         <svg class=\\"icon icon-plus icon\\" aria-hidden=\\"true\\" focusable=\\"false\\"><use href=\\"#icon-plus\\"></use></svg>
       </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 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>
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 7f4c999a09..7d4aa79b84 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
@@ -141,6 +141,7 @@ export class TypedTableBlock {
   showAddColumnMenu(baseElement, callback) {
     this.addColumnMenuBaseElement = baseElement;
     baseElement.after(this.addColumnMenu);
+    baseElement.attr('aria-expanded', 'true');
     this.addColumnMenu.show();
     this.addColumnCallback = callback;
   }
@@ -221,7 +222,8 @@ export class TypedTableBlock {
     const prependColumnButton = $(`<button type="button"
       class="button button-secondary button-small button--icon text-replace prepend-column"
       aria-label="${h(this.blockDef.meta.strings.INSERT_COLUMN)}"
-      title="${h(this.blockDef.meta.strings.INSERT_COLUMN)}">
+      title="${h(this.blockDef.meta.strings.INSERT_COLUMN)}"
+      aria-expanded="false">
         <svg class="icon icon-plus icon" aria-hidden="true" focusable="false"><use href="#icon-plus"></use></svg>
       </button>`);
     $(newHeaderCell).append(prependColumnButton);