Added aria-expanded attribute to add new column button (wagtail#12680)

Author: ayaan-qadri

CHANGELOG.txt

@@ -40,6 +40,7 @@ Changelog
  * Fix: Ensure new `ListBlock` instances get created with unique IDs in the admin client for accessibility and mini-map element references (Srishti Jaiswal)
  * Fix: Return never-cache HTTP headers when serving pages and documents with view restrictions (Krystian Magdziarz, Dawid Bugajewski)
  * Fix: Implement `get_block_by_content_path` on `ImageBlock` to prevent errors on commenting (Matt Westcott)
+ * Fix: Add `aria-expanded` attribute to new column button on `TypedTableBlock` to reflect menu state (Ayaan Qadri, Scott Cranfill)
  * Docs: Move the model reference page from reference/pages to the references section as it covers all Wagtail core models (Srishti Jaiswal)
  * Docs: Move the panels reference page from references/pages to the references section as panels are available for any model editing, merge panels API into this page (Srishti Jaiswal)
  * Docs: Move the tags documentation to standalone advanced topic, instead of being inside the reference/pages section (Srishti Jaiswal)

client/src/entrypoints/contrib/typed_table_block/__snapshots__/typed_table_block.test.js.snap

@@ -24,16 +24,16 @@ exports[`wagtail.contrib.typed_table_block.blocks.TypedTableBlock it renders cor
         <div class="typed-table-block__wrapper">
           <table>
             <thead>
-              <tr><th aria-hidden="true"></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 aria-hidden="true"></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" aria-expanded="false" title="Insert column">
         <svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg>
       </button><input type="text" 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"><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" aria-expanded="false" title="Insert column">
         <svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg>
       </button><input type="text" 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"><use href="#icon-bin"></use></svg>
       </button></th><th class="control-cell">
-                  <button type="button" class="button button-small button-secondary append-column button--icon text-replace white" data-append-column="" aria-label="Add column" title="Add column"><svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg></button>
+                  <button type="button" class="button button-small button-secondary append-column button--icon text-replace white" aria-expanded="false" data-append-column="" aria-label="Add column" title="Add column"><svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg></button>
                 </th></tr>
             </thead>
             <tbody><tr><td class="control-cell"><button type="button" class="button button-secondary button-small button--icon text-replace prepend-row" aria-label="Insert row" title="Insert row">
@@ -130,16 +130,16 @@ exports[`wagtail.contrib.typed_table_block.blocks.TypedTableBlock setError passe
         <div class="typed-table-block__wrapper">
           <table>
             <thead>
-              <tr><th aria-hidden="true"></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 aria-hidden="true"></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" aria-expanded="false" title="Insert column">
         <svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg>
       </button><input type="text" 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"><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" aria-expanded="false" title="Insert column">
         <svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg>
       </button><input type="text" 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"><use href="#icon-bin"></use></svg>
       </button></th><th class="control-cell">
-                  <button type="button" class="button button-small button-secondary append-column button--icon text-replace white" data-append-column="" aria-label="Add column" title="Add column"><svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg></button>
+                  <button type="button" class="button button-small button-secondary append-column button--icon text-replace white" aria-expanded="false" data-append-column="" aria-label="Add column" title="Add column"><svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg></button>
                 </th></tr>
             </thead>
             <tbody><tr><td class="control-cell"><button type="button" class="button button-secondary button-small button--icon text-replace prepend-row" aria-label="Insert row" title="Insert row">
@@ -236,16 +236,16 @@ exports[`wagtail.contrib.typed_table_block.blocks.TypedTableBlock setError shows
         <div class="typed-table-block__wrapper">
           <table>
             <thead>
-              <tr><th aria-hidden="true"></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 aria-hidden="true"></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" aria-expanded="false" title="Insert column">
         <svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg>
       </button><input type="text" 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"><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" aria-expanded="false" title="Insert column">
         <svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg>
       </button><input type="text" 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"><use href="#icon-bin"></use></svg>
       </button></th><th class="control-cell">
-                  <button type="button" class="button button-small button-secondary append-column button--icon text-replace white" data-append-column="" aria-label="Add column" title="Add column"><svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg></button>
+                  <button type="button" class="button button-small button-secondary append-column button--icon text-replace white" aria-expanded="false" data-append-column="" aria-label="Add column" title="Add column"><svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg></button>
                 </th></tr>
             </thead>
             <tbody><tr><td class="control-cell"><button type="button" class="button button-secondary button-small button--icon text-replace prepend-row" aria-label="Insert row" title="Insert row">

client/src/entrypoints/contrib/typed_table_block/typed_table_block.js

@@ -78,7 +78,7 @@ export class TypedTableBlock {
               <tr>
                 <th aria-hidden="true"></th>
                 <th class="control-cell">
-                  <button type="button" class="button button-small button-secondary append-column" data-append-column>
+                  <button type="button" class="button button-small button-secondary append-column" aria-expanded="false" data-append-column>
                     ${h(strings.ADD_COLUMN)}
                   </button>
                 </th>
@@ -148,12 +148,12 @@ export class TypedTableBlock {
       ).text(childBlockDef.meta.label);
       columnTypeButton.on('click', () => {
         if (this.addColumnCallback) this.addColumnCallback(childBlockDef);
-        this.hideAddColumnMenu();
+        this.hideAddColumnMenu(this.addColumnMenuTrigger);
       });
       const li = $('<li></li>').append(columnTypeButton);
       this.addColumnMenu.append(li);
     });
-    this.addColumnMenuBaseElement = null; // the element the add-column menu is attached to
+    this.addColumnMenuTrigger = null; // the element the add-column menu is attached to
 
     this.appendColumnButton.on('click', () => {
       this.toggleAddColumnMenu(this.appendColumnButton, (chosenBlockDef) => {
@@ -173,23 +173,26 @@ export class TypedTableBlock {
     }
   }
 
-  showAddColumnMenu(baseElement, callback) {
-    this.addColumnMenuBaseElement = baseElement;
-    baseElement.after(this.addColumnMenu);
+  showAddColumnMenu(triggeredElement, callback) {
+    this.addColumnMenuTrigger?.attr('aria-expanded', 'false');
+    this.addColumnMenuTrigger = triggeredElement;
+    triggeredElement.after(this.addColumnMenu);
+    triggeredElement.attr('aria-expanded', 'true');
     this.addColumnMenu.show();
     this.addColumnCallback = callback;
   }
 
-  hideAddColumnMenu() {
+  hideAddColumnMenu(triggeredElement) {
+    triggeredElement.attr('aria-expanded', 'false');
     this.addColumnMenu.hide();
-    this.addColumnMenuBaseElement = null;
+    this.addColumnMenuTrigger = null;
   }
 
-  toggleAddColumnMenu(baseElement, callback) {
-    if (this.addColumnMenuBaseElement === baseElement) {
-      this.hideAddColumnMenu();
+  toggleAddColumnMenu(triggeredElement, callback) {
+    if (this.addColumnMenuTrigger === triggeredElement) {
+      this.hideAddColumnMenu(triggeredElement);
     } else {
-      this.showAddColumnMenu(baseElement, callback);
+      this.showAddColumnMenu(triggeredElement, callback);
     }
   }
 
@@ -271,10 +274,13 @@ 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)}"
+      aria-expanded="false"
       title="${h(this.blockDef.meta.strings.INSERT_COLUMN)}">
         <svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg>
       </button>`);
+
     $(newHeaderCell).append(prependColumnButton);
+
     prependColumnButton.on('click', () => {
       this.toggleAddColumnMenu(prependColumnButton, (chosenBlockDef) => {
         this.insertColumn(column.position, chosenBlockDef, {
@@ -331,6 +337,7 @@ export class TypedTableBlock {
       .attr('aria-label', this.blockDef.meta.strings.ADD_COLUMN)
       .addClass('button--icon text-replace white')
       .attr('aria-label', this.blockDef.meta.strings.ADD_COLUMN)
+      .attr('aria-expanded', 'false')
       .attr('title', this.blockDef.meta.strings.ADD_COLUMN);
 
     if (opts && opts.addInitialRow && this.tbody.children.length === 0) {

docs/releases/6.4.md

@@ -52,6 +52,7 @@ depth: 1
  * Ensure new `ListBlock` instances get created with unique IDs in the admin client for accessibility and mini-map element references (Srishti Jaiswal)
  * Return never-cache HTTP headers when serving pages and documents with view restrictions (Krystian Magdziarz, Dawid Bugajewski)
  * Implement `get_block_by_content_path` on `ImageBlock` to prevent errors on commenting (Matt Westcott)
+ * Add `aria-expanded` attribute to new column button on `TypedTableBlock` to reflect menu state (Ayaan Qadri, Scott Cranfill)
 
 ### Documentation