mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-21 18:09:02 +01:00
Code Issues Releases Wiki Activity

TypedTableBlock: Add aria-expanded attribute to add new column button

Browse Source
This commit is contained in:
Scott Cranfill 2021-10-31 13:04:55 -04:00
parent 24b99a5ebc
commit 347cab9e37
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/entrypoints/contrib/typed_table_block/__snapshots__/typed_table_block.test.js.snap
View File

@ -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>

4
client/src/entrypoints/contrib/typed_table_block/typed_table_block.js
View File

@ -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);