tonyair/silverstripe-gridfieldextensions
1
0
Fork 0
mirror of https://github.com/symbiote/silverstripe-gridfieldextensions.git synced 2024-10-22 15:05:39 +00:00
Code Issues Projects Releases Wiki Activity

Refactored grid field nested form link to be a button with aria-attributes,

Browse Source 
for better accessibility.
This commit is contained in:
Niklas Forsdahl 2024-04-24 11:13:09 +03:00
parent 46e5cccdb4
commit 1ad6acbb84
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
javascript/GridFieldExtensions.js
View File

@ -517,7 +517,7 @@
/**
* GridFieldNestedForm
*/
$('.grid-field .col-listChildrenLink a').entwine({
$('.grid-field .col-listChildrenLink button').entwine({
onclick: function(e) {
let gridField = $(this).closest('.grid-field');
let currState = gridField.getState();
@ -552,7 +552,7 @@
}
$.ajax({
type: 'POST',
url: $(this).attr('href'),
url: $(this).attr('data-url'),
data: data,
headers: {
'X-Pjax': pjaxTarget
@ -572,6 +572,7 @@
}
$(this).removeClass('font-icon-right-dir');
$(this).addClass('font-icon-down-dir');
$(this).attr('aria-expanded', 'true');
}
else {
$.ajax({
@ -580,6 +581,7 @@
$(this).closest('tr').next('.nested-gridfield').hide();
$(this).removeClass('font-icon-down-dir');
$(this).addClass('font-icon-right-dir');
$(this).attr('aria-expanded', 'false');
}
e.preventDefault();
e.stopPropagation();

8
templates/Symbiote/GridFieldExtensions/GridFieldNestedForm.ss
View File

@ -1,4 +1,10 @@
<a class="btn btn-secondary btn--no-text btn--icon-large <% if $Toggle == 'open' %>font-icon-down-dir<% else %>font-icon-right-dir<% end_if %> cms-panel-link list-children-link" data-pjax-target="$PjaxFragment" href="$Link" data-toggle="$ToggleLink"></a>
<button
class="btn btn-secondary btn--no-text btn--icon-large <% if $Toggle == 'open' %>font-icon-down-dir<% else %>font-icon-right-dir<% end_if %> cms-panel-link list-children-link"
aria-expanded="<% if $Toggle == 'open' %>true<% else %>false<% end_if %>"
data-pjax-target="$PjaxFragment"
data-url="$Link"
data-toggle="$ToggleLink"
></button>
<% if $Toggle == 'open' %>
$NestedField
<% else %>